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

[Rahul Kumar]

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.

Thanks

Rahul Kumar

[Keerthana Rajendran]

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]

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

[Keerthana Rajendran]

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. 

[Rahul Kumar]

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]

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.