CheckboxList

The CheckboxList is used display a list of checkbox list items options. Various options can be configured to change its appearance, the way it gets data and other features like binding to other editors for a cascade effect.

Custom Item Render

CheckboxList can get data from an Url or a js function by setting DataFunc. The data returned must be a collection of KeyContent.
An additional parameter is sent to the Url/DataFunc using the Parameter extension.
Using a custom render function for the Item by setting ItemFunc property.

CheckboxList/Index.cshtml

@(Html.Awe().CheckBoxList(new CheckBoxListOpt
{
    Name = "Meals",
    Url = Url.Action("GetMealsImgByCateg", "Data"),
    ItemFunc = "site.imgItem"
}.Parameter("categories", Db.Categories[0].Id)))

Awesome/DataController.cs

public IActionResult GetMealsImgByCateg(int[] categories)
{
    var url = Url.Content(DemoUtils.MealsUrl);
    categories = categories ?? new int[] { };

    var items = Db.Meals.Where(o => categories.Contains(o.Category.Id))
        .Select(o => new MealDisplay(o.Id, o.Name, url + o.ImageName, o.Category.Id));

    return Json(items);
}

Cascade

CheckboxList/Index.cshtml

@(Html.Awe().RadioButtonList(new RadioButtonListOpt
{
    Name = "CatDd",
    Url = Url.Action("GetCategories", "Data"),
    Value = Db.Categories[2].Id
}))

@(Html.Awe().CheckBoxList(new CheckBoxListOpt
{
    Name = "MealsDd",
    AutoSelectFirst = true,
    Url = Url.Action("GetMeals", "Data")
}.Parent("CatDd", "categories")))

Awesome/DataController.cs

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

Select all option

Setting SelectAll option to get a checkbox that will toggle select/unselect all items

CheckboxList/Index.cshtml

@(Html.Awe().CheckBoxList(new CheckBoxListOpt 
{ 
    Name = "SelectAllOptChkl", 
    Url = Url.Action("GetCategories", "Data"), 
    SelectAll = true 
}))

Toggle select all using api

Using the checkboxlist api to call toggleSelectAll method to select/unselect all items

CheckboxList/Index.cshtml

<div class="ib">
    <button type="button" class="awe-btn" onclick="toggleChkl('chklCatAll')">toggle select all</button>
    <br />
    <br />
    @(Html.Awe().CheckBoxList(new CheckBoxListOpt { Name = "chklCatAll", Url = Url.Action("GetCategories", "Data") }))
</div>
<script>
    function toggleChkl(id) {
        $('#chklCatAll').data('api').toggleSelectAll();
    }
</script>

Set value from get items call

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

CheckboxList/Index.cshtml

@(Html.Awe().DropdownList(
    new DropdownListOpt
{
    Name = "CategorySv",
    AutoSelectFirst = true,
    Url = Url.Action("GetCategories", "Data")
}))

@(Html.Awe().CheckBoxList(
    new CheckBoxListOpt
{
    Name = "MealsSv",
    Url = Url.Action("GetMealsSetValue", "Data")
}
.Parent("CategorySv", "categories")
))

Awesome/DataController.cs

public IActionResult 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())
    {
        // set value to meal[1].Id
        value = new[] { items.Skip(1).First().Id };
    }

    return Json(new AweItems
    {
        Items = items.Select(o => new KeyContent(o.Id, o.Name)),
        Value = value
    });
}

Comments