To get multiselect checked in dropdown and unselect.

[Shalini]

I'm trying to get all checked on select of "All" in the dropdown so that all the other checkboxes get selected and uncheck all when the checkbox "All" is unchecked and even not get all in the dropdown but it is not working.

Even when i try to do multiple selection its not working.

I have attached the following screenshot.

Attachment: firstpage_c81a5661.rar

[Keerthana Rajendran]

Hi Shalini,     

   

Thank you for contacting Syncfusion Support.   

   

We have checked the reported issue in our end with latest version (15.4.0.20). It seems you have added All option as one of the DropDownList items. We suggest you to add check All option in DropDownList through headerTemplate option as shown below and perform check and uncheck during change event of checkbox.   

   

<div class="control">   

            <div class="ctrllabel">   

                Select a car</div>   

         @Html.EJ().DropDownList("selectCar").TargetID("carsList").ShowCheckbox().EnableRTL(false).Width("150px").HeaderTemplate("<div class='temp'><input id='check' type='checkbox'/></div>").ShowCheckbox(true).ClientSideEvents(clientEvent => clientEvent.Create("create")).MultiSelectMode(MultiSelectModeTypes.Delimiter)      

 <div id="carsList">   

                <ul>   

                    //Grouping1###   

                    <li>Audi A4</li>   

                    <li>Audi A5</li>   

                    <li>Audi A6</li>   

                    <li>Audi A7</li>   

                    //Grouping2###   

                    <li>Honda H1</li>   

                    <li>Honda H2</li>   

                    <li>Honda H3</li>   

                    <li>Honda H4</li>   

                </ul>   

            </div>   

        </div>   

<script>   

        function create(args) {   

            $("#check").ejCheckBox({ text: "All", change: "Change" });   

        }   

        function Change(args) {   

            window.flag = true;   

            var obj = $("#selectCar").ejDropDownList("instance");   

            if (args.isChecked) obj.checkAll();   

            else obj.uncheckAll();   

            window.flag = false;   

        }   

    </script>   

   

We have checked this in both normal mode and unobtrusive mode. Also, we have attached a sample and video for your reference. Please refer to the below given links   

   

Video: http://www.syncfusion.com/downloads/support/forum/135884/ze/CheckAll-39324786   

   

Sample: http://www.syncfusion.com/downloads/support/forum/135884/ze/SyncfusionDropDown639469155   

   

UG Link: https://help.syncfusion.com/aspnetmvc/dropdownlist/howto#add-check-all-option-in-popup-list   

   

If the issue persists, kindly revert by modifying the above sample to reproduce the issue. Else share us a video along with product version used in your project so that it will be helpful for us to proceed further.   

   

Regards,   

Keerthana.   

  

 

[Shalini]

   @Html.EJ().DropDownList("selectCar").TargetID("carsList").ShowCheckbox().EnableRTL(false).Width("150px").HeaderTemplate("<div class='temp'><input id='check' type='checkbox'/></div>").ShowCheckbox(true).ClientSideEvents(clientEvent => clientEvent.Create("create")).MultiSelectMode(MultiSelectModeTypes.Delimiter)    

How do I specify these in script similar to this 

 $('#dropdown').ejDropDownList(
        {
            targetID: "carsList", 
            value: "Audi A5", 
            showCheckbox: true, 
            checkChange: function (args) 
            {              
               /*Do your changes */                        
            }
        });

[Keerthana Rajendran]

Hi Shalini, 

 

We can specify header template for DropDownList through JavaScript as shown below 

 

$('#dropdown1').ejDropDownList({ 

                width: 300, 

                dataSource: items, 

                fields: { text: "text", value: "value" }, 

                showCheckbox: true, 

                headerTemplate: "<div class='temp' ><input id ='check' type='checkbox'  />   </div>" 

            }); 

            $("#check").ejCheckBox({ text: "All", change: "Change" }); 

 

We have prepared a sample for your reference. Refer to the below given link 

 

Sample: http://jsplayground.syncfusion.com/1c12wdjv 

 

Also, refer the below UG links for more details 

 

https://help.syncfusion.com/js/dropdownlist/howto#add-check-all-option-in-popup-list 

 

https://help.syncfusion.com/js/dropdownlist/templatesupport#header-template 

 

 

Regards, 

Keerthana