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/Index.cshtml
<h3>Cascading CheckboxList using binding to parent</h3>
@(Html.Awe().AjaxCheckboxListFor(o => o.ParentCategory)
                            .Url(Url.Action("GetCategories", "Data")))

@(Html.Awe().AjaxCheckboxListFor(o => o.ChildMeals)
                            .Parent(o => o.ParentCategory, "categories")
                            .Url(Url.Action("GetMeals", "Data")))
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/Index.cshtml
@(Html.Awe().AjaxCheckboxList("CategoriesOchk")
      .Value(new [] { Db.Categories[0].Id, Db.Categories[1].Id })
      .Ochk()
      .Url(Url.Action("GetCategories", "Data")))

ButtonGroup

AjaxCheckboxListDemo/Index.cshtml
@(Html.Awe().AjaxCheckboxList("CategoriesButtonGroup")
      .ButtonGroup()
      .Url(Url.Action("GetCategories", "Data")))

Multiselect



Parent and Child with NoSelectClose(), values can be reordered by dragging them
AjaxCheckboxListDemo/Index.cshtml
@(Html.Awe().AjaxCheckboxList("CategoriesMulti")
      .Multiselect()
      .Url(Url.Action("GetCategories", "Data")))

@(Html.Awe().AjaxCheckboxList("AllMealsMulti")
      .Multiselect(o => o.NoSelectClose())
      .Parent("CategoriesMulti", "categories")
      .Url(Url.Action("GetMeals", "Data")))

Multiselect with custom item



defining custom rendering functions for the dropdown list item and selected caption
AjaxCheckboxListDemo/Index.cshtml
@(Html.Awe().AjaxCheckboxList("MealsMultiImg")
      .Value(new [] { Db.Meals[0].Id, Db.Meals[2].Id, Db.Meals[14].Id})
      .Multiselect(o => o.ItemFunc("awem.imgItem").CaptionFunc("multiImgCaption").NoSelectClose())
      .Url(Url.Action("GetMealsImg", "Data")))

<script>
    function multiImgCaption(o) {
        return '<img class="cthumb" src="' + o.url + '" />' + o.c;
    }
</script>
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/Index.cshtml
@(Html.Awe().AjaxCheckboxList("AllMealsMultiCombo")
      .Multiselect(o => o.NoSelectClose().Combo())
      .DataFunc("utils.getItems(meals)"))
awem.multiselb, used in grid columns selector mod

Multiselect, with custom css

Remote search, external api

try 'valueinjecter'



Getting data from the git api on search using the SearchFunc. ItemFunc and CaptionFunc are used to specify custom rendering functions for the items and the caption.
Using the same cache key "g1", so searching in one control will fill the other as well.
Shared/Demos/RmtSrcGit.cshtml
@(Html.Awe().AjaxRadioList("GitRepoOdropdown")
          .Load(false)
          .Odropdown(o =>
            o.SearchFunc("gitRepoSearch", key: "g1")
             .ItemFunc("gitItem")
             .CaptionFunc("gitCaption")
             .Caption("select a git repo")))
<span class="hint">try 'valueinjecter'</span>
<br/>
<br/>
@(Html.Awe().AjaxCheckboxList("GitRepoMultiselect")
          .Load(false)
          .Multiselect(o =>
            o.SearchFunc("gitRepoSearch", key: "g1")
            .ItemFunc("gitItem")
            .CaptionFunc("gitCaption")
            .Caption("select a git repo")))

@*gitRepoSearch, gitItem, gitCaption functions located in site.js*@

Set value from get items call



setting selected items in the controller by returning AweItems instead of KeyContent[]
AjaxCheckboxListDemo/Index.cshtml
@(Html.Awe().AjaxRadioList("CategorySv")
        .Odropdown(o => o.AutoSelectFirst())
        .DataFunc("utils.getItems(categories)"))

@(Html.Awe().AjaxCheckboxList("MealsSv")
        .Parent("CategorySv", "categories")
        .Url(Url.Action("GetMealsSetValue", "Data")))
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

Events and Api




Toggle select all





AjaxCheckboxListDemo/Index.cshtml
<div class="ib">
    <button type="button" class="awe-btn" onclick="toggleChkl('chklCatAll')">toggle select all</button>
    <br />
    <br />
    @(Html.Awe().AjaxCheckboxList("chklCatAll").DataFunc("utils.getItems(categories)"))
</div>
<div class="ib">
    <button type="button" class="awe-btn" onclick="toggleChkl('chklCatAll2')">toggle select all</button>
    <br />
    <br />
    @(Html.Awe().AjaxCheckboxList("chklCatAll2").DataFunc("utils.getItems(categories)").Ochk())
</div>
<script>
    function toggleChkl(id) {
        var f = $('#' + id).parent();
        f.find(':checkbox').prop('checked', !f.find(':checkbox').first().prop('checked')).change();
    }
</script>



Comments