HTML Dropdown List Set Selected Value

6 posts, 0 answers
  1. Ashleigh L
    Ashleigh L avatar
    113 posts
    Member since:
    Jun 2012

    Posted 07 May 2015 Link to this post

    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?

  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 11 May 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Ashleigh L
    Ashleigh L avatar
    113 posts
    Member since:
    Jun 2012

    Posted 12 May 2015 in reply to Kiril Nikolov Link to this post

    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.

  5. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 14 May 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Ashleigh L
    Ashleigh L avatar
    113 posts
    Member since:
    Jun 2012

    Posted 14 May 2015 in reply to Kiril Nikolov Link to this post

    Thanks for your patience Kiril, that was definitely it. Good old javascript....
  7. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 15 May 2015 Link to this post

    Hello shimmoril,

    I am glad to hear that the issue is resolved.

    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready