On Cascade - Duplicate Values

[Sybil Charles]

I have three dropdown lists and the cascading is working fine with one exception.

I have a list or projects, employees, and reports

each project can have multiple employees and employees can belong to multiple projects.

for example projectA and ProjectB are both being worked by employee 1

When projectA and ProjectB are selected in dropdown(1) then I get employee1 2X  in dropdown(2) any way I can get distinct employees after the project select?

[Prince Oliver]

Hi Sybil, 

 

Thank you for contacting Syncfusion support.  

 

Cascading in DropDownList will be performed based on value fields and the possible matches will be assigned as dataSource for the second DropDownList. To remove duplicate values in this filtered JSON array, you can use array.filter method and assign this value as dataSource through dataBound event of second DropDownList as shown below 

 

<div class="col-xs-8 col-sm-4"> 

            <span class="txt">Select Projects</span> 

            <ej:DropDownList ID="projectList" runat="server" DataTextField="text" DataValueField="parentId" CascadeTo="MainContent_employeeList" ShowCheckbox="true" ClientSideOnChange="onChange"></ej:DropDownList> 

        </div> 

                    <div class="col-xs-8 col-sm-4"> 

            <span class="txt">Select Employees</span> 

            <ej:DropDownList ID="employeeList" runat="server" CascadeTo="MainContent_reportList" ShowCheckbox="true" Enabled="false" ClientSideOnChange="onSelect" ClientSideOnDataBound="onBound"></ej:DropDownList> 

        </div> 

            <div class="col-xs-8 col-sm-4"> 

            <span class="txt">Select Reports</span> 

            <ej:DropDownList ID="reportList" runat="server" ShowCheckbox="true" Enabled="false"></ej:DropDownList> 

        </div> 

    <script type="text/javascript"> 

        function onChange(e) { 

            var country = $('#<%=employeeList.ClientID%>').data("ejDropDownList"); 

            country.element.val(""); 

        } 

 

        function onBound(e) { 

            if (e.data.length != 12) { 

                var datalist = e.data.filter((li, indx, self) => self.map( 

              item => item.text).indexOf(li.text) === indx); 

            if (datalist.length != e.data.length)  

            this.setModel({ dataSource: datalist }); 

            } 

 

        } 

        function onSelect(e) { 

            var country = $('#<%=reportList.ClientID%>').data("ejDropDownList"); 

            country.element.val(""); 

        } 

    </script> 

 

We have prepared a sample for your reference, please find the sample at the following location: http://www.syncfusion.com/downloads/support/forum/141929/ze/Cascading_DDL580457187  

 

Please let us know if you need any further assistance on this. 

 

Regards, 

Prince 

[Sybil Charles]

Your example is not working for me.  1 the duplicate values are there based on the foreign key selection.  What I need to have happen to use the example is it has to be after the values are selected from the cascade.  Once the values are selected I need to drop the foreign key form the data source and then filter.   Can this be done?

[Prince Oliver]

Hi Sybil, 

Thank you for your update. 

You can use the select event to get the values after selection and assign the data directly to the second DropDownList manually. Kindly refer to the following code snippet. 

 

 <ej:DropDownList ID="employeeList" runat="server" CascadeTo="MainContent_reportList" ShowCheckbox="true"Enabled="false" ClientSideOnChange="onSelect" ClientSideOnDataBound="onBound"></ej:DropDownList>  

        <ej:DropDownList ID="reportList" runat="server" ShowCheckbox="true" Enabled="false"></ej:DropDownList> 

 

<script type="text/javascript">  

         function onSelect(e) {  

            var country = $('#<%=reportList.ClientID%>').data("ejDropDownList");  

            country.element.val("");  

           e.value // you can get the cascade selected value 

           country.option({‘dataSource’: data}) // you can assign the data by manually to dropdownlist 

        }  

</script>  

We have attached a modified sample for your requirement. Please find the sample at the following location: http://www.syncfusion.com/downloads/support/forum/141929/ze/Cascading925774317.zip 

Kindly refer to the following API link: https://help.syncfusion.com/api/js/ejdropdownlist#events:select  

 

You can filter the cascade data by using data manager, Kindly refer to the following documentation link: https://help.syncfusion.com/js/datamanager/filtering#equal  

Please let us know if you need any further assistance on this. 

Regards, 

Prince 

[Sybil Charles]

This is what I had to do:

ClientSideOnBeforePopupShown="onBound"

 function onBound(e) 

                { 

                              var dl = $('#<%=ddlTwo.ClientID%>').data("ejDropDownList"); 

                               var items =dl.getListData();

                               var kOne = Object.keys(items[0])[0];

               

                               if(Object.keys(items[0]).length == 3)

                {

                                 for(var i =0; i<items.length; i++)

                                    {

                                      delete items[i][kOne];

                                    }

                }      

               

                

                               var nkOne = Object.keys(items[0])[0];

                               var nkTwo = Object.keys(items[0])[1];

                              var uniq = new Set(items.map(e => JSON.stringify(e)));

                              var res = Array.from(uniq).map(e => JSON.parse(e));

                              dl.setModel({

                            dataSource: res

                        });

                }

[Christopher Issac Sunder K]

Hi Sybil, 

Thank you for sharing the code snippet. 

We have prepared a sample with the shared code and we faced a console error on load. On fixing the error, the duplicates are still there in the dropdown. Here is the modified sample, 

http://www.syncfusion.com/downloads/support/forum/141929/ze/Cascading_DDL5804571871118380971.zip 

Please provide us the below details to proceed further, 

1. Are you still facing the duplication issue in your application?
2. Let us know whether the onBound method in beforePopupShown is added for first dropdown or second dropdown.

Thanks, 

Christo