[Solved] Cascading DropDownList not filtering

[Brandon]

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

[Brandon]

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!

[Brandon]

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?

[Brandon]

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

[Peter Milchev]

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

 

 

[Brandon]

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) #" }

[Peter Milchev]

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

 

 

[Brandon]

Peter,

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

 

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

[Peter Milchev]

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

 

 

[Brandon]

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

 

[Peter Milchev]

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