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

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.Multiselect(new MultiselectOpt
    {
        Url = Page.Url().Action("GetCategories", "Data")
    });  %>
<awe:Ocon runat="server" ID="CategoriesMulti" />

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

Multiselect Combo

can add values not present in the select list

AjaxCheckboxListDemo.aspx

<% AllMealsMultiCombo.Multiselect(new MultiselectOpt { 
    NoSelectClose = true,
    Combo = true,
    DataFunc = "aweUtils.getItems(meals)"
   }); %>
<awe:Ocon runat="server" ID="AllMealsMultiCombo" />

Set value from get items call

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

AjaxCheckboxListDemo.aspx

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

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