AjaxCheckboxList

Cascading CheckboxList using binding to parent

The AjaxCheckboxList renders a list of checkboxes, needs an url, js func or controller defined to get data from.
It can be bound to parent controls.

AjaxCheckboxListDemo/Index.cshtml

<h2>Cascading CheckboxList using binding to parent</h2>
@(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 IActionResult GetCategories()
{
    return Json(Db.Categories.Select(o => new KeyContent(o.Id, o.Name)));
}

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

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 multiselect, NoSelectClose() set on the child, selected values can be reordered by dragging them

AjaxCheckboxListDemo/Index.cshtml

@(Html.Awe().AjaxCheckboxList("CategoriesMulti")
    .Multiselect()
    .Value(new []{ Db.Categories[0].Id })
    .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})
    .CssClass("bigMulti")
    .Multiselect(o => o.ItemFunc("site.imgItem").CaptionFunc("utils.imgCaption").NoSelectClose())
    .Url(Url.Action("GetMealsImg", "Data")))

Awesome/DataController.cs

public IActionResult GetMealsImg()
{
    var url = Url.Content(DemoUtils.MealsUrl);
    var items = Db.Meals
        .Select(o => new MealDisplay(o.Id, o.Name, url + o.Name + ".jpg", o.Category.Id));

    return Json(items);
}

Multichk

AjaxCheckboxListDemo/Index.cshtml

@(Html.Awe().AjaxCheckboxList("MealsMultiChk")
    .Value(new [] { Db.Meals[0].Id, Db.Meals[2].Id, Db.Meals[14].Id})
    .Url(Url.Action("GetMealsImg", "Data"))
    .Multichk(o => o.ItemFunc("site.imgItem")
        .NoSelectClose()
        .ClearBtn()))

Awesome/DataController.cs

public IActionResult GetMealsImg()
{
    var url = Url.Content(DemoUtils.MealsUrl);
    var items = Db.Meals
        .Select(o => new MealDisplay(o.Id, o.Name, url + o.Name + ".jpg", o.Category.Id));

    return Json(items);
}

Multiselect with submenu

AjaxRadioListDemo/Index.cshtml

@model AweCoreDemo.ViewModels.Input.AjaxDropdownDemoInput
@using AweCoreDemo.Models
@{
    ViewBag.Title = "AjaxRadioList, Cascading RadioButtonList ";
    var mealsDir = Url.Content(DemoUtils.MealsUrl);
}
<h1>AjaxRadioList</h1>

<script>
    var categories = @Html.Raw(DemoUtils.Encode(Db.Categories.Select(o => new KeyContent(o.Id, o.Name))));
    var meals = @Html.Raw(DemoUtils.Encode(Db.Meals.Select(o => new { k = o.Id, c = o.Name, cid = o.Category.Id, url = mealsDir + o.Name + ".jpg" })));

    function getMealsChild(params) {
        var pobj = utils.getParams(params);
        var result = [];

        awef.loop(meals, function(item) {
            if(item.cid == pobj.categories)
                result.push(item);
        });

        return result;
    }
</script>

<div class="example med">
    <h2 data-name="cascade">Cascading Radio button list using binding to Parent</h2>
    @*begin*@
    @(Html.Awe().AjaxRadioListFor(o => o.ParentCategory)
                 .Url(Url.Action("GetCategories", "Data")))
    @(Html.Awe().AjaxRadioListFor(o => o.ChildMeal)
                    .Url(Url.Action("GetMeals", "Data"))
                    .Parent(o => o.ParentCategory, "categories"))
    @*end*@
    <div class="tabs">
        <div data-caption="description" class="expl">
            AjaxRadioList needs an url, js func or controller to get data from, it will render a list of radiobuttons<br/>
            As with most awesome controls, you can bind the AjaxRadioList to one or more parents,
            and when the parent changes value the child will load and get the parent values as parameters in its data function
        </div>
        <div data-caption="view">@Html.Source("AjaxRadioListDemo/Index.cshtml")</div>
        <div data-caption="controller">@Html.Csource("Awesome/DataController.cs")</div>
    </div>
</div>

<div class="example">
    <h2>Client data</h2>
    @*begincd*@
    <script>
        function getClientData() {
            return [{ k: 1, c: 'Fruits' }, { k: 2, c: 'Vegetables' }, { k: 3, c: 'Nuts' }];
        }
    </script>
    @(Html.Awe().AjaxRadioList("CatClient1")
        .DataFunc("getClientData")
        .Value(2)
        .Ochk())
    @*endcd*@

    <div class="tabs">
        <div data-caption="description" class="expl">
            Besides remote data using <code>.Url(str)</code>, it can also get data from the client using <code>.DataFunc(jsFunc)</code>, the jsFunc can return the items or a Promise
        </div>
        <div data-caption="view">@Html.Source("AjaxRadioListDemo/Index.cshtml", "cd")</div>
    </div>
</div>

<div class="example">
    <h2>Ochk</h2>
    @*beginochk*@
    <div class="ib arl">
        @(Html.Awe().AjaxRadioList("ParentCatOchk")
            .Value(Db.Categories[2].Id)
            .Ochk()
            .Url(Url.Action("GetCategories", "Data")))
    </div>
    <div class="ib arl">
        @(Html.Awe().AjaxRadioList("ChildMealOchk")
            .DataFunc("getMealsChild")
            .Ochk(o => o.ItemFunc("site.imgItem"))
            .Value(new[] { 185, 187 })
            .Parent("ParentCatOchk", "categories"))
    </div>
    @*endochk*@
    @Html.Source("AjaxRadioListDemo/Index.cshtml", "ochk", true)
</div>

<div class="example">
    <h2>ButtonGroup</h2>
    @*beginbg*@
    @(Html.Awe().AjaxRadioList("CategoriesButtonGroup")
          .ButtonGroup()
          .Url(Url.Action("GetCategories", "Data")))
    @*endbg*@
    @Html.Source("AjaxRadioListDemo/Index.cshtml", "bg", true)
</div>



<div class="example">
    <h2>Combobox</h2>
    @*begincx*@
    @(Html.Awe().AjaxRadioList("AllMealsCombo")
          .Value("combo value")
          .Combobox()
          .Url(Url.Action("GetMealsImg", "Data")))
    @*endcx*@
    @Html.Source("AjaxRadioListDemo/Index.cshtml", "cx")
</div>

<div class="example">
    <h2>Color dropdown</h2>
    @*begincld*@
    @(Html.Awe().AjaxRadioList("ColorPicker1")
          .ColorDropdown(o => o.AutoSelectFirst()))
    @*endcld*@
    @Html.Source("AjaxRadioListDemo/Index.cshtml", "cld")
</div>

<div class="example">
    <h2>TimePicker</h2>
    @*begintm*@
    @(Html.Awe().AjaxRadioList("TimePicker1")
        .TimePicker(o => o.Caption("time please").Step(15).ClearBtn()))
    @*endtm*@
    @Html.Source("AjaxRadioListDemo/Index.cshtml", "tm")
</div>

<div class="example">
    @*beginsv*@
    <h2>Set value from get items call</h2>
    @(Html.Awe().AjaxRadioList("CategorySv")
        .Odropdown(o => o.AutoSelectFirst())
        .Url(Url.Action("GetCategories", "Data")))
    @(Html.Awe().AjaxRadioList("MealsSv")
        .Ochk()
        .Parent("CategorySv", "categories")
        .Url(Url.Action("GetMealsSetValue2", "Data")))

    <div class="expl">
        Note how in the second editor the second item is selected on load.
    </div>
    @*endsv*@

    @(Html.Awe().Tabs()
        .CssClass("code")
        .Add("view", Html.Source("Odropdown/Index.cshtml", "sv"))
        .Add("controller", Html.Csource("Awesome/DataController.cs", "sv")))
</div>

<div class="example">
    <h2>Using predefined parameters</h2>
    @{
        var cat1 = Db.Categories[0];
        var cat2 = Db.Categories[1];
    }
    setting parameter parent = { @cat1.Name, @cat2.Name } using .Parameter and .ParameterFunc extensions<br />
    @(Html.Awe().AjaxRadioListFor(o => o.Meal1)
          .Odropdown()
          .Parameter("categories", cat1.Id)
          .ParameterFunc("giveParams")
          .Url(Url.Action("GetMeals", "Data")))
    <script>
        function giveParams() {
            return { categories: @(cat2.Id) };
        }
    </script>
</div>


<div class="example">
    <h2>Events and Api</h2>
    @*beginapi*@
    @{
        var meal1 = Db.Meals[3];
        var meal2 = Db.Meals[4];
    }

    @(Html.Awe().AjaxRadioList("ddApi")
          .Odropdown()
          .Url(Url.Action("ApiGetMeals", "Data")))

    <br />
    <br />
    @Html.Awe().Button().Text("Change value to " + meal1.Name).OnClick("app1.changeval(" + meal1.Id + ")")
    @Html.Awe().Button().Text("Change value to " + meal2.Name).OnClick("app1.changeval(" + meal2.Id + ")")
    @Html.Awe().Button().Text("Get value").OnClick("app1.getVal()")
    @Html.Awe().Button().Text("Clear Value").OnClick("app1.changeval('')")

    @Html.Awe().Button().Text("Load only first category").OnClick("app1.loadFirstCat()")
    @Html.Awe().Button().Text("Reload").OnClick("app1.reload()")
    @Html.Awe().Button().Text("Toggle Enable").OnClick("app1.toggleEnable()")

    <br />
    <br />

    <div id="log">
    </div>

    <script>
        var app1;

        $(function () {
            var dd = $('#ddApi');
            var api = dd.data('api');
            app1 = {
                getVal: function () {
                    var val = dd.val();
                    $('#log').html('val = ' + val);
                },

                changeval: function (newVal) {
                    dd.val(newVal).change();
                },

                reload: function () {
                    api.load();
                },

                loadFirstCat: function () {
                    api.load({ oparams: { cat1: true } });
                    // oparams sets cat1 just for this call (same as for the grid api)
                    // params sets persistent parameters
                },

                toggleEnable: function () {
                    api.enable(!dd.data('o').enb);
                }
            };

            dd.on('aweload', function (e, data) {
                awe.flash($('#log').html('loaded ' + data.length + ' items'));
            });
        });
    </script>
    @*endapi*@
    <br />
    <div class="tabs">
        <div data-caption="description" class="expl">
            Showing commonly used client side api methods.<br />
            To change the value you simply call jquery <code>.val(newvalue).change()</code>.<br />

            <code>aweload</code> event is handled to flash the #log div whenever the dropdown loads.<br />
            The same api methods can be used for the AjaxDropdown, AjaxCheckboxList controls and their mods.
        </div>
        <div data-caption="view">@Html.Source("AjaxRadioListDemo/Index.cshtml", "api")</div>
        <div data-caption="controller">@Html.Code("Awesome/DataController.cs").Action("ApiGetMeals")</div>
    </div>
</div>

Awesome/DataController.cs

public IActionResult GetMealsTreeImg()
{
    var url = Url.Content(DemoUtils.MealsUrl);

    var res = new List<MealOitem>();
    var groups = Db.Meals.GroupBy(o => o.Category);
    foreach (var g in groups)
    {
        res.Add(new MealOitem
        {
            Content = g.Key.Name,
            Class = "o-itm",
            NonVal = true,
            Items = g.Select(meal => new MealOitem { Key = meal.Id, Content = meal.Name, url = url + meal.Name + ".jpg" })
        });
    }

    return Json(res);
}

Multiselect Combo

can add values not present in the select list

AjaxCheckboxListDemo/Index.cshtml

@(Html.Awe().AjaxCheckboxList("AllMealsMultiCombo")
    .Multiselect(o => o.NoSelectClose().Combo())
    .Url(Url.Action("GetMealsImg", "Data")))

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 populate the other one with data as well.

Shared/Demos/RmtSrcGit.cshtml

@(Html.Awe().AjaxRadioList("GitRepoOdropdown")
          .Load(false)
          .Odropdown(o =>
            o.SearchFunc("site.gitRepoSearch", key: "g1")
             .ItemFunc("site.gitItem")
             .CaptionFunc("site.gitCaption")
             .Caption("select a git repo")))
<span class="hint">try 'valueinjecter'</span>
<br/>
<br/>
@(Html.Awe().AjaxCheckboxList("GitRepoMultiselect")
          .Load(false)
          .Multiselect(o =>
            o.SearchFunc("site.gitRepoSearch", key: "g1")
            .ItemFunc("site.gitItem")
            .CaptionFunc("site.gitCaption")
            .Caption("select a git repo")))

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())
        .Url(Url.Action("GetCategories", "Data")))

@(Html.Awe().AjaxCheckboxList("MealsSv")
        .Parent("CategorySv", "categories")
        .Url(Url.Action("GetMealsSetValue", "Data"))
        .Ochk())

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())
    {
        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

Showing commonly used client side api methods.
To change the value you simply call jquery .val(newvalue).change().
aweload event is handled to flash the #log div whenever the dropdown loads.
The same api methods can be used for the AjaxDropdown, AjaxRadioList controls and their mods.

AjaxDropdownDemo/Index.cshtml

@{
    var meal1 = Db.Meals[1];
    var meal2 = Db.Meals[2];
}

@(Html.Awe().AjaxDropdown("ddApi")
      .Url(Url.Action("ApiGetMeals", "Data")))

<br />
<br />
@Html.Awe().Button().Text("Change value to " + meal1.Name).OnClick("app1.changeval(" + meal1.Id + ")")
@Html.Awe().Button().Text("Change value to " + meal2.Name).OnClick("app1.changeval(" + meal2.Id + ")")

@Html.Awe().Button().Text("Load only first category").OnClick("app1.loadFirstCat()")
@Html.Awe().Button().Text("Reload").OnClick("app1.reload()")
@Html.Awe().Button().Text("Toggle Enable").OnClick("app1.toggleEnable()")

<br />
<br />

<div id="log">
</div>

<script>
    var app1;

    $(function() {
        var dd = $('#ddApi');
        var o = dd.data('o');
        var api = o.api;

        app1 = {
            changeval: function (newVal) {
                dd.val(newVal).change();
            },
            reload: function () {
                api.load();
            },
            loadFirstCat: function () {
                api.load({ oparams: { cat1: true }});
                // oparams sets cat1 just for this call
                // params sets persistent parameters
            },
            toggleEnable: function () {
                api.enable(!o.enb);
            }
        };

        dd.on('aweload', function(e, data) {
            awe.flash($('#log').html('loaded ' + data.length  + ' items'));
        });
    });
</script>

Awesome/DataController.cs

public IActionResult ApiGetMeals(int? v, bool? cat1)
{
    var items = Db.Meals;

    if (cat1.HasValue && cat1.Value)
    {
        items = items.Where(o => o.Category == Db.Categories[0]).ToList();
    }

    return Json(items.Select(o => new KeyContent(o.Id, o.Name)));
}

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").Url(Url.Action("GetCategories", "Data")))
</div>
<div class="ib">
    <button type="button" class="awe-btn" onclick="toggleChkl('chklCatAll2')">toggle select all</button>
    <br />
    <br />
    @(Html.Awe().AjaxCheckboxList("chklCatAll2").Url(Url.Action("GetCategories", "Data")).Ochk())
</div>
<script>
    function toggleChkl(id) {
        var f = $('#' + id).parent();
        f.find(':checkbox').prop('checked', !f.find(':checkbox').first().prop('checked')).change();
    }
</script>

Comments