HTML Dropdown List Set Selected Value

[Ashleigh L]

I've got a dropdown created as a select in a template:

<select id="groupby" class="content-box text-left">
    <option value="Default"><cfoutput>#APPLICATION.LC.getValue("GroupByDropdown")#</cfoutput></option>
    <option value="Category"><cfoutput>#APPLICATION.LC.getValue("CourseCategoryDropdown")#</cfoutput></option>
    <option value="Group"><cfoutput>#APPLICATION.LC.getValue("GroupDropdown")#</cfoutput></option>
</select>

I need to keep it like this in order to be able to use our multi-lingual system for the options (seen above, the "APPLICATION.LC" bits).

I'm trying to set the selected value as shown in the API example (http://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist#methods-value), but I keep getting a Javascript error.

$("#groupby").kendoDropDownList();
$('#groupby').data("kendoDropdownList").value("Group");

 

TypeError: $(...).data(...) is undefined
$('#groupby').data("kendoDropdownList").value(group_by);

I'm guessing that is is because I'm just "kendo-izing" a dropdown, versus filling it via a datasource like in the example.

So, how would I go about setting the selected value with my set up?

[Kiril Nikolov]

Hello Shimmoril,

From the code it is not really clear what exactly is rendered in the widget. But please check the following working example and edit it in order to show the exact issue that you are facing:

http://dojo.telerik.com/atAsI

Regards,
Kiril Nikolov
Telerik

 

 

[Ashleigh L]

Thanks for the example Kiril - it works fine, but it's so simplified from what I'm actually doing it's not a good example. I tried modifying it to show my actual functionality, but it was so complicated that I thought it would be better to just host an example myself. So this is a working example of the problem: http://app.smarteru.com/custom/kendo/index.cfm

On page load, I generate the HTML (please ignore the terrible styling, I've pulled a lot of irrelevant bits out) using a Kendo template. Once the template is done generating HTML, I call a function to initialize the dropdowns, which is where my problem is. I've got an alert showing the value of "group_by" being passed to the initDropdown functions, which is what should be set as the selected value. You'll notice the javascript error I mentioned earlier pop up immediately after the alert.

Let me know if you have any questions about the example. I've attached a copy of the code as well.

[Kiril Nikolov]

Hello shimmoril,

You have a syntax error that is causing the issue. Instead of:

$('#groupby').data("kendoDropdownList").value("Group");

use

$('#groupby').data("kendoDropDownList").value("Group");

Regards,
Kiril Nikolov
Telerik

 

 

[Ashleigh L]

Thanks for your patience Kiril, that was definitely it. Good old javascript....

[Kiril Nikolov]

Hello shimmoril,

I am glad to hear that the issue is resolved.

Regards,
Kiril Nikolov
Telerik