Static Dropdown list value selection based on service data inside KendoUI grid

Question

I have a kendo UI grid inside where I have to display a drop down for each row in addition to other fields.Dropdown list values are static one like one,two,three.From the service that is used for binding grid I am getting "one" that should be the selected value for dropdown list, but how to first show the dropdownlist in grid with static values - One,Two,Three and then based on remote data select "One" . "accessorLevel" in the response is column name that has selected value eg - One,Two for different dropdownlist

$(document).ready(function () {

    $("#viewEditSecurityGrid").kendoGrid({
        dataSource: {
            type: "json",
            transport: {
                read: {
                    url: "/Actions/GetAccessListData?objectId=" + objId
                }
            },
            schema: {
                data: function (data) {
                    return data.detailList;
                }
            }
        },

        rowTemplate: kendo.template($("#rowTemplate").html()),
    });
});


<script id="rowTemplate" type="text/x-kendo-template">
    <tr flag="0">

        <td>
            # if (isGroup == 1) { #
            <img class="f-f-icon show-group-members" src="../../Images/icon_Up.png" src-swap="../../Images/icon_moreDrop.png" />
            # } #
            <span class="marL13" accessorupi="#=accessorUPI#">#=accessorName#</span></td>
        <td>

            # if (accessorLevel == "One") { #
          //First Create a drop downlist with static values - One,Two Three
          //Then Select the One
            # } #

  # if (accessorLevel == "Two") { #
          //First Create a drop downlist with static values - One,Two Three
          //Then Select the Two
            # } #

        </td>

    </tr>
</script>

Björn Björn · Accepted Answer · 2016-02-22T10:34:07

You can create a <select> dropdown element in your row template.

Your row template could look something like this:

<script id="template" type="text/x-kendo-template">
<tr data-uid="#= uid #">
    <td>
        <strong>#: name #</strong>
    </td>
    <td>#: age #</td>
    <td>
        # 
      var oneSelected = "";
      var twoSelected = "";
      var threeSelected = "";
      if (accessorLevel == "One")
        oneSelected = " selected";
      else if (accessorLevel == "Two")
        twoSelected = " selected";
      else if (accessorLevel == "Three")
        threeSelected = " selected";#
      <select>
        <option#: oneSelected #>One</option>
        <option#: twoSelected #>Two</option>
        <option#: threeSelected #>Three</option>
      </select>
        </td>
</tr>
</script>

See full working snippet: http://dojo.telerik.com/Ebiyo

Static Dropdown list value selection based on service data inside KendoUI grid

1 Answers