Multiselect

Cascade

Parent and Child multiselect, NoSelectClose() set on the child, selected values can be reordered by dragging them

Multiselect/Index.cshtml

@(Html.Awe().Multiselect(new MultiselectOpt
{
    Name = "CategoriesMulti",
    Value = new[] { Db.Categories[0].Id },
    Url = Url.Action("GetCategories", "Data"),
    ClearBtn = true
}))

@(Html.Awe().Multiselect(new MultiselectOpt
{
    Name = "AllMealsMulti",
    Url = Url.Action("GetMeals", "Data"),
    NoSelectClose = true
}
.Parent("CategoriesMulti", "categories")))

Multiselect with custom item

Defining custom rendering functions for the dropdown list item and selected caption

Multiselect/Index.cshtml

@(Html.Awe().Multiselect(new MultiselectOpt
{
    Value = new[] { Db.Meals[0].Id, Db.Meals[2].Id, Db.Meals[14].Id },
    Url = Url.Action("GetMealsImg", "Data"),
    CssClass = "bigMulti",
    NoSelectClose = true
}
.ImgItem()))

Awesome/DataController.cs

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

    return Json(items);
}

Multiselect with submenu

Multiselect/Index.cshtml

@(Html.Awe().Multiselect(new MultiselectOpt
{        
    Url = Url.Action("GetMealsTreeImg", "Data"),
    Submenu = true
}.ImgItem()))

Awesome/DataController.cs

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

    var res = new List<MealOitem>();
    var meals = Db.Meals.ToArray();
    var groups = 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.ImageName })
        });
    }

    return Json(res);
}

Multiselect Combo

can add values not present in the select list

Multiselect/Index.cshtml

@(Html.Awe().Multiselect(new MultiselectOpt
{
    Name = "AllMealsMultiCombo",
    Url = Url.Action("GetMealsImg", "Data"),
    NoSelectClose = true,
    Combo = true
}))

Multiselect, with custom css

Events and Api

Showing commonly used client side api methods.
To change the value you simply call jquery .val(newvalue).trigger('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>

@section scripts
{
<script>
    var app1;

    $(function () {
        var dd = $('#ddApi');

        var o = dd.data('o');
        var api = o.api;

        app1 = {
            changeval: function (newVal) {
                dd.val(newVal).trigger('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 = (cat1 == true) ?
        Db.Meals.Where(o => o.Category == Db.Categories.First()).ToArray() :
        Db.Meals.ToArray();

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

Comments