• How to use Kendo UI for javascript ComboBox

    C/C++, Programming

    I can create a simple search functionality using dropdown or combobox with a Kendo UI javascript component.

    Your server application should return data in JSON format:
     

        {
           "total":"1",
           "data":[
              {
                 "id":"239666272",
                 "name":"Owen Paterson ",
                 "email":"owen.paterson@invadev.com",
                 "profilepicture":null
              }
           ]
        }        
     

     

    And this would be your javascript code:

        $("#contactname").kendoComboBox({
            placeholder: "Start typing the name to search ...",
            dataTextField: "name",
            dataValueField: "id",
            filter: "contains",
            minLength: 2,
            enforceMinLength: true,
            delay: 500,
            autoBind: false,
            template: $("#template").html(),
            dataSource: {
                type: "json",
                serverFiltering: true,
                transport: {
                    read: {
                        url: invadev.hostPath + 'contact/search',
                        contentType: "application/x-www-form-urlencoded;charset=utf-8",                    
                        type: "POST"
                    },
                },
                schema: {
                    data: "data",
                    total: "total"
                },
            },
            change: function () {
                var dataItem = this.dataItem();
                var selectedValue = $('input[name="contactname_input"]').val();
                var combobox = $("#contactname").data("kendoComboBox");
                if(dataItem && dataItem.name == selectedValue){
                    $("#open").show();
                }
                else {
                    $("#open").hide();
                }
            }
        });

     

    You can refer to Telerik for more Kendo UI components and use for your web backend.

  • blog comments powered by Disqus
  • Support Us
  • Help this website up and running by buying me a coffee for only $0.50.