KendoUI dropdown filter doesn't work with jquery

user_2414345 0
Viewed 637

I'm trying to filter dropdown and using nodatatemplate to add project from dropdown. Problem is when I'm click the dropdown its showing value and closing quickly, So I can't click on Add as new project button. Please see the screenshot. window is coming and closing quickly. HTML

<div class="col-6">
                <label class="ez-label-bold">Project Name</label>
                <input type="text" id="Job_Splitprojectname" class="ez-select w-100">
            </div>

enter image description here

$("#Job_Splitprojectname").kendoDropDownList({
            filter: "startswith",
            dataSource: projectDS,
            dataTextField: "ProjectName",
            dataValueField: "ProjectID",
            optionLabel: "Select Project",
            noDataTemplate: $("#noDataTemplate").html()
        });

nodatatemplate:

<script id="noDataTemplate" type="text/x-kendo-tmpl">
    <div>
        No Project Found. Do you want add as new Project - '#: instance.filterInput.val() #' ?
    </div>
    <br />
    <button class="k-button" onclick="addNew('#: instance.element[0].id #', '#: instance.filterInput.val() #')">Add as new Project</button>
</script>

What is the reason that dropdown automatically closing while click on dropdown? within a millisecond list coming and closing. Issue is in this line filter: "startswith", . If i remove this line then dropdown not closing autometically. Thanks !

kendo-ui filter asp.net-mvc jquery
2 Answers

I created a fiddle that contains both your example and the example from Telerik's demo page:

fiddle: http://jsfiddle.net/s1o7wrmt/1/

Telerik demo: https://demos.telerik.com/kendo-ui/dropdownlist/serverfiltering

Here is the code too:


<div class="col-6">
  <label class="ez-label-bold">Project Name</label>

  <input id="Job_Splitprojectname" />
  
  <h4>Products</h4>
  <input id="products" style="width: 100%;" />
</div>

$(document).ready(function() {

    var projectDS =  [
            { ProjectID: 1, ProjectName: "test 1" },
            { ProjectID: 2, ProjectName: "test 2" },
            { ProjectID: 3, ProjectName: "test 3" }
    ];

  $("#Job_Splitprojectname").kendoDropDownList({
  
    filter: "startswith",
    optionLabel: "Select Project",
    dataTextField: "ProjectName",
    dataValueField: "ProjectID",

  }).data("kendoDropDownList");

  $("#products").kendoDropDownList({
    filter: "startswith",
    dataTextField: "ProductName",
    dataValueField: "ProductID",
    dataSource: {
      type: "odata",
      serverFiltering: true,
      transport: {
        read: {
          url: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products",
        }
      }
    }
  });


});

At first I was seeing the same behavior you described, where the dropdown would close immediately!

I determined the cause to be that the jQuery version was set to an older version, and not a more current version that is required by Kendo. Check to be sure you are using the supported version of libraries that your version of Kendo requires: https://docs.telerik.com/kendo-ui/intro/supporting/jquery-support

user_4935570

It was actually modal form issue. I open the control as a modal form through kendodialog that cause the issue. I have changed kendo dialog to kendowindow and its resolved. Thanks

user_24143450
Related