Question

我有一个具有可编辑数据行的kendo html网格。在特定行上选择“编辑”按钮时，会弹出一个模式，其中包含该行中可以编辑的字段子集。模态中的每个字段都是一个下拉列表（包含从SQL查询返回的每个字段的所有可能的条目），用户可以在其中从每个列表中选择一个值。

问题在于，现在，每个字段都没有使用实际网格行中的值预先填充，而是每个字段都以从sql查询返回的列表的第一个值开始。为了澄清，每个网格行都包含以下html结构：

<tbody role="rowgroup">
<tr role="row" data-uid="6f0062a8-878a-47b9-8185-6bf71523452">
<td role="gridcell" style="display: none;">232</td>
<td role="gridcell">1000</td>
<td role="gridcell">Value 1</td>
<td role="gridcell">2000</td>
<td role="gridcell">Value 2</td>
<td role="gridcell">3000</td>
<td role="gridcell">Value 3</td>
<td role="gridcell">Value 4</td>
<td role="gridcell">4000</td>
<td role="gridcell"><a class="k-button k-button-icontext k-grid-Edit" href="#"><span class=" "></span>Edit</a><a class="k-button k-button-icontext k-grid-Remove" href="#"><span class=" "></span>Remove</a></td>
</tr>
</tbody>

出现在模式中的列值是包含单词“ Value”的列值。单击每一行中的编辑按钮后，将调用以下函数以获取所选行：

 function showEdit(e) {
        currentRow = this.dataItem($(e.currentTarget).closest("tr"));
        $('#editPopUp').data('kendoWindow').open().center().toFront();
    }

它将为模式调用以下代码：

<div>
    @(Html.Kendo().Window()
        .Name("editPopUp")
        .Scrollable(false)
        .Width(500)
        .Height(300)
        .Modal(true)
        .Title("Edit Report")
        .Visible(false)
    .Content(@<text>
            <div>
                <div class="addReports">
                    <div>

                        @(Html.Kendo().DropDownList()


                          .Name("Value1Edit")
                          .DataTextField("Text")
                          .DataValueField("Value")
                          .HtmlAttributes(new { style = "width:100%" })
                                  .BindTo(ViewData["value1"] as IEnumerable<SelectListItem>)
                        )
                        )
                    </div>
                    <div>

                        @(Html.Kendo().DropDownList()
                          .Name("Value2Edit")
                          .DataTextField("Text")
                          .DataValueField("Value")
                          .HtmlAttributes(new { style = "width:100%" })
                                  .BindTo(ViewData["value2"] as IEnumerable<SelectListItem>)
                        )
                        )
                    </div>
                    <div>
                        @(Html.Kendo().DropDownList()
                          .Name("Value3Edit")
                          .DataTextField("Text")
                          .DataValueField("Value")
                          .HtmlAttributes(new { style = "width:100%" })
                                  .BindTo(ViewData["value3"] as IEnumerable<SelectListItem>)
                        )
                        )

                    </div>
                    <div>

                        @(Html.Kendo().DropDownList()
                          .Name("Value4Edit")
                          .DataTextField("Text")
                          .DataValueField("Value")
                          .HtmlAttributes(new { style = "width:100%" })
                                  .BindTo(ViewData["value4"] as IEnumerable<SelectListItem>)
                        )
                    </div>
                </div>

如何将表格行中的字段值传递到模式中以预填充其字段？

Answer 1

您可以在打开窗口时在运行时设置下拉值：

function showEdit(e) {
    currentRow = this.dataItem($(e.currentTarget).closest("tr"));

    let wnd = $('#editPopUp').data('kendoWindow');

    wnd.bind("open", function () {
        let $element = this.element,
            ddl1 = $element.find('#Value1Edit').data("kendoDropDownList"); // If the selector '#Value1Edit' doens't works, try by name attr '[name="Value1Edit"]', i'm not sure how kendo generates asp.net mvc widgets names/ids

        dd1.value(currentRow.Value1);
    });

    wnd.open().center().toFront();
}

对窗口中的所有下拉小部件执行此操作。如果下拉列表太多，您还可以保存一些代码并为此创建函数：

let fillDropDowns = function fillDropDowns($element, data, valuesCount) {
    for (let i = 1; i <= valuesCount; i++) {
         $element.find(`#ValueEdit${i}`).data("kendoDropDownList").value(data[`Value${i}`])
    });
}

然后在open事件中这样调用它：

fillDropDowns($element, currentRow, 3);

该函数将尝试使用键ValueEdit1，ValueEdit2和ValueEdit3填充名称为Value1，Value2和Value3的3个下拉列表来自currentRow。

如何预填充下拉字段

1 个答案: