I always dread dealing with the Kendo controls. They always seem to make the most basic things so friggin’ complicated.

Today, I needed to add a new drop down list to an existing Kendo popup. While I had done it before using something like this:

                <select kendo-drop-down-list
                    id="selectedElement"
                    name="selectedElement"
                    k-ng-model="selectedEle"
                    k-data-text-field="'name'"
                    k-data-value-field="'value'"
                    k-data-source="availableElements"
                    validationMessage="Enter an Element"
                    required></select>

I hadn’t yet tackled the fun of setting a default value of the dropdown. Of course, I set course with the code I’d used before because I knew that worked. I came at it every way I could think of, but nothing would set that stubborn default value. Most of the examples I came across followed this model, but our client was using an older version of Kendo that didn’t seem to support this approach. I wasn’t brave enough to figure out what all I would break by upgrading.

The key seemed to be the implementation of select kendo-drop-down-list. It seems to be a breed all its own and should be treated as such.

I ran across this post on StackOverflow with someone trying to do the same thing. As usual, I went to the answer that got the most upvotes to no avail. I went back and looked at the code from the original question and thought to myself, “In theory, that should work”. I plugged it in and sure enough that default value was magically getting set. Here was my version of the implementation.




Javascript

// on init
            vm.active = [{ name: "Active", value: "true" },
                         { name: "Inactive", value: "false" }];
            vm.activeOptions = {
                dataSource: vm.active,
                dataTextField: 'name',
                dataValueField: 'value',
            };
            $scope.activeOptions = { value: "Active" };
 
// post save
                save: function (e) {
                        var savedActive =  $("#activeOptions").kendoDropDownList().val();
                        };

HTML

<select kendo-drop-down-list id="activeOptions" k-options="vm.activeOptions" ng-model="activeOptions.value"></select>

This probably isn’t the solution most will need, but if you are dealing with an older build of the kendo.all.js file this might just save your bacon or at least a couple hours of fruitless searching and violently cursing the day Kendo ever came into your life.