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>
     
    <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>
        </div>


    The XML:
    <?xml version="1.0" encoding="utf-8" ?>
    <localization>
        <language>
            <display_name>United States (English)</display_name>
            <local_identifier>us</local_identifier>
            <culture_info>en-US</culture_info>
            <image><![CDATA[images/en-US/flag.png]]></image>
        </language>
        <language>
            <display_name>France (French)</display_name>
            <local_identifier>fr</local_identifier>
            <culture_info>fr-FR</culture_info>
            <image><![CDATA[images/fr/flag.png]]></image>
        </language>
        <language>
            <display_name>Sweden (Swedish)</display_name>
            <local_identifier>se</local_identifier>
            <culture_info>sv-SE</culture_info>
            <image><![CDATA[images/se/flag.png]]></image>
        </language>
        <language>
            <display_name>Philippines (Tagalog)</display_name>
            <local_identifier>ph</local_identifier>
            <culture_info>en-PH</culture_info>
            <image><![CDATA[images/en-PH/flag.png]]></image>
        </language>
    </localization>

    The JavaScript:
    // === LOCALIZATION DROPDOWNLIST ===
    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';
        }
        $("#localization_dropdownlist").width(200).kendoDropDownList(
        {
            autoBind: false,
            dataTextField: "display_name",
            dataValueField: "culture_info",
            filter: "contains",
            template: template_localization_dropdownlist,
            dataSource: {
                transport:
                {
                    read: "xml/localization.xml"
                },
                schema:
                {
                    type: "xml",
                    data: "/localization/language",
                    model:
                    {
                        fields:
                        {
                            display_name: "display_name/text()",
                            local_identifier: "local_identifier/text()",
                            culture_info: "culture_info/text()",
                            image: "image/text()"
                        }
                    }
                }
            },
            change: function () {
                this.value(selected_culture);
            }
        });
    });
  2. Daniel
    Admin
    Daniel avatar
    2230 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.
      or
    2. Set the value directly on the input element.

    A sample implementation is available at this link.

    Regards,
    Daniel
    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