AjaxRadioList

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 utils.getItems(categories)--%>

Mods

Extending the behaviour of the AjaxRadioList using mods. The new components have the same features as the AjaxRadioList but render (look) differently and have additional properties which can be specified inside the Extension Method (e.g. .Odropdown(o => o.Caption("please select")) )

Ochk

AjaxRadioListDemo.aspx
<% CategoryOchk.AjaxRadioList()
    .Value(Db.Categories[0].Id)
    .Ochk()
    .DataFunc("utils.getItems(categories)"); %>
<awe:Ocon runat="server" ID="CategoryOchk" />
<%--can also use .Url(url)--%>

ButtonGroup

AjaxRadioListDemo.aspx
<% CategoriesButtonGroup.AjaxRadioList()
    .ButtonGroup()
    .DataFunc("utils.getItems(categories)"); %>
<awe:Ocon runat="server" ID="CategoriesButtonGroup" />

Odropdown



automatically gets search when there are more than 10 items (configurable e.g. .Odropdown(o => o.AutoSearch(5)))
AjaxRadioListDemo.aspx
<% AllMealsOdropdown.AjaxRadioList()
  .Odropdown()
  .DataFunc("utils.getItems(meals)"); %>
<awe:Ocon runat="server" ID="AllMealsOdropdown" />

Cascading Odropdowns

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

<% MealsOdropdown.AjaxRadioList()
    .Odropdown(o => o.AutoSelectFirst())
    .Url(Page.Url().Action("GetMeals", "Data"))
    .Parent(CatOdropdown.ClientID, "categories"); %>
<awe:Ocon runat="server" ID="MealsOdropdown" />

Combobox

AjaxRadioListDemo.aspx
<% AllMealsCombo.AjaxRadioList()
    .Value("hi there")
    .Combobox()
    .DataFunc("utils.getItems(meals)"); %>
<awe:Ocon runat="server" ID="AllMealsCombo" />

Color dropdown

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

Odropdown with custom item and caption



Custom js functions are defined for rendering the items and caption of the odropdown.
AjaxRadioListDemo.aspx
<% CustomItemOdd.AjaxRadioList()
      .Value(Db.Meals[1].Id)
      .Odropdown(o => o.ItemFunc("imgItem").CaptionFunc("imgCaption"))
      .Url(Page.Url().Action("GetMealsImg", "Data")); %>
<awe:Ocon runat="server" ID="CustomItemOdd" />
<script>
    function imgItem(o) {
        return '<div class="o-igit"><img src="' + o.url + '" />' + o.c + '</div>';
    }

    function imgCaption(o) {
        return '<img class="cthumb" src="' + o.url + '" />' + o.c;
    }
</script>
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("utils.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("utils.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
<h3>Set value from get items call</h3>
<% 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