基于KendoUI网格内的服务数据的静态下拉列表值选择

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

本文关键字：静态 下拉列表 选择 数据 服务 KendoUI 网格 基于      更新时间：2023-09-26

我里面有一个剑道UI网格，除了其他字段外，我还必须在其中显示每一行的下拉列表。下拉列表值是静态的，如一，二，三。从用于绑定网格的服务中，我得到了"一"，它应该是下拉列表的选定值，但是如何首先在网格中显示具有静态值的下拉列表 - 一，二，三，然后根据远程数据选择"一"。响应中的"accessorLevel"是具有选定值的列名，例如 - 一，二用于不同的下拉列表

$(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>

您可以在行模板中创建<select>下拉元素。

您的行模板可能如下所示：

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

查看完整的工作片段：http://dojo.telerik.com/Ebiyo

相关文章：