Multiple selection editors

Editors used for multiple selection.

Cascading CheckboxList using binding to parent

AjaxCheckboxListDemo.aspx

<h2>Cascading CheckboxList using binding to parent</h2>
<% ParentCategory.AjaxCheckboxList()
                          .Url(Page.Url().Action("GetCategories", "Data")); %>
<awe:Ocon runat="server" ID="ParentCategory" />

<% ChildMeals.AjaxCheckboxList()
                          .Parent(ParentCategory.ClientID, "categories")
                          .Url(Page.Url().Action("GetMeals", "Data")); %>
<awe:Ocon runat="server" ID="ChildMeals" />

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

CheckboxList

AjaxCheckboxListDemo.aspx

<% CategoriesOchk.CheckBoxList(new CheckBoxListOpt
   {
       SelectAll = true,
       Url = Page.Url().Action("GetCategories", "Data"),
       Value = new[] { Db.Categories[0].Id, Db.Categories[1].Id }               
   }); %>
<awe:Ocon runat="server" ID="CategoriesOchk" />

Multiselect

Parent and Child with NoSelectClose(), values can be reordered by dragging them

AjaxCheckboxListDemo.aspx

<% CategoriesMulti.AjaxCheckboxList()
    .Multiselect()
    .Url(Page.Url().Action("GetCategories", "Data")); %>
<awe:Ocon runat="server" ID="CategoriesMulti" />

<% AllMealsMulti.AjaxCheckboxList()
    .Multiselect(o => o.NoSelectClose())
    .Parent(CategoriesMulti.ClientID, "categories")
    .Url(Page.Url().Action("GetMeals", "Data")); %>
<awe:Ocon runat="server" ID="AllMealsMulti" />

Multiselect Combo

can add values not present in the select list

AjaxCheckboxListDemo.aspx

<% AllMealsMultiCombo.AjaxCheckboxList()
    .Multiselect(o => o.NoSelectClose().Combo())
    .DataFunc("aweUtils.getItems(meals)"); %>
<awe:Ocon runat="server" ID="AllMealsMultiCombo" />

awem.multiselb, used in grid columns selector mod

Multiselect, with custom css

Set value from get items call

setting selected items in the controller by returning AweItems instead of KeyContent[]

AjaxCheckboxListDemo.aspx

<% CategorySv.AjaxRadioList()
      .Odropdown(o => o.AutoSelectFirst())
      .DataFunc("aweUtils.getItems(categories)"); %>
<awe:Ocon runat="server" ID="CategorySv" />

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

Awesome/DataController.cs

public ActionResult GetMealsSetValue(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 = new[] { items.Skip(1).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

Toggle select all

AjaxCheckboxListDemo.aspx

<div class="ib">
    <button type="button" class="awe-btn" onclick="toggleChkl('<%=ChklCatAll.ClientID %>')">toggle select all</button>
    <br />
    <br />
    <% ChklCatAll.AjaxCheckboxList().DataFunc("aweUtils.getItems(categories)"); %>
    <awe:Ocon runat="server" ID="ChklCatAll" />
</div>
<div class="ib">
    <button type="button" class="awe-btn" onclick="toggleChkl('<%=ChklCatAll2.ClientID %>')">toggle select all</button>
    <br />
    <br />
    <% ChklCatAll2.AjaxCheckboxList().DataFunc("aweUtils.getItems(categories)").Ochk(); %>
    <awe:Ocon runat="server" ID="ChklCatAll2" />
</div>
<script>
    function toggleChkl(id) {
        $('#' + id).data('api').toggleSelectAll()
    }
</script>

Comments