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[]
AjaxCheckboxListDemo.aspx
<% CategorySv.AjaxRadioList()
.Odropdown(o => o.AutoSelectFirst())
.DataFunc("utils.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 Json(new AweItems
{
Items = items.Select(o => new KeyContent(o.Id, o.Name)),
Value = value
});
}
Using predefined parameters
setting parameter parent = { Fruits, Legumes } using .Parameter and .ParameterFunc extensions
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