Getting Started
To get started we recommend to have a look at our demo app, there is source code provided with each example so you can get an idea of how the awesome library work, you can also download its source code. You can also watch our main video tutorial and build a new app yourself while watching the video. Before creating a new solution using the awesome library make sure to have a look at the installation pageGeneral features
The awesome controls have some common functionality/features, you can see this functionality explained below.Getting data
Controls can get data via ajax whenUrlis specified, example:
@(Html.Awe().DropdownList(new DropdownListOptThe url will get the current value of the control in the
{
Name = "AllMealsDd",
Url = Url.Action("GetAllMeals", "Data")
}))
vparameter, so we can define it if it's needed:
public IActionResult GetAllMeals(int? v) // v has the current valueWe can also get data from a js function by specifying
{
var items = mcx.Meals.Select(o => new KeyContent(o.Id, o.Name));
return Json(items);
}
DataFuncproperty, example:
@(Html.Awe().DropdownList(new DropdownListOptThe
{
Name = "AllMealsDd",
DataFunc = "getMealsData"
}))
DataFuncjs function can either return a promise (return
$.ajax(...)) or a collection of KeyContent:
function getMealsData(params) {
var pobj = aweUtils.getParams(params); // pobj contains v, parents and parameters values
return awef.select(meals, function(item) {
return { c: item.Name, k: item.Id };
});
}
Binding to Parents, Cascade
Some controls can be bound to other controls called parents. When the control loads the request will get as parameters all the parent values, and also for some controls when a parent value changes the child will reload, so we get a cascading effect. We can also specify not to reload on change. By default the value of the parent will be sent using the"parent"name of the parameter, example:
@Html.TextBoxFor(o => o.Name)And now in
<input type="text" value="hi" id='foo123' />
@Html.Awe().Multiselect(new MultiselectOpt{ Name = "Categories", ... })
@(Html.Awe().DropdownList(new DropdownListOpt
{
Name = "MealsDropdown",
Url = Url.Action("GetMyMeals", "Data")
}
.Parent("Name") // parent Name with default alias (parameter name) "parent"
.Parent("foo123", "foo", false) // will use parameter name "foo", no reload on parent change
.Parent("Categories", "cats") // parent Categories with alias "cats"
))
GetMyMealsaction we're getting the values of the parent controls using the specified parameter names (alias).
public ActionResult GetMyMeals(string foo, int[] cats, string parent)
Predefined parameters
Additional parameters with predefined values can be attached to the data request.Parameter(name, value)or by setting
ParameterFuncexample:
@(Html.Awe().DropdownList(new DropdownListOptAnd the
{
Name = "MealsParamDd",
AutoSelectFirst = true,
Url = Url.Action("GetMealsParamsExample", "Data"),
ParameterFunc = "getFuncData"
}
.Parameter("categories", DemoCache.Categories[1].Id)))
<script>
function getFuncData() {
return { customItem: "my item from js func", categories: @DemoCache.Categories[2].Id };
}
</script>
GetMealsParamsExampleaction could look like this:
public IActionResult GetMealsParamsExample(int[] categories, string customItem)
Changing default settings
You can change the default values for the controls by calling something like this:Settings.Lookup.HighlightChange = true;Usually you would call this when the application starts (
Settings.MultiLookup.Fullscreen = true;
Startup.cs\
Global.asax Application_Start).
Localising default texts
See our localisation page.Getting and setting value
Just like native asp.net core controls, when the value is not specified, the awesome editor controls will get the value from theViewModelproperty with the same name or from
ViewData. To set the initial value we can set the
Valueproperty:
@(Html.Awe().TextBox(new TextBoxOpt { Name = "Editor1", Value = "the value" }))To get or set the value of an awesome editor in js you can call:
var val = $('#compId').val(); // get the valueTriggering change is necessary in order to tell the editor to render itself. In some cases, like for the textbox or the checkbox you can set the value and instead of triggering change you can call
$('#comp2Id').val(val).change(); // set the value
api.render():
$('#chk1').val(true).data('api').render()
Comments