This is a migrated thread and some comments may be shown as answers.

Model Defaults on Grouped Columns

3 Answers 17 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Patrick
Top achievements
Rank 1
Patrick asked on 01 Feb 2018, 03:29 PM

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?

 

 

3 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 05 Feb 2018, 07:37 AM
Hello, Patrick,

Thank you for the provided code.

Regarding the issues:

1) The ComboBox text is undefined. - The provided code is the correct way to retrieve the text of the ComboBox. I can suggest placing a debugger or console logging the following values to ensure that the widget is correctly retrieved. If some of the elements are undefined, please ensure that the element is available:

function getCategoryVals(e) {
 
  var ddlCategory = $('#ddlCategory');
  var ddlSubCategory = $('#ddlSubCategory');
  console.log(ddlCategory)
 
  var tsCategory = ddlCategory.data('kendoComboBox').text();
  var tsSubCategory = ddlSubCategory.data('kendoComboBox').text();
  console.log(tsCategory)
 
  e.model.set("Category", tsCategory);
  e.model.set("SubCategory", tsSubCategory);
}

I used a similar approach and the text was retrieved:

https://dojo.telerik.com/AZaVe

2) Grouping labels, I can assume that this occurs because the values are still not saved on the server and the Grid will not dynamically change the labels only when the values are changed, but not saved. In this case, indeed the values of the DOM elements showing the label has to be changed with jQuery in order to dynamically reflect the changes. The elements holding the text is with class "k-reset" which can help selecting the correct element.

Let me know if you need additional assistance on this matter.

Regards,
Stefan
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Patrick
Top achievements
Rank 1
answered on 05 Feb 2018, 01:00 PM

Thanks for the response.  Still in the learning phase so any additional information helps.

In regards to #1.  Yeah I'm at a loss... the element is coming back as null.... BUT... I was able to get the text with the following code:

1.var tsCategory = $('#ddlCategory').parent().find('.k-input').text();
2.var tsSubCategory = $('#ddlSubCategory').parent().find('.k-input').text(

I'm going to go back to this in the next day or so to see if I can get the standard to work.

As for the group labels, that is what I assumed....  I was able to to set the labels to the values associated with the drop downs using the following code.

01.function getCategoryVals(e) {
02.    var tsCategory = $('#ddlCategory').parent().find('.k-input').text();
03.    var tsSubCategory = $('#ddlSubCategory').parent().find('.k-input').text();
04.    $('.k-reset').each(function () {
05.        var groupLabel = $(this).text();
06.        if (groupLabel == "Category: Category") { $(this).text("Category: " + tsCategory); }
07.        if (groupLabel == "Sub Category: Sub Category") { $(this).text("Sub Category: " + tsSubCategory); }
08.    });
09.    e.model.set("Category", tsCategory);
10.    e.model.set("SubCategory", tsSubCategory);
11.}

 

 

 

 

0
Stefan
Telerik team
answered on 07 Feb 2018, 07:02 AM
Hello, Patrick,

I'm glad to hear that the issues are resolved.

Still, it is strange that the element is coming as null in one case and then the same element is used to locate the text from the .k-input element.

If an example is sent, I will be happy to further investigate this.

Regards,
Stefan
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Patrick
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Patrick
Top achievements
Rank 1
Share this question
or