AjaxRadioList and other single select editors

AjaxRadioList needs an url, js func or controller to get data from, it will render a list of radiobuttons

Cascading Radio button list using binding to Parent

AjaxRadioListDemo.aspx
<% ParentCategory.AjaxRadioList()
.Url(Page.Url().Action("GetCategories", "Data")); %>
<awe:Ocon runat="server" ID="ParentCategory" />

<% ChildMeal.AjaxRadioList()
.Url(Page.Url().Action("GetMeals", "Data"))
.Parent(ParentCategory.ClientID, "categories"); %>
<awe:Ocon runat="server" ID="ChildMeal" />
Awesome/DataController.cs
public ActionResult GetCategories()
{
return Json(Db.Categories.Select(o => new KeyContent(o.Id, o.Name)));
}

public ActionResult GetMeals(int[] categories)
{
categories = categories ?? new int[] { };
var items = Db.Meals.Where(o => categories.Contains(o.Category.Id))
.Select(o => new KeyContent(o.Id, o.Name));

return Json(items);
}

Bound to many parents

AjaxRadioListDemo.aspx
<% Categories.AjaxCheckboxList().Url(Page.Url().Action("GetCategories", "Data")); %>
<awe:Ocon runat="server" ID="Categories" />
<% Category2.AjaxRadioList()
.Url(Page.Url().Action("GetCategories", "Data")); %>
<awe:Ocon runat="server" ID="Category2" />

<% ChildOfManyMeal.AjaxRadioList()
.Url(Page.Url().Action("GetMeals", "Data"))
.Parent(Categories.ClientID, "categories")
.Parent(Category2.ClientID, "categories"); %>
<awe:Ocon runat="server" ID="ChildOfManyMeal" />

Client data

Besides remote data using .Url(str), it can also get data from the client using .DataFunc(jsFunc), the jsFunc can return the items or a Promise
AjaxRadioListDemo.aspx
<script>
var meals = <%=DemoUtils.Encode(Db.Meals.Select(o => new KeyContent(o.Id, o.Name))) %>;
var categories = <%=DemoUtils.Encode(Db.Categories.Select(o => new KeyContent(o.Id, o.Name))) %>;
function setCategs() {
return categories;
}
</script>
<% CatClient1.AjaxRadioList().DataFunc("setCategs"); %>
<awe:Ocon runat="server" ID="CatClient1" />
<%--instead of setCategs we can also use aweUtils.getItems(categories)--%>

RadioButtonList

AjaxRadioListDemo.aspx
<% CategoryOchk.RadioButtonList(new RadioButtonListOpt
{
Value = Db.Categories[0].Id,
Url = Page.Url().Action("GetCategories", "Data")
}); %>
<awe:Ocon runat="server" ID="CategoryOchk" />
<%--can also use .Url(url)--%>

ButtonGroup

AjaxRadioListDemo.aspx
<% CategoriesButtonGroup.ButtonGroup(new ButtonGroupOpt
{
Url = Page.Url().Action("GetCategories", "Data")
}); %>
<awe:Ocon runat="server" ID="CategoriesButtonGroup" />

DropdownList



automatically gets search when there are more than 10 items (configurable e.g. .Odropdown(o => o.AutoSearch(5)))
AjaxRadioListDemo.aspx
<% AllMealsOdropdown.DropdownList(new DropdownListOpt
{
Url = Page.Url().Action("GetMealsImg", "Data")
}); %>
<awe:Ocon runat="server" ID="AllMealsOdropdown" />

Cascading DropdownLists

AjaxRadioListDemo.aspx
<% CatOdropdown.DropdownList(new DropdownListOpt
{
Url = Page.Url().Action("GetCategories", "Data")
}); %>
<awe:Ocon runat="server" ID="CatOdropdown" />

<% MealsOdropdown.DropdownList(new DropdownListOpt
{
AutoSelectFirst = true,
Url = Page.Url().Action("GetMeals", "Data")
}
.Parent(CatOdropdown.ClientID, "categories")); %>
<awe:Ocon runat="server" ID="MealsOdropdown" />

Combobox

AjaxRadioListDemo.aspx
<% AllMealsCombo.Combobox(new ComboboxOpt
{
Value = "combo value",
Url = Page.Url().Action("GetMealsImg", "Data")
}); %>
<awe:Ocon runat="server" ID="AllMealsCombo" />

Color dropdown

AjaxRadioListDemo.aspx
<% ColorPicker1.AjaxRadioList()
.ColorDropdown(o => o.AutoSelectFirst()); %>
<awe:Ocon runat="server" ID="ColorPicker1" />

DropdownList with custom item and caption



Custom js functions are defined for rendering the items and caption of the odropdown.
AjaxRadioListDemo.aspx
<% CustomItemOdd.DropdownList(new DropdownListOpt
{
Value = Db.Meals[1].Id,
Url = Page.Url().Action("GetMealsImg", "Data")
}.ImgItem()); %>
<awe:Ocon runat="server" ID="CustomItemOdd" />
Awesome/DataController.cs
public ActionResult GetMealsImg()
{
var url = Url.Content(DemoUtils.MealsUrl);
var items = Db.Meals
.Select(o => new MealDisplay(o.Id, o.Name, url + o.Name + ".jpg"));
return Json(items);
}

TimePicker

AjaxRadioListDemo.aspx
<% TimePicker1.AjaxRadioList()
.TimePicker(o => o.Caption("time please").Step(15)); %>
<awe:Ocon runat="server" ID="TimePicker1" />

Odropdown with remote search

try 'o'

Only a few items + the selected one are loaded initially using the url specified in .Url, but when the user types something in the searchbox more items are loaded by executing the specified .SearchFunc; the new loaded items will be stored/cached until a load will occur, e.g. when a parent changes it's value the component will load.
Components with the same cache key ("m1", "g") have a shared cache.
AjaxRadioListDemo.aspx
<% RemoteSearchOdropdown.AjaxRadioList()
.Odropdown(o => o.SearchFunc("aweUtils.osearch", Page.Url().Action("SearchMeals", "Data"), "m1"))
.Value(197)
.Url(Page.Url().Action("GetMealsInit", "Data")); %>
<awe:Ocon runat="server" ID="RemoteSearchOdropdown" />

<% RemoteSearchCombobox.AjaxRadioList()
.Combobox(o => o.SearchFunc("aweUtils.osearch", Page.Url().Action("SearchMeals", "Data"), "m1"))
.Value(197)
.Url(Page.Url().Action("GetMealsInit", "Data")); %>
<awe:Ocon runat="server" ID="RemoteSearchCombobox" />
<span class="hint">try 'o'</span>
Awesome/DataController.cs
public ActionResult GetMealsInit(int? v)
{
var items = Db.Meals.Take(3).ToList();
var selected = Db.Meals.SingleOrDefault(o => o.Id == v);

if (selected != null && !items.Contains(selected))
{
items.Add(selected);
}

return Json(items.Select(o => new KeyContent(o.Id, o.Name)));
}

public ActionResult SearchMeals(string term = "")
{
var items = Db.Meals
.Where(o => o.Name.IndexOf(term, StringComparison.OrdinalIgnoreCase) >= 0)
.Take(10)
.Select(o => new KeyContent(o.Id, o.Name));

return Json(items);
}

Set value from get items call



AjaxRadioListDemo.aspx
<h2>Set value from get items call</h2>
<% CategorySv.AjaxRadioList()
.Odropdown(o => o.AutoSelectFirst())
.Url(Page.Url().Action("GetCategories", "Data")); %>
<awe:Ocon runat="server" ID="CategorySv" />

<% MealsSv.AjaxRadioList()
.Parent(CategorySv.ClientID, "categories")
.Url(Page.Url().Action("GetMealsSetValue2", "Data")); %>
<awe:Ocon runat="server" ID="MealsSv" />

<br />
<br />
<% OrgsSv.AjaxRadioList()
.Odropdown()
.Url(Page.Url().Action("GetOrgSetValue", "Data")); %>
<awe:Ocon runat="server" ID="OrgsSv" />

Using predefined parameters

setting parameter parent = { Fruits, Legumes } using .Parameter and .ParameterFunc extensions

Events and Api







Comments