Combobox

The Combobox can be used to select a value from the dropdown or to manually enter a string value. It has similar features to all other Awesome select editors.
It can get data from the server or from the client by setting DataFunc to a js function.

Basic usage

value:
Basic Combobox, get data for the select options from the server, it has an initial combo value, if it its value would match any of the option's Key property, the option's content would be displayed instead.
Combobox/Index.cshtml
@(Html.Awe().Combobox(new ComboboxOpt { 
Name = "AllMealsCombo",
Value = "combo value",
Url = Url.Action("GetAllMeals", "Data")
}))

Content value

value:
By default when selecting an item from the dropdown the item's Content will be set in the textbox, and the Key will be set as value in the component's hidden value input, we can set UseContentValue to use the item Content instead of the Key.
Combobox/Index.cshtml
@(Html.Awe().Combobox(new ComboboxOpt
{
Name = "ComboContentVal",
Url = Url.Action("GetMealsGroupedImg", "Data"),
UseContentValue = true
}.ImgItem()))

Combobox with remote search

value:

Only a few items + the selected one are loaded initially using the url specified in .Url, but when the user types something in the searchbox more items are loaded by executing the specified .SearchFunc; the new loaded items will be stored/cached until a load will occur, e.g. when a parent changes it's value the component will load.
Combobox/Index.cshtml
@{
ViewData["Title"] = "Combobox";
}
<div class="example">
<h2>Basic usage</h2>
@*begincx*@
@(Html.Awe().Combobox(new ComboboxOpt {
Name = "AllMealsCombo",
Value = "combo value",
Url = Url.Action("GetAllMeals", "Data")
}))
@*endcx*@
value: <span data-showval="AllMealsCombo"></span>
<div class="tabs">
<div data-caption="description" class="expl">
The Combobox can be used to select a value from the dropdown or manully enter the string value.
</div>
<div data-caption="view">
@Html.Source("Combobox/Index.cshtml", "cx")
</div>
</div>
</div>

<div class="example">
<h2>Content value</h2>
@*begincv*@
@(Html.Awe().Combobox(new ComboboxOpt
{
Name = "ComboContentVal",
Url = Url.Action("GetMealsGroupedImg", "Data"),
UseContentValue = true
}.ImgItem()))
@*endcv*@
value:
<span data-showval="ComboContentVal"></span>

<div class="tabs">
<div data-caption="description" class="expl">
By default when selecting an item from the dropdown the item's Content will be set in the textbox, and the Key will be set as value in the component's hidden value input,
we can set UseContentValue to use the item Content instead of the Key.
</div>
<div data-caption="view">
@Html.Source("Combobox/Index.cshtml", "cv")
</div>
</div>
</div>

<script>
// tags with data-showval="controlId" will display value of that control on change/ready
$(function () {
$('[data-showval]').each(function () {
var dspan = $(this);
var control = $('#' + dspan.data('showval'));

function setVal() {
dspan.html(control.val());
}

control.on('change', setVal);
setVal();
});
});
</script>
Awesome/DataController.cs
public IActionResult GetMealsInit(int? v)
{
var items = mcx.Meals.Take(3).ToList();
var selected = mcx.Meals.SingleOrDefault(o => o.Id == v);

if (selected != null && !items.Contains(selected))
{
items.Add(selected);
}

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

public async Task<IActionResult> SearchMeals(string term)
{
var items = (await mcx.Meals
.Filter(term, o => o.Name)
.Take(10)
.ToArrayAsync())
.Select(o => new KeyContent(o.Id, o.Name));

return Json(items);
}

Set value from the get data action

Value of the combobox can be set from the action that returns the data, so each time the combobox gets you can change its value. In this demo we're using this to select the 2nd item in the child dropdown when it loads. The child dropdown will load each time the value of the parent changes (cascade).
The same feature applies to other select editors (DropdownList, RadioButtonList, etc.).
Combobox/Index.cshtml
@{
ViewData["Title"] = "Combobox";
}
<div class="example">
<h2>Basic usage</h2>
@*begincx*@
@(Html.Awe().Combobox(new ComboboxOpt {
Name = "AllMealsCombo",
Value = "combo value",
Url = Url.Action("GetAllMeals", "Data")
}))
@*endcx*@
value: <span data-showval="AllMealsCombo"></span>
<div class="tabs">
<div data-caption="description" class="expl">
The Combobox can be used to select a value from the dropdown or manully enter the string value.
</div>
<div data-caption="view">
@Html.Source("Combobox/Index.cshtml", "cx")
</div>
</div>
</div>

<div class="example">
<h2>Content value</h2>
@*begincv*@
@(Html.Awe().Combobox(new ComboboxOpt
{
Name = "ComboContentVal",
Url = Url.Action("GetMealsGroupedImg", "Data"),
UseContentValue = true
}.ImgItem()))
@*endcv*@
value:
<span data-showval="ComboContentVal"></span>

<div class="tabs">
<div data-caption="description" class="expl">
By default when selecting an item from the dropdown the item's Content will be set in the textbox, and the Key will be set as value in the component's hidden value input,
we can set UseContentValue to use the item Content instead of the Key.
</div>
<div data-caption="view">
@Html.Source("Combobox/Index.cshtml", "cv")
</div>
</div>
</div>

<script>
// tags with data-showval="controlId" will display value of that control on change/ready
$(function () {
$('[data-showval]').each(function () {
var dspan = $(this);
var control = $('#' + dspan.data('showval'));

function setVal() {
dspan.html(control.val());
}

control.on('change', setVal);
setVal();
});
});
</script>
Awesome/DataController.cs
public IActionResult GetMealsSetValue2(int[] categories)
{
categories = categories ?? new int[] { };

var items = mcx.Meals.Where(o => categories.Contains(o.Category.Id)).ToList();

object value = null;
if (items.Any())
{
value = items.Skip(1).First().Id;
}

return Json(new AweItems
{
Items = items.Select(o => new KeyContent(o.Id, o.Name)),
Value = value
});
}



Comments