Show data according to the selection of multiple items from the list

Question

Hello,I want to show data according to the items selected. Multiple items must be selected. For ex, There are three items in the list i.e. Item1, Item2 & Item3. User can select any combination. If it chooses Item2 &Item3. It will show data of these items. Items data can be any graph/chart.ThanksRahul Kumar

Keerthana Rajendran · Accepted Answer

Hi Rahul kumar, 
 
We have checked the provided sample. You have directly included display none CSS for container div id’s and hence the styles is not updated properly during change event. We suggest you to add display style for e-hide class(in style.css) and remove this class during change event as done in our sample. Also, args.value of checkChange event will return the current checked value. To get the combined selected values, you can check the  args.model.value as shown below 
 




function onchange(args) 
        { 
          if(args.isChecked)  //check whether action is check or uncheck 
          { 
          if(args.model.value =="Item 1,Item 2") 
          { 
             $("#data1").removeClass("e-hide").addClass("e-show");                        
          } 
          if(args.model.value =="Item 2,Item 3") 
          { 
             $("#data2").removeClass("e-hide").addClass("e-show");                        
          } 
. .  . .  .  .  . . .           
        } 
 
We have modified our previous sample based on this and attached in the following link 
 
https://www.syncfusion.com/downloads/support/forum/161377/ze/Dialog177922603 
 
Please let us know if you need further assistance. 
 
Regards, 
Keerthana.

Keerthana Rajendran · Answer

Hi Rahul kumar, 
 
Thanks for contacting Syncfusion support.  
 
We can get the selected items details in checkChange event of DropDownList and you can get the checked status through args.isChecked value. Based on these values, you can show or hide required html elements in the page based on your requirement. Refer to the following code. 
 




$('#dropdown').ejDropDownList({ 
                dataSource: dataset, 
                fields: { text: "item", value: "item"  }, 
                showCheckbox: true, 
                checkChange:"onchange" 
            }); 
function onchange(args) 
        { 
          if(args.isChecked)  //check whether action is check or uncheck 
          { 
          if(args.value=="Item 1") 
          { 
             $("#data1").removeClass("e-hide").addClass("e-show");                        
          }  
      .  .  .  .   . . 
    } 
                                      
        } 
 
We have prepared a sample for reference. Please refer to the following link 
 
https://jsplayground.syncfusion.com/3bzjrmmn 
 
Please refer to the below links for more details on DropDownList component. 
 
https://js.syncfusion.com/demos/jquery/#!/azure/dropdownlist/defaultfunctionalities 
 
https://help.syncfusion.com/js/dropdownlist/getting-started 
 
https://help.syncfusion.com/api/js/ejdropdownlist#members 
 
Please let us know if you need further assistance. 
 
Regards, 
Keerthana.

Rahul Kumar · Answer

Hello Keerthana,Thank you for the sample but it is not working. Please refer to my code snippet attached below & make changes accordingly.Regards,Rahul Kumar Attachment: Dialog_Button_e15d4a02.zip

Rahul Kumar · Answer

Hello Keerthana,It worked thanks !Also i want to make changes on the clear button which on click not only refresh multiple data option selected, but it should refresh the display values of items selected.Please refer to the above code snippet.Regards,Rahul Kumar

Keerthana Rajendran · Answer

Hi Rahul, 
 
Most Welcome. We have checked the code used with clear button in your sample. It seems you have cleared all the values with DropDownList with clearText method. So , you can remove the “e-show” class and hide class from corresponding items as shown below to change the chart display on Graph dialog.  
 




function clearValue(e) { 
 
            //Object for Dropdownlist is created 
 
            var target = $('#dropdown1').data("ejDropDownList"); 
 
            //clearText method is called to clear the values in Dropdownlist 
 
            target.clearText(); 
               $("#data1,#data2,#data3").addClass("e-hide").removeClass("e-show");  
 
        } 
   
Please let us know if you need further assistance.  
  
Regards,  
Keerthana.