Model Defaults on Grouped Columns

4 posts, 0 answers
  1. Patrick
    Patrick avatar
    30 posts
    Member since:
    Jan 2018

    Posted 01 Feb 2018 Link to this post

    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?

     

     

  2.
  3. Stefan
    Admin
    Stefan avatar
    2960 posts

    Posted 05 Feb 2018 Link to this post

    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.
  5. Patrick
    Patrick avatar
    30 posts
    Member since:
    Jan 2018

    Posted 05 Feb 2018 in reply to Stefan Link to this post

    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.}

     

     

     

     

  7. Stefan
    Admin
    Stefan avatar
    2960 posts

    Posted 07 Feb 2018 Link to this post

    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.
  8.
Back to Top