DropdownList

Basic usage 



DropdownList with search functionality in the dropdown popup. Can get data from an Url which must return a collection of KeyContent.

Cascade 

show code
Binding controls using Parent extension, one control can be bound to multiple others, works for all editor helpers.

DropdownList with grouped items 



show code
DropdownList/Index.cshtml

@(Html.Awe().DropdownList(new DropdownListOpt { Name = "MealsGrouped", Url = Url.Action("GetAllMealsGrouped", "Data") }))

Custom filter function 



DropdownList with a custom filter function. The function will receive the query as parameter and must return a filter(content) function.
In this example we could search for "Nolan Bruce" or "Bruce Nolan" (we could also search for "no br"), and we would get the same result with both queries, because we are filtering by each word separately.
Using the default filtering the first query wouldn't return any results.

Tree DropdownList 



show code
DropdownList/Index.cshtml
    @(Html.Awe().DropdownList(new DropdownListOpt
{
Name = "TreeDropdown1",
Url = Url.Action("GetMealsTreeImg", "Data"),
CollapseNodes = true,
PopupMinWidth = 350,
ClearBtn = true
}.ImgItem()))

DropdownList with submenu 



show code
DropdownList/Index.cshtml
@(Html.Awe().DropdownList(new DropdownListOpt
{
Name = "MealsSbm",
Url = Url.Action("GetMealsTreeImg", "Data"),
Submenu = true
}.ImgItem()))

DropdownList with fav buttons 





show code
DropdownList/Index.cshtml
@(Html.Awe().DropdownList(new DropdownListOpt
{
Name = "AllMealsFav",
Url = Url.Action("GetMealsImg", "Data"),
CssClass = "bigFavs"
}
.ImgItem()
.Favs()))
<br />
<br />
@(Html.Awe().DropdownList(new DropdownListOpt
{
Name = "AllMealsFav2",
Url = Url.Action("GetMealsImg", "Data"),
CssClass = "bigFavs"
}
.ImgItem()
.Favs(3, new object[] { Db.Meals[3].Id, Db.Meals[15].Id }, new object[] { Db.Meals[5].Id })))

DropdownList, tree data, lazy nodes, remote search 



show code
DropdownList/Index.cshtml
@(Html.Awe().DropdownList(new DropdownListOpt
{
Name = "RmtLazyTree",
Url = Url.Action("GetTreeNodesLazy", "Data"),
ClearBtn = true,
CollapseNodes = true,
PopupMinWidth = 350,
}
.RemoteSearch(Url.Action("SearchTree", "Data"))))

DropdownList with remote search 



show code
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.

DropdownList with custom item and caption rendering 



show code
Custom js functions are defined for rendering the items and caption of the DropdownList.

Remote search, external api 



please select


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.

Events and Api 





loaded 25 items

show code
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, AjaxCheckboxList controls and their mods.

Predefined parameters 

Setting a predefined parameters with values for the data request. We can also set ParameterFunc to a js function that will return an object with parameters. Parameters with the same name will merge into a collection.

Binding to parents 

parent txt:
categories:
please select
We can bind to one or multiple parents, by specifying the client parent control id and parameter name to be attached to the child's data request.
We could do that using the Parent(parentId, paramName = "parent", loadOnChange = true) extension.
Note: all awesome data select editors and the Grid, AjaxList can have parents and predefined parameters.



Comments