Cascading DropDownList not filtering

11 posts, 0 answers
  1. Brandon
    Brandon avatar
    10 posts
    Member since:
    Sep 2016

    Posted 14 Sep Link to this post

    Using the HTML5 verison of Kendo UI in a grid. Many grid cells need a DropDownList, which I can populate with data no problem.

    I cannot however filter the second DropDownList based off the first one. I have been through all the examples but nothing works.

    I need to understand why my second dropdown is not filtering from the first one. What am I doing wrong?

     

    001.function loadNigoIssueGrid(frm) {
    002.        var legendText = "grdNigoIssueDelv";
    003.        grd = plUtil.initGrid(legendText, frm, "3px");
    004.        var modelData = gridData;
    005.        var dataSource = new kendo.data.DataSource({
    006.            transport: {
    007.                read: function (e) {
    008. 
    009.                    var dsData = modelData;
    010.                    e.success(dsData);
    011.                },
    012.                destroy: function (e) {
    013.                    e.success();
    014.                }
    015. 
    016.            },
    017.            batch: true,
    018.            schema: {
    019.                data: "nonRiskRequirements",
    020.                model: {
    021.                    fields: {
    022.                        WorkType: { type: "string" },
    023.                        SubType: { type: "string"},
    024.                        Name: {  },
    025.                        Reason: {  },
    026.                        Notes: {  },
    027.                        Result: {  },
    028.                        Critical: {  type: "boolean" },
    029.                        Applicant: { type: "boolean" },
    030.                        Insured: {  type: "boolean" },
    031.                        Policyowner: { type: "boolean" },
    032.                        Payor: {  type: "boolean" },
    033.                        Producer: {  type: "boolean" },
    034.                        ProviderName: {  }
    035.                    }
    036.                }
    037.            }
    038.        });
    039.        grd.kendoGrid({
    040.            columns: [
    041.                { field: "WorkType", title: "Work Type", width: "134px", editor: workTypeDropDown },
    042.                { field: "SubType", title: "Sub Type", width: "134px", editor: issueSubTypeDropdownList },
    043.                { field: "Name", width: "134px" },
    044.                { field: "Reason", width: "136px", editor: bindReasonTypeDropDown, template: "#=Reason#" },
    045.                { field: "Notes", width: "136px" },
    046.                { field: "Result", width: "136px" },
    047.                { field: "CriticalFlag", width: "136px", template: '#if (CriticalFlag) {#<input type="checkbox" #= CriticalFlag ? "checked=checked" : "" # class="chkbx"></input>#}#' },
    048.                { field: "RequiredSignatureApplicantFlag", width: "136px", template: '#if (RequiredSignatureApplicantFlag) {#<input type="checkbox" #= RequiredSignatureApplicantFlag ? "checked=checked" : "" # class="chkbx"></input>#}#' },
    049.                { field: "RequiredSignatureInsuredFlag", width: "136px", template: '#if (RequiredSignatureInsuredFlag) {#<input type="checkbox" #= RequiredSignatureInsuredFlag ? "checked=checked" : "" # class="chkbx"></input>#}#' },
    050.                { field: "RequiredSignaturePolicyOwnerFlag", title: "Policy Owner", width: "136px", template: '#if (RequiredSignaturePolicyOwnerFlag) {#<input type="checkbox" #= RequiredSignaturePolicyOwnerFlag ? "checked=checked" : "" # class="chkbx"></input>#}#' },
    051.                { field: "RequiredSignaturePayorFlag", width: "136px", template: '#if (RequiredSignaturePayorFlag) {#<input type="checkbox" #= RequiredSignaturePayorFlag ? "checked=checked" : "" # class="chkbx"></input>#}#' },
    052.                { field: "RequiredSignatureProducerFlag", width: "136px", template: '#if (RequiredSignatureProducerFlag) {#<input type="checkbox" #= RequiredSignatureProducerFlag ? "checked=checked" : "" # class="chkbx"></input>#}#' },
    053.                { field: "ProviderName", title: "Provider Name", width: "136px" },
    054.                { command: [{ text: "Delete", className: "pl-grid-delete-command", template: "<a class='k-button k-button-icontext pl-grid-delete-command'><span class='k-icon k-delete'></span>Delete</a>" }], width: "100px" }
    055. 
    056.            ],
    057.            dataSource: dataSource,
    058.            sortable: { allowUnsort: false },
    059.            filterable: true,
    060.            selectable: "row",
    061.            scrollable: true,
    062.            editable: true,
    063.            toolbar: [
    064.            { name: "Add", className: "k-grid-addWork", id: "k-grid-addWorks" },
    065. 
    066.             
    067. 
    068.            ],
    069.            change: function (e) {
    070.            }
    071.        });
    072.    }
    073. 
    074.    var workTypeDataSource = [
    075.            { DisplayText: "NIGO", WorkType: 1 },
    076.            { DisplayText: "ISSUE", WorkType: 2 },
    077.            { DisplayText: "DELV", WorkType: 3 }
    078.        ];
    079. 
    080.    var workSubType = [
    081.            { DisplayText: "BUSJU", WorkType: 1 },
    082.            { DisplayText: "GENERAL", WorkType: 1 },
    083.            { DisplayText: "HIPAA", WorkType: 1 },
    084.            { DisplayText: "ILLUSTRATN", WorkType: 1 },
    085.            { DisplayText: "MEDINFO", WorkType: 1 },
    086.            { DisplayText: "QUOTE", WorkType: 1 },
    087.            { DisplayText: "REG60", WorkType: 1 },
    088.            { DisplayText: "RELEASE", WorkType: 1 },
    089.            { DisplayText: "REPLACEMNT", WorkType: 1 },
    090.            { DisplayText: "TIA", WorkType: 1 },
    091.            { DisplayText: "TICKET", WorkType: 1 },
    092.            { DisplayText: "EFT", WorkType: 3 },
    093.            { DisplayText: "GENERAL", WorkType: 3 },
    094.            { DisplayText: "HIV", WorkType: 3 },
    095.            { DisplayText: "ILLUSTRATN", WorkType: 3 },
    096.            { DisplayText: "MEDICAL", WorkType: 3 },
    097.            { DisplayText: "PREMALLOC", WorkType: 3 },
    098.            { DisplayText: "QUOTE", WorkType: 3 },
    099.            { DisplayText: "SIGNAMEND", WorkType: 3 },
    100.            { DisplayText: "SIGNAPP", WorkType: 3 },
    101.            { DisplayText: "SIGNAPP2", WorkType: 3 },
    102.            { DisplayText: "SIGNAVIATN", WorkType: 3 },
    103.            { DisplayText: "SIGNAVOCTN", WorkType: 3 },
    104.            { DisplayText: "SIGNRECPT", WorkType: 3 },
    105.            { DisplayText: "SIGNTRAVEL", WorkType: 3 },
    106.            { DisplayText: "SOH", WorkType: 3 },
    107.            { DisplayText: "TRUST", WorkType: 3 },
    108.            { DisplayText: "GENERAL", WorkType: 2 },
    109.            { DisplayText: "ILLUSTRATN", WorkType: 2 },
    110.            { DisplayText: "QUOTE", WorkType: 2 },
    111.            { DisplayText: "SOH", WorkType: 2 },
    112.            { DisplayText: "SUITBLTY", WorkType: 2 }
    113.        ];
    114. 
    115.    function workTypeDropDown(container, options) {
    116.        jq('<input name="WorkType" id="WorkType" data-text-field="DisplayText" data-field-value="DisplayText" data-bind="value:' + options.field + '"/>')
    117.            .appendTo(container)
    118.            .kendoDropDownList({
    119.                dataSource: workTypeDataSource,
    120.                dataTextField: "DisplayText",
    121.                dataValueField: "DisplayText"
    122.            });    
    123.    }
    124. 
    125.    function issueSubTypeDropdownList(container, options) {
    126.        jq('<input name="SubType" data-text-field="DisplayText" data-field-value="DisplayText" data-bind="value:' + options.field + '"/>')
    127.            .appendTo(container)
    128.            .kendoDropDownList({
    129. 
    130.                dataSource: workSubType,
    131.                dataTextField: "DisplayText",
    132.                dataValueField: "DisplayText",
    133.                cascadeFrom: "WorkType"
    134.            });
    135.    }

  2. Brandon
    Brandon avatar
    10 posts
    Member since:
    Sep 2016

    Posted 15 Sep in reply to Brandon Link to this post

    Figured the issue out. The grid had to be set as editable: "inline", rather than editable: true.

    Now the whole row is editable and the cascading elements work!

  3. Kendo UI is VS 2017 Ready
  4. Brandon
    Brandon avatar
    10 posts
    Member since:
    Sep 2016

    Posted 19 Sep Link to this post

    New Issue: When selecting the WorkType, then the SubType, after I exit the edit mode, the cells display the Id, rather than the DisplayText. Anyone know why?
  5. Brandon
    Brandon avatar
    10 posts
    Member since:
    Sep 2016

    Posted 19 Sep in reply to Brandon Link to this post

    01.var workTypeDataSource = [
    02.                { DisplayText: "NIGO", Id: 1 },
    03.                { DisplayText: "ISSUE", Id: 2 },
    04.                { DisplayText: "DELV", Id: 3 }
    05.            ];
    06. 
    07.        var workSubType = [
    08.                { DisplayText: "BUSJU", Id: 1, SubId: 1},
    09.                { DisplayText: "GENERAL", Id: 1, SubId: 2 },
    10.                { DisplayText: "HIPAA", Id: 1, SubId: 3 },
    11.                { DisplayText: "ILLUSTRATN", Id: 1, SubId: 4 },
    12.                { DisplayText: "MEDINFO", Id: 1, SubId: 5 },
    13.                { DisplayText: "QUOTE", Id: 1, SubId: 6 },
    14.                { DisplayText: "REG60", Id: 1, SubId: 7 },
    15.                { DisplayText: "RELEASE", Id: 1, SubId: 8 },
    16.                { DisplayText: "REPLACEMNT", Id: 1, SubId: 9 },
    17.                { DisplayText: "TIA", Id: 1, SubId: 10 },
    18.                { DisplayText: "TICKET", Id: 1, SubId: 11 },
    19.                { DisplayText: "EFT", Id: 3, SubId: 12 },
    20.                { DisplayText: "GENERAL", Id: 3, SubId: 13 },
    21.                { DisplayText: "HIV", Id: 3, SubId: 14 },
    22.                { DisplayText: "ILLUSTRATN", Id: 3, SubId: 15 },
    23.                { DisplayText: "MEDICAL", Id: 3, SubId: 16 },
    24.                { DisplayText: "PREMALLOC", Id: 3, SubId: 17 },
    25.                { DisplayText: "QUOTE", Id: 3, SubId: 18 },
    26.                { DisplayText: "SIGNAMEND", Id: 3, SubId: 19 },
    27.                { DisplayText: "SIGNAPP", Id: 3, SubId: 20 },
    28.                { DisplayText: "SIGNAPP2", Id: 3, SubId: 21 },
    29.                { DisplayText: "SIGNAVIATN", Id: 3, SubId: 22 },
    30.                { DisplayText: "SIGNAVOCTN", Id: 3, SubId: 23 },
    31.                { DisplayText: "SIGNRECPT", Id: 3, SubId: 24 },
    32.                { DisplayText: "SIGNTRAVEL", Id: 3, SubId: 25 },
    33.                { DisplayText: "SOH", Id: 3, SubId: 26 },
    34.                { DisplayText: "TRUST", Id: 3, SubId: 27 },
    35.                { DisplayText: "GENERAL", Id: 2, SubId: 28 },
    36.                { DisplayText: "ILLUSTRATN", Id: 2, SubId: 29 },
    37.                { DisplayText: "QUOTE", Id: 2, SubId: 30 },
    38.                { DisplayText: "SOH", Id: 2, SubId: 31 },
    39.                { DisplayText: "SUITBLTY", Id: 2, SubId: 32 }
    40.        ];
    41. 
    42.        function workTypeDropDown(container, options) {
    43.            jq('<input name="WorkType" id="WorkType" data-text-field="DisplayText" data-field-value="DisplayText" data-bind="value:' + options.field + '"/>')
    44.                .appendTo(container)
    45.                .kendoDropDownList({
    46.                    autobind: true,
    47.                    dataSource: workTypeDataSource,
    48.                    dataValueField: "Id"
    49.                });    
    50.        }
    51. 
    52.        function issueSubTypeDropdownList(container, options) {
    53.            jq('<input name="SubType" data-text-field="DisplayText" data-field-value="SubId" data-bind="value:' + options.field + '"/>')
    54.                .appendTo(container)
    55.                .kendoDropDownList({
    56.                    autobind: false,
    57.                    dataSource: workSubType,
    58.                    dataTextField: "DisplayText",
    59.                    dataValueField: "SubId",
    60.                    cascadeFrom: "WorkType"
    61.                });
    62.        }

     

     

    Updated the code snippet

  6. Peter Milchev
    Admin
    Peter Milchev avatar
    144 posts

    Posted 21 Sep Link to this post

    Hello Brandon,

    I am afraid that we are unable to reproduce the described issue as you can see in this Dojo example. Would you please modify the provided example so that it exhibits this erroneous behavior? 

    I would also recommend reviewing the Add Cascading DropDownList Editors help article.

    Regards,
    Peter Milchev
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  7. Brandon
    Brandon avatar
    10 posts
    Member since:
    Sep 2016

    Posted 26 Sep in reply to Peter Milchev Link to this post

    Hello Peter,

    I was able to successfully get the drop downs to filter based on the first selection. The issue I am having now is that, when selecting an option, and exiting edit mode, the option value shows, rather than the DisplayText.

     

    I am also getting an error using the template functions, saying that the functions are not defined. 

    1.function brandName(typeId) {
    2.            for (var i = 0; i < workTypeDataSource.length; i++) {
    3.                if (workTypeDataSource[i].typeId == typeId) {
    4.                    return workTypeDataSource[i].DisplayText;
    5.                }
    6.            }
    7.        }

     

    1.{ field: "typeId", title: "Work Type", width: "134px", editor: workTypeDropDown, template: "#= brandName(typeId) #" }

  8. Peter Milchev
    Admin
    Peter Milchev avatar
    144 posts

    Posted 28 Sep Link to this post

    Hello Brandon,

    We will be happy to assist you further but unfortunately, without a reliable way to reproduce the issue and any errors we are unable to pin point the exact problem and find a suitable solution. Would you please modify the provided Dojo example so that it throws the error and shows the Value instead of DisplayText? Thus, we would be able to investigate your exact scenario locally and help you in the most efficient way.
     
    Regards,
    Peter Milchev
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  9. Brandon
    Brandon avatar
    10 posts
    Member since:
    Sep 2016

    Posted 28 Sep in reply to Peter Milchev Link to this post

    Peter,

    Updated the Dojo example to show the function with the error I am seeing.

     

    http://dojo.telerik.com/Axoqi/2

  10. Peter Milchev
    Admin
    Peter Milchev avatar
    144 posts

    Posted 29 Sep Link to this post

    Hello Brandon,

    You should pass the array with the array workSubType to the DataSource instead of the value field subId. Here is the fixed Dojo example.

    editor: function(container) { // use a dropdownlist as an editor
                    var input = $('<input id="subId" name="subId">');
                    input.appendTo(container);
                    input.kendoDropDownList({
                        dataTextField: "DisplayText",
                        dataValueField: "subId",
                        autobind:false,
                        cascadeFrom: "typeId", // cascade from the brands dropdownlist
                        dataSource: subId // bind it to the models array
                        dataSource: workSubType // bind it to the models array
                    }).appendTo(container);
                }


    Regards,
    Peter Milchev
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  11. Brandon
    Brandon avatar
    10 posts
    Member since:
    Sep 2016

    Posted 29 Sep in reply to Peter Milchev Link to this post

    Sorry that was a simple error on my part. Yes I understand that should be the array field.

    Regardless, I have this EXACT implementation in my code, and yet it still fails.

    Error attached.

    1.function anonymous(data) {
    2.var $kendoOutput, $kendoHtmlEncode = kendo.htmlEncode;with(data){$kendoOutput='<tr data-uid="'+(data.uid)+'" role=\'row\'><td  role=\'gridcell\'>'+( workTypeName(typeId) )+'</td><td  role=\'gridcell\'>'+( workSubTypeName(subId) )+'</td><td  role=\'gridcell\'>'+$kendoHtmlEncode(data.FullName==null?'':data.FullName)+'</td><td  role=\'gridcell\'>'+$kendoHtmlEncode(data.Reason==null?'':data.Reason)+'</td><td  role=\'gridcell\'>'+$kendoHtmlEncode(data.Notes==null?'':data.Notes)+'</td><td  role=\'gridcell\'>'+$kendoHtmlEncode(data.Result==null?'':data.Result)+'</td><td  role=\'gridcell\'>';if (CriticalFlag) {;$kendoOutput+='<input type="checkbox" '+( CriticalFlag ? "checked=checked" : "" )+' class="chkbx"></input>';};$kendoOutput+='</td><td  role=\'gridcell\'>';if (RequiredSignatureApplicantFlag) {;$kendoOutput+='<input type="checkbox" '+( RequiredSignatureApplicantFlag ? "checked=checked" : "" )+' class="chkbx"></input>';};$kendoOutput+='</td><td  role=\'gridcell\'>';if (RequiredSignatureInsuredFlag) {;$kendoOutput+='<input type="checkbox" '+( RequiredSignatureInsuredFlag ? "checked=checked" : "" )+' class="chkbx"></input>';};$kendoOutput+='</td><td  role=\'gridcell\'>';if (RequiredSignaturePolicyOwnerFlag) {;$kendoOutput+='<input type="checkbox" '+( RequiredSignaturePolicyOwnerFlag ? "checked=checked" : "" )+' class="chkbx"></input>';};$kendoOutput+='</td><td  role=\'gridcell\'>';if (RequiredSignaturePayorFlag) {;$kendoOutput+='<input type="checkbox" '+( RequiredSignaturePayorFlag ? "checked=checked" : "" )+' class="chkbx"></input>';};$kendoOutput+='</td><td  role=\'gridcell\'>';if (RequiredSignatureProducerFlag) {;$kendoOutput+='<input type="checkbox" '+( RequiredSignatureProducerFlag ? "checked=checked" : "" )+' class="chkbx"></input>';};$kendoOutput+='</td><td  role=\'gridcell\'>'+$kendoHtmlEncode(data.ProviderName==null?'':data.ProviderName)+'</td><td  role=\'gridcell\'><a class="k-button k-button-icontext k-grid-edit"  href="#"><span class="k-icon k-edit"></span>Edit</a><a class="k-button k-button-icontext k-grid-Delete"  href="#"><span class=" "></span>Delete</a></td></tr>';}return $kendoOutput;
    3.}   undefined

     

  12. Peter Milchev
    Admin
    Peter Milchev avatar
    144 posts

    Posted 03 Oct Link to this post

    Hello Brandon,

    Would you please try to modify the Dojo example from the previous post so that it reproduces the error? Thus, we would be able to investigate the issue further and help you more efficiently.

    Regards,
    Peter Milchev
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
Back to Top
Kendo UI is VS 2017 Ready