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[] { DemoCache.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
{
Name = "MealsMultiImg",
Value = new[] { DemoCache.Meals[0].Id, DemoCache.Meals[2].Id, DemoCache.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 = mcx.Meals.Include(m => m.Category).OrderBy(m => m.Id).ToArray()
.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
@{
ViewData["Title"] = "AjaxRadioList";
var mealsDir = Url.Content(DemoUtils.MealsUrl);
}
<script>
var categories = @Html.Raw(DemoUtils.Encode(DemoCache.Categories.Select(o => new KeyContent(o.Id, o.Name))));
var meals = @Html.Raw(DemoUtils.Encode(DemoCache.Meals.Select(o => new { k = o.Id, c = o.Name, cid = o.CategoryId, 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>
<div style="min-height: 125px">
@*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>
<br />
<br />
@(Html.Awe().Tabs().Add("description",
@<text>
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
</text>, "expl")
.Add("view", Html.Source("AjaxRadioListDemo/Index.cshtml"))
.Add("controller", Html.Csource("Awesome/DataController.cs")))
</div>

<div class="example">
<h2>Client data</h2>
<div style="min-height: 110px">
@*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))
@*endcd*@
</div>
@(Html.Awe().Tabs().Add("description",
@<text>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</text>, "expl")
.Add("view", Html.Source("AjaxRadioListDemo/Index.cshtml", "cd")))
</div>

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

var res = new List<MealOitem>();
var meals = mcx.Meals.Include(m => m.Category).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.Name + ".jpg" })
});
}

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 = DemoCache.Meals[1];
var meal2 = DemoCache.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).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) ?
mcx.Meals.Where(o => o.Category == mcx.Categories.First()).ToArray() :
mcx.Meals.ToArray();

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



Comments