2. ASPRunner.NET General questions
  3. radio
This topic is locked

radio

 		8/22/2026 05:59:25
ASPRunner.NET General questions
M
 max benelli author

I would like to change the control type for search_field_options on the Advanced Search page from a select menu to radio buttons.
ChatGPT 8/22/2026

Certainly! To change the control type for the search_field_options in ASPRunner.NET from a select menu to radio buttons on the Advanced Search page, you can follow these steps:

  1. Open Your Project: Launch ASPRunner.NET and open your project.


  2. Navigate to the Advanced Search Settings:

    • In the left panel, go to the "Search" settings.
    • Find the section related to "Advanced Search".


  3. Locate search_field_options:

    • Within the Advanced Search settings, locate the field search_field_options.
    • This field will typically be defined in the list of searchable fields.


  4. Change Control Type:

    • Click on the search_field_options field to open its properties.
    • Look for a property labeled "Control Type" or similar.
    • Change the Control Type from "Select" (or "Dropdown") to "Radio Buttons".


  5. Configure Radio Button Options:

    • Once you have changed the control type, you will need to specify the options for the radio buttons. This might involve listing the possible values that should appear as radio buttons.


  6. Save Changes: After making the changes, be sure to save your project.


  7. Test Your Changes:

    • Run your application and navigate to the Advanced Search page to ensure that the search_field_options is displayed as radio buttons.


  8. Adjust Styling (if necessary): Depending on your application’s CSS, you may need to adjust the styling of the radio buttons to ensure they fit with your design.



By following these steps, you should be able to successfully change the control type for search_field_options from a select menu to radio buttons on the Advanced Search page in ASPRunner.NET. If you encounter any issues or need further assistance, feel free to ask!
Sergey Kornilov admin 8/23/2026

Add the following code to Javascript OnLoad event of that Search page and enjoy:

(function () {
function convertSearchOptionToRadios(select, selectIndex) {
if (!select || select.dataset.radioConverted === "1") {
return;
}

select.dataset.radioConverted = "1";

/*
* Add visual separation between individual search fields.
*/
var fieldContainer = select.closest(".r-integrated-field");

if (fieldContainer) {
fieldContainer.style.borderBottom =
"1px solid #cccccc";
fieldContainer.style.paddingTop = "12px";
fieldContainer.style.paddingBottom = "12px";
fieldContainer.style.marginBottom = "4px";
}

/*
* Create the container for the horizontal radio buttons.
*/
var radioContainer = document.createElement("span");

radioContainer.className = "search-option-radios";
radioContainer.style.display = "block";
radioContainer.style.whiteSpace = "nowrap";
radioContainer.style.overflowX = "auto";
radioContainer.style.maxWidth = "100%";
radioContainer.style.padding = "10px";
radioContainer.style.backgroundColor = "#f7f7f7";
radioContainer.style.border = "1px solid #d5d5d5";
radioContainer.style.borderRadius = "4px";

/*
* Give each field its own radio-button group.
*/
var radioGroupName =
"radio_" +
select.name +
"_" +
(pageObj ? pageObj.id : "search") +
"_" +
selectIndex;

/*
* Convert every option in the dropdown into a radio button.
*/
Array.prototype.forEach.call(
select.options,
function (option, optionIndex) {
var label = document.createElement("label");

label.style.display = "inline-block";
label.style.whiteSpace = "nowrap";
label.style.fontWeight = "normal";
label.style.cursor = "pointer";
label.style.margin = "0 18px 0 0";
label.style.padding = "3px 0";

var radio = document.createElement("input");

radio.type = "radio";
radio.name = radioGroupName;
radio.value = option.value;
radio.checked = option.selected;
radio.disabled = option.disabled;

radio.id =
"radio_" +
select.id +
"_" +
optionIndex;

radio.style.marginRight = "4px";
radio.style.verticalAlign = "middle";
radio.addEventListener(
"change",
function () {
if (!this.checked) {
return;
}

select.value = this.value;
select.dispatchEvent(
new Event("change", {
bubbles: true
})
);
}
);

label.setAttribute("for", radio.id);
label.appendChild(radio);
label.appendChild(
document.createTextNode(option.text)
);

radioContainer.appendChild(label);
}
);
select.parentNode.insertBefore(
radioContainer,
select
);

select.style.display = "none";
}
var optionSelects = document.querySelectorAll(
'.r-search-option select[id^="srchOpt_"]'
);

Array.prototype.forEach.call(
optionSelects,
convertSearchOptionToRadios
);
})();