We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

On Cascade - Duplicate Values

Thread ID:

Created:

Updated:

Platform:

Replies:

141929 Jan 10,2019 06:49 PM UTC Jan 21,2019 12:50 PM UTC ASP.NET Web Forms 5
loading
Tags: DropDownList
Sybil Charles
Asked On January 10, 2019 06:49 PM UTC

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 [Syncfusion]
Replied On January 11, 2019 12:29 PM UTC

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
Replied On January 11, 2019 01:51 PM UTC

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 [Syncfusion]
Replied On January 14, 2019 05:33 PM UTC

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
Replied On January 18, 2019 04:03 PM UTC

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 [Syncfusion]
Replied On January 21, 2019 12:50 PM UTC

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, 

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon