Kendo Dropdowns

Kendo Dropdowns are fairly easy to use. They take a while to get comfortable with, but here are some basics to help you on your way.

Here is a simple dropdown I use to list warehouses. There are a couple key points that are vital to making this work for you. Primarily, make sure that you have a complete and error setting for your transport. Seriously, this can save you a lot of headaches.

        $("#drpWarehouse").kendoDropDownList({
            dataTextField: "warehouse",
            dataValueField: "warehouse_id",
            dataSource: {
                transport: {
                    read: {
                        url: "warehouses-data.ashx?sid=" + session_id,
                        dataType: "json", // specifies data protocol
                        complete: function (jqXHR, textStatus) { console.log(textStatus, "read warehouse records"); 
                            if (WarehouseId > 0) {
                                console.log('setting warehouse dropdown');
                                setDropDown($("#drpWarehouse"),WarehouseId)
                        } }
                    },
                    error: function (er) { console.log(e) },
                } 
            }
               ,
            change: function (e) {
                console.log('updated warehouse ' + this.value());                
            }

        });

Another vital point is how to set those values. If you are accustomed to .Net WebForms, you’ll really be hating the lack of a ViewState. So, when you open a record, you’ll need to load the data and THEN you’ll set the dropdown to the appropriate value. I use a simple function:

 function setDropDown(obj,id){
             
            var w = obj.data("kendoDropDownList");
          
            w.select(function(dataItem) {
                return dataItem.warehouse_id === id.toString();
            });
            
        }

You can see how I called it by looking at the “complete” event of the transport. Unfortunately, I have not yet gotten around to making it completely generic, as you can see by the “return dataItem.warehouse_id ===”. You’ll need to set that to the appropriate value for whatever you’re doing. (or I’ll update this later on).

Gotchas: A BIG annoyance I had here was the fact that the dataItem values are STRING. My id was an integer. It probably took me 30 minutes to realize that it was perfect except I had to add .toString() to the end of my id.