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"),
    OpenOnClickFocus = true,
    //SelectOnFocus = true
    //NoAutoFocus = true,
    //ShowComboItem = false
}))

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",
    Caption = "type or select",
    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

@(Html.Awe().Combobox(new ComboboxOpt
{
    Name = "RemoteSearchCombo",
    Url = Url.Action("GetMealsInit", "Data"),
    ClearBtn = true,
    Value = Db.Meals.First().Id
}
.RemoteSearch(Url.Action("SearchMeals", "Data"))))
value: <span data-showval="RemoteSearchCombo"></span>

Awesome/DataController.cs

public IActionResult GetMealsInit(int? v)
{
    var items = Db.Meals.Take(3).ToList();
    var selected = Db.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 IActionResult SearchMeals(string term)
{
    var items = (Db.Meals
        .AsQueryable()
        .Filter(term, o => o.Name)
        .Take(10)
        .ToArray())
        .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

@(Html.Awe().Combobox(new ComboboxOpt
{
    Name = "CategorySv",
    Url = Url.Action("GetCategories", "Data")
}))

@(Html.Awe().Combobox(new ComboboxOpt
{
    Name = "MealsSv",
    Url = Url.Action("GetMealsSetValue2", "Data")
}
.Parent("CategorySv", "categories")))

Awesome/DataController.cs

public IActionResult GetMealsSetValue2(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 = items.Skip(1).First().Id;
    }

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

Comments