I have a gird with a toolbar template where I have a pair of cascading drop down lists and an add new button.
The 1st one is Category and the 2nd is Sub Category which Cascades from Category...
01.
.ToolBar(toolbar => { toolbar.Template(
02.
@<
text
>
03.
@(Html.Kendo().DropDownList()
04.
.Name("ddlCategory")
05.
.DataTextField("Text")
06.
.DataValueField("Value")
07.
.OptionLabel("Select a Category...")
08.
.HtmlAttributes(new { style = "width: 250px;" })
09.
.DataSource(source => {
10.
source.Read(read => { read.Action("Categories_Read", "Categories"); });
11.
})
12.
)
13.
@(Html.Kendo().DropDownList()
14.
.Name("ddlSubCategory")
15.
.DataTextField("Text")
16.
.DataValueField("Value")
17.
.OptionLabel("Select a Sub Category...")
18.
.HtmlAttributes(new { style = "width: 250px;" })
19.
.DataSource(source => {
20.
source.Read(read => { read.Action("SubCategories_Read", "Categories").Data("filterSubCategories"); }).ServerFiltering(true);
21.
})
22.
.AutoBind(false).Enable(false).CascadeFrom("ddlCategory")
23.
)
24.
<
a
class
=
"k-button k-button-icontext k-grid-add"
href
=
"#"
><
span
class
=
"k-icon k-i-add"
></
span
>Add New Contract Item</
a
>
25.
</
text
>); })
I've set up the datasource model as follows:
1.
.Model(model =>
2.
{
3.
model.Id(p => p.ContractItemID);
4.
model.Field(p => p.Category).DefaultValue("Category");
5.
model.Field(p => p.SubCategory).DefaultValue("Sub Category");
6.
})
I'm also grouping on Category and SubCategory and I have created a function for the edit event:
1.
.Group(groups => { groups.Add(p => p.Category); groups.Add(p => p.SubCategory); } )
2.
.PageSize(20))
3.
.Events(e => e.Edit("getCategoryVals"))
The two issues I'm running into is this:
First, I've followed documentation and demos from multiple locations, and I cannot grab the text from the drop down... I'm using the following code... but on line 06 the script fails with an error that .text is not defined.
01.
function getCategoryVals(e) {
02.
03.
var ddlCategory = $('#ddlCategory');
04.
var ddlSubCategory = $('#ddlSubCategory');
05.
06.
var tsCategory = ddlCategory.data('kendoComboBox').text();
07.
var tsSubCategory = ddlSubCategory.data('kendoComboBox').text();
08.
09.
e.model.set("Category", tsCategory);
10.
e.model.set("SubCategory", tsSubCategory);
11.
}
And Second... If I hard code tsCategory and tsSubCategory, it updates the model and the fields in the new row reflect the new values, BUT the grouping label still shows Category and Sub Category instead of the actual value... I want these fields to be hidden....
Do I have to manually update the grouping labels using jquery or is there a better way to do this?