Find out the list of all kendo drop down lists on a page

[Sriram]

Hi,

I want to find out all the kendo dropdown lists on a page. I want to write a common function in a .js file where I can perform this feature. I am using the below version of Telerik

 

Version: 2019.2.619.545 (Kendo Web Extensions for ASP.NET MVC)

MVC version: 5.0

IDE: Visual Studio 2015

Browser : Chrome  76.0.3809.100, IE 11.0

.Net Framework: 4.6.2

Programming Language: C#

I tried to use the approach provided at https://stackoverflow.com/questions/21513056/finding-all-kendo-drop-downs-on-page but it's not working.

[Petar]

Hi Sriram,

The desired functionality could be realized using Javascript/jQuery with a code similar to the following:

var dropDownDOMelements = $(".k-dropdown");
var dropDowns = [];

dropDownDOMelements.each(function (ddl) {
    var currentAriaOwnsAttribute = $(this)[0].attributes[7].nodeValue;
    var currentDropDownListName = currentAriaOwnsAttribute.substring(0, currentAriaOwnsAttribute.length - 8);

    var currentDropDownList = $('#' + currentDropDownListName).data("kendoDropDownList");
    dropDowns.push(currentDropDownList);
})

which is being executed on the $(document).ready() event.

What we do with the above snippet is:

1. Select all DOM elements which have CSS class ".k-dropdown"
2. Go through each of the DOM elements which pass the selection and extract the name of each DropDownList component from the aria-owns attribute which every DropDownList has. 
3. Once we have the name of a given DropDownList, we get its configuration and store it in the "dropDowns" array

Please check the attached project demonstrating the described above functionality. 

If you have any questions, please let me know.  

Regards,

Petar
Progress Telerik

[Sriram]

Petar,

I tried this solution. It works if I have it on the page inside the $(document).ready() event. But I don't want to have it on every page. I have a common javascript file in which I want to perform this checking. If I add this under the common javascript function under the $(document).ready() event it does not work.

[Petar]

Hi Sriram,

If the desired functionality is to get all DropDownLists in a given page once it is loaded, this functionality can be acheived using @Scripts.Render(").

If we take my previous example, we can copy the code inside the <script> tag and move it to a separate Javascript file. In the attached project, I've moved the following code to getDDLs.js file located in the Scripts folder:

    $(document).ready(function(){
        var dropDownDOMelements = $(".k-dropdown");
        var dropDowns = [];

        dropDownDOMelements.each(function (ddl) {
            var currentAriaOwnsAttribute = $(this)[0].attributes[7].nodeValue;
            var currentDropDownListName = currentAriaOwnsAttribute.substring(0, currentAriaOwnsAttribute.length - 8);

            var currentDropDownList = $('#' + currentDropDownListName).data("kendoDropDownList");
            dropDowns.push(currentDropDownList);
        })

        console.log(dropDowns);
    })

Then in the _Layout.cshtml file, after the @RenderBody() I've added @Scripts.Render("~/Scripts/getDDLs.js").

Now if you open the browser console and start the project, once the Home page is loaded there will be two DropDownLists in the printed array. If you open the Contact page there will be 4 items in the array and if you open the About page there will be 1 item in the array. 

I hope the provided implementation will resolve your issue. 

Regards,
Petar
Progress Telerik

[Sriram]

Petar,

It works fine but I had made few more changes to the code because for some reason the control name was not being retrieved if the control is shown inside the partial view on the main page.

 

$(document).ready(function () {
    validateKendoDropDownLists();
})

function validateKendoDropDownLists() {
    var dropDownDOMelements = $(".k-dropdown");
    var dropDowns = [];

    dropDownDOMelements.each(function (ddl) {
        $(this).each(function () {
            $.each(this.attributes, function () {
                if (this.specified) {
                    if (this.name == 'aria-owns') {
                        var currentAriaOwnsAttribute = this.value;
                        var currentDropDownListName = currentAriaOwnsAttribute.substring(0, currentAriaOwnsAttribute.length - 8);
                        console.log(currentDropDownListName);
                        var currentDropDownList = $('#' + currentDropDownListName).data("kendoDropDownList");
                        dropDowns.push(currentDropDownList);

                        if ($("#" + currentDropDownListName).parent().find(".k-dropdown-wrap").hasClass("k-state-disabled")) {
                            console.log(currentDropDownListName + " is Disabled");

                            var ddlValue = currentDropDownList.value();
                            console.log(currentDropDownListName + " : " + ddlValue);

                            if (ddlValue == "") {
                                $('#' + currentDropDownListName).hide();
                                currentDropDownList.setOptions({ optionLabel: "N/A" });
                                currentDropDownList.refresh();
                            }
                        }
                        else {
                            console.log(currentDropDownListName + " is Enabled");
                            $('#' + currentDropDownListName).hide();
                        }
                    }
                }
            });
        });
    })
}

 

Also I am trying to hide the control using the hide() function but it does not work.

[Petar]

Hi Sriram,

Based on the provided code I would assume the reason for the reported behavior is that the hide() method is not called for the correct element. Please try changing:

$('#' + currentDropDownListName).hide();

with:

$('#' + currentDropDownListName).parent().hide();

Attached you will find an edited version of the previous project I've sent you. In it, some of the previously presented DropDownLists have the .Enable() configuration set to "false". The disabled DropDownLists are being hidden in the document.ready() function using the above code snippet. 

I hope this will resolve your issue.

Regards,
Petar
Progress Telerik

[Sriram]

This worked. But I am doing a similar change for the auto complete controls using the below code but it does not work. I don't want to destroy the control.

 

function disableKendoAutoCompleteControls() {
    var autoCompleteDOMelements = $(".k-autocomplete").find("input");
    var autoCompleteControls = [];

    autoCompleteDOMelements.each(function () {
        var currentAutoCompleteName = this.name;
        var currentAutoComplete = $('#' + currentAutoCompleteName).data("kendoAutoComplete");

        if (typeof currentAutoComplete !== "undefined") {
            autoCompleteControls.push(currentAutoComplete);

            if ($("#" + currentAutoCompleteName).parent().hasClass("k-state-disabled")) {
                //$("#" + currentAutoCompleteName).kendoAutoComplete({
                //    placeholder: "N/A"
                //});

                $('#' + currentAutoCompleteName).data("kendoAutoComplete").options.placeholder = 'N/A';
            }
        }
    })
}

[Petar]

Hi Sriram,

To achieve the desired functionality you will have to destroy the AutoComplete and initialize it again. Renaming the placeholder of an AutoComplete component after its initialization is not a supported functionality.  

Here is a Dojo project demonstrating how the destroying and the new initialization of an AutoComplete could be implemented. Here is the edited definition of the disableKendoAutoCompleteControls you provided:

function disableKendoAutoCompleteControls() {
    var autoCompleteDOMelements = $(".k-widget.k-autocomplete").find("input");
    
    $.each(autoCompleteDOMelements, function(index, autoComplete){
      var currentAutoCompleteName = "#"+autoComplete.id;
      var currentAutoComplete = $(currentAutoCompleteName).data("kendoAutoComplete");

      if($(autoComplete).parent().hasClass("k-state-disabled"))
      {
        currentAutoComplete.destroy();
        var parent = $(currentAutoCompleteName).parent();
        parent.find("span").remove();
        parent.find("input").remove();
        parent.append('<input id="' + autoComplete.id +'" style="width: 100%;" />')
         $(currentAutoCompleteName).kendoAutoComplete({
           placeholder: "N/A",
           filter: "startswith",
           separator: ", "
         });
        $(currentAutoCompleteName).data("kendoAutoComplete").enable(false);

      }

    })

The marked in yellow code in the above snippet clears the HTML tags that are being added on AutoComplete's initialization that are not being removed on its destroying.  

Regards,
Petar
Progress Telerik