Determine the finish of "All Items" selection

[Baracskai]

Hello,

I have this Kendo DropDownTree control:

<kendo-dropdowntree name="ddtNamespaces" datavaluefield="Value" filter="FilterType.Contains" datatextfield="Text" style="width: 100%;" 
                                                        check-all="true" 
                                                        on-change="onNamespaceChange" 
                                                        on-close="onNamespaceClose"
                                                        on->
                                        <hierarchical-datasource>
                                            <transport>
                                                <read url="@Url.Action("GetNamespaceListFromATAsync", "AI")" />
                                            </transport>
                                            <schema type="json">
                                                <hierarchical-model id="Id"></hierarchical-model>
                                            </schema>
                                        </hierarchical-datasource>
                                        <checkboxes enabled="true" />
                                    </kendo-dropdowntree>

I should send an ajax call after control change. When the user normally select a node it's working fine, but when the user clicks on 'All Items' node then the change event will be fired the combo-items-count times. So if I have 100 items in the combo, after click on 'All Items' the change event will be fired 100 times. This is not good for me, I would like send only one ajax call when 'All Items' item is selected.

I try a workaround to use the close event, and send the ajax call after closing the popup, but the close event is firing before all change event is finished so this not works.

Do you have any other idea to solve this? Thank you!

[Anton Mironov]

Hi Baracskai,

Thank you for the code snippet and the details provided.

In order to achieve the desired behavior, I would recommend using the following approach:

1. Use the "Open" Event of the DropDownTree.
2. In the Event handler, get the instance of the master checkbox element.
3. Implement a handler for the change of the input element from point 2.
4. Here is an example:
   

   // In the DropDownTree:
   on-open="onOpen"
   
   // The Event handler:
   function onOpen(){
       var test = $(".k-check-all").find(".k-checkbox ")[0];
       $(test).change(function() {
           console.log("master checkbox change");
       })
   }

Here is a REPL example of the approach above:

• https://netcorerepl.telerik.com/cIuPPDPl11NOqTFw26

As the described behavior is a part of a custom scenario, feel free to stop the handling the change on all other options when the main checkbox is checked.

Kind Regards,
Anton Mironov
Progress Telerik