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 this.AweJson(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 this.AweJson(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



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

Cascading DropdownLists

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

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

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 DropdownList.
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.ImageName));
    return this.AweJson(items);
}

DropdownList 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
<% RemoteSearchDD.DropdownList(new DropdownListOpt
    {
        Value = 225,
        Url = Page.Url().Action("GetMealsInit", "Data"),
        SearchFunc = new SearchFuncOpt
        {
            Name = "aweUtils.osearch",
            Url = Page.Url().Action("SearchMeals", "Data"),
            Key = "m1"
        }
    }); %>
<awe:Ocon runat="server" ID="RemoteSearchDD" />

<% RemoteSearchCombobox.Combobox(new ComboboxOpt
    {
        Value = 225,
        Url = Page.Url().Action("GetMealsInit", "Data"),
        SearchFunc = new SearchFuncOpt
        {
            Name = "aweUtils.osearch",
            Url = Page.Url().Action("SearchMeals", "Data"),
            Key = "m1"
        }
    }); %>
<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 this.AweJson(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 this.AweJson(items);
}

Set value from get items call



AjaxRadioListDemo.aspx
<h2>Set value from get items call</h2>
<% CategorySv.DropdownList(new DropdownListOpt
    {
        Url = Page.Url().Action("GetCategories", "Data"),
        AutoSelectFirst = true
    }); %>
<awe:Ocon runat="server" ID="CategorySv" />

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

<br />
<br />
<% OrgsSv.DropdownList(new DropdownListOpt
    {
        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 this.AweJson(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 this.AweJson(new AweItems
    {
        Items = items.Select(o => new KeyContent(o.Id, o.Name)),
        Value = value
    });
}

Using predefined parameters

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

Events and Api







 Comments