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 page

General features

The awesome controls have some common functionality/features, you can see this functionality explained below.

Getting data

Controls can get data via ajax when
Url
is specified, example:
@(Html.Awe().DropdownList(new DropdownListOpt 
{
    Name = "AllMealsDd",
    Url = Url.Action("GetAllMeals", "Data")
}))
The url will get the current value of the control in the
v
parameter, so we can define it if it's needed:
public IActionResult GetAllMeals(int? v) // v has the current value
{
    var items = mcx.Meals.Select(o => new KeyContent(o.Id, o.Name));
    return Json(items);
}
We can also get data from a js function by specifying
DataFunc
property, example:
@(Html.Awe().DropdownList(new DropdownListOpt 
{
    Name = "AllMealsDd",
    DataFunc = "getMealsData"
}))
The
DataFunc
js 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)
<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"
))
And now in
GetMyMeals
action 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
ParameterFunc
example:
@(Html.Awe().DropdownList(new DropdownListOpt
{
    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>
And the
GetMealsParamsExample
action 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;
Settings.MultiLookup.Fullscreen = true;
Usually you would call this when the application starts (
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 the
ViewModel
property with the same name or from
ViewData
. To set the initial value we can set the
Value
property:
@(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 value
$('#comp2Id').val(val).change(); // set the value
Triggering 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
api.render()
:
$('#chk1').val(true).data('api').render()



Comments
By accessing this site, you agree to store cookies on your device and disclose information in accordance with our cookie policy and privacy policy .