AjaxCheckboxList, multiselect and buttongroup controls - ASP.net Web-Forms Awesome Controls Demo

AjaxCheckboxList

It renders a list of checkboxes, needs an url, js func or controller to get data from.

Cascading CheckboxList using binding to parent

AjaxCheckboxListDemo.aspx

<h3>Cascading CheckboxList using binding to parent</h3>
<% 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

Mods

Extending the behaviour of the AjaxCheckboxList using mods. The new components have the same features as the AjaxCheckboxList but render (look) differently and have additional properties which can be specified inside the Extension Method (e.g. .Multiselect() )

Ochk

AjaxCheckboxListDemo.aspx

<% CategoriesOchk.AjaxCheckboxList()
    .Value(new[] { Db.Categories[0].Id, Db.Categories[1].Id })
    .Ochk()
    .Url(Page.Url().Action("GetCategories", "Data")); %>
<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("utils.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("utils.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("utils.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("utils.getItems(categories)").Ochk(); %>
    <awe:Ocon runat="server" ID="ChklCatAll2" />
</div>
<script>
    function toggleChkl(id) {
        var f = $('#' + id).parent();
        f.find(':checkbox').prop('checked', !f.find(':checkbox').first().prop('checked')).change();
    }
</script>

Comments