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.
0 Comments on "Setting the Default Value of a select kendo-drop-down-list"