Programatically Selecting Item From Drop Down?

2 posts, 0 answers
  1. Jeffrey Edgett
    Jeffrey Edgett avatar
    22 posts
    Member since:
    Jun 2005

    Posted 30 Dec 2011 Link to this post

    I am having trouble with programmatically selecting an item in a Kendo DropDownList.

    I want to preselect an item in a list of regions/languages based on the current culture.  I have created the following, but the item is not being preselected (at least visually).

    The HTML:
    <div id="localization_container" class="localization_container">
            <input id="localization_dropdownlist" class="localization_dropdownlist"></input>
    <div id="script_references">
            <script src="scripts/jquery.min.js" type="text/javascript"></script>
            <script src="scripts/kendo.all.min.js" type="text/javascript"></script>
            <script src="scripts/templates.js" type="text/javascript"></script>
            <script src="scripts/framework.js" type="text/javascript"></script>

    The XML:
    <?xml version="1.0" encoding="utf-8" ?>
            <display_name>United States (English)</display_name>
            <display_name>France (French)</display_name>
            <display_name>Sweden (Swedish)</display_name>
            <display_name>Philippines (Tagalog)</display_name>

    The JavaScript:
    var template_localization_dropdownlist = kendo.template('<img src="#=image#" style="width: 16px; height: 11px; border-width: 0px;" /> #=display_name#');
    $(document).ready(function () {
        var selected_culture = get_current_culture()
        if (selected_culture == '') {
            selected_culture = 'en-US';
            autoBind: false,
            dataTextField: "display_name",
            dataValueField: "culture_info",
            filter: "contains",
            template: template_localization_dropdownlist,
            dataSource: {
                    read: "xml/localization.xml"
                    type: "xml",
                    data: "/localization/language",
                            display_name: "display_name/text()",
                            local_identifier: "local_identifier/text()",
                            culture_info: "culture_info/text()",
                            image: "image/text()"
            change: function () {
  2. Daniel
    Daniel avatar
    2231 posts

    Posted 03 Jan 2012 Link to this post

    Hi Jeffrey,

    An item cannot be selected because the DropDownList isn't bound (autoBind: false) . To show the text and value on load, you could either:

    1. Use the DropDownList's text() method.
    2. Set the value directly on the input element.

    A sample implementation is available at this link.

    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top