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.

Cascade 

show code
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")))

Select all option 

Setting SelectAll option to get a checkbox that will toggle select/unselect all items
show code
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


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



Comments