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

Cascading DropDownList not filtering

10 Answers 136 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Brandon
Top achievements
Rank 1
Brandon asked on 14 Sep 2016, 10:31 PM

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

10 Answers, 1 is accepted

Sort by
0
Brandon
Top achievements
Rank 1
answered on 15 Sep 2016, 07:22 PM

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!

0
Brandon
Top achievements
Rank 1
answered on 19 Sep 2016, 09:54 PM
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?
0
Brandon
Top achievements
Rank 1
answered on 19 Sep 2016, 09:55 PM
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

0
Peter Milchev
Telerik team
answered on 21 Sep 2016, 10:31 AM
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.
 
0
Brandon
Top achievements
Rank 1
answered on 26 Sep 2016, 03:56 PM

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

0
Peter Milchev
Telerik team
answered on 28 Sep 2016, 12:50 PM
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.
 
0
Brandon
Top achievements
Rank 1
answered on 28 Sep 2016, 04:49 PM

Peter,

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

 

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

0
Peter Milchev
Telerik team
answered on 29 Sep 2016, 08:58 AM
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.
 
0
Brandon
Top achievements
Rank 1
answered on 29 Sep 2016, 04:01 PM

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

 

0
Peter Milchev
Telerik team
answered on 03 Oct 2016, 03:14 PM
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.
 
Tags
DropDownList
Asked by
Brandon
Top achievements
Rank 1
Answers by
Brandon
Top achievements
Rank 1
Peter Milchev
Telerik team
Share this question
or