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" />

ButtonGroup

AjaxCheckboxListDemo.aspx

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

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 with custom item

defining custom rendering functions for the dropdown list item and selected caption

AjaxCheckboxListDemo.aspx

<% MealsMultiImg.AjaxCheckboxList()
    .Value(new[] { Db.Meals[0].Id, Db.Meals[2].Id, Db.Meals[14].Id })
    .Multiselect(o => o.ItemFunc("site.imgItem").CaptionFunc("aweUtils.imgCaption").NoSelectClose())
    .Url(Page.Url().Action("GetMealsImg", "Data")); %>
<awe:Ocon runat="server" ID="MealsMultiImg" />

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);
}

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[]

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