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" />
Awesome/DataController.cs
public ActionResult GetMealsSetValue2(int[] categories)
{
    categories = categories ?? new int[] { };

    var items = Db.Meals.Where(o => categories.Contains(o.Category.Id)).ToList();

    object value = null;
    if (items.Any())
    {
        value = items.Skip(1).First().Id;
    }

    return Json(new AweItems
    {
        Items = items.Select(o => new KeyContent(o.Id, o.Name)),
        Value = value
    });
}

public ActionResult GetOrgSetValue()
{
    var items = Db.Organisations.ToList();

    object value = null;
    if (items.Any())
    {
        value = items.Skip(2).First().Id;
    }

    return Json(new AweItems
    {
        Items = items.Select(o => new KeyContent(o.Id, o.Name)),
        Value = value
    });
}

Using predefined parameters

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

Events and Api







 Comments