CODEWITHSUNDEEP
asp.net-mvckendo-ui
shole
shole

Reputation: 4094

Is it possible to use template for display text of Kendo UI dropdownlist which uses MVVM

I have a Kendo UI dropdownlist, which using Kendo MVVM features:

<select id="SearchPicker"
         data-bind="source: LocationTypeDropDown, value: LocationType"
         data-role="dropdownlist"
         data-value-field="Code"
         data-text-field="Name"
         data-option-label="All"
         data-value-primitive="true"
         data-cascade-from="ddlSite"
         data-auto-bind="false">
</select>

But for display text of the items, indeed I want a format like Code - Name, and I wonder how can I change the display template?

In MVC I know there is a .ClientTemplate() method which enable me to write .ClientTemplate("#=Code# - #=Name#"), but as I am using MVVM features, how can I acheive something like this?

EDIT

Other than the drop down list item options, is it possible that the selected value (like "Oranges" below) be shown using template as well? ("2 - Oranges")

enter image description here

Upvotes: 0

Views: 2380

Answers (1)

111
111

Reputation: 1779

Try with this solution JSFiddle

var viewModel = kendo.observable({
    selectedProduct: null,
    onChange: function () {
        var selectedFruit = this.get("selectedFruit");
        alert("Id: " + selectedFruit.id + " - Name: " + selectedFruit.name);
    },
    fruits: new kendo.data.DataSource({
        data: [
            { id: 1, name: "Apples" },
            { id: 2, name: "Oranges" },
            { id: 3, name: "Bananas" }],
        schema: {
            model: {
                fields: {
                    id: { type: "number" },
                    name: { type: "string" }
                }
            }
        }
    })
});

kendo.bind("#example", viewModel);
<link rel="stylesheet" type="text/css" href="https://kendo.cdn.telerik.com/2016.1.112/styles/kendo.common.min.css">
<link rel="stylesheet" type="text/css" href="https://kendo.cdn.telerik.com/2016.1.112/styles/kendo.rtl.min.css">
<link rel="stylesheet" type="text/css" href="https://kendo.cdn.telerik.com/2016.1.112/styles/kendo.silver.min.css">
<link rel="stylesheet" type="text/css" href="https://kendo.cdn.telerik.com/2016.1.112/styles/kendo.mobile.all.min.css">

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>

<div id="example">
  <p>Kendo UI DropDownList</p>
   <select data-role="dropdownlist" 

     data-option-label="Select Item..."
  data-bind="value: selectedFruit,source: fruits, events: {
                                change: onChange
                              }" data-template="select-template" data-value-template="select-template" data-text-field="name" data-value-field="id">
  </select>

  <script id="select-template" type="text/x-kendo-template">
    <option value="#: id #">#: id # - #: name #</option>
  </script>
</div>

Upvotes: 1

Related Questions