Question

我有一个kendo UI网格，我必须显示除了其他字段之外的每一行的下拉列表。下拉列表值是静态的，如一，二，三。从用于绑定网格的服务I我得到的“一个”应该是下拉列表的选定值，但是如何首先在网格中显示带有静态值的下拉列表 - 一，二，三，然后基于远程数据选择“一个”。响应中的“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>

Answer 1

您可以在行模板中创建<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

基于KendoUI网格

1 个答案: