Programatically Selecting Item From Drop Down?

[Jeffrey Edgett]

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);

        }

    });

});

[Daniel]

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