Как предварительно заполнить выпадающие поля

Question

У меня есть сетка кендо 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>

Значения столбцов, которые отображаются в модальном режиме, - это значения столбцов, содержащие слово «Значение».При нажатии кнопки редактирования в каждой строке вызывается следующая функция для получения выбранной строки:

 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}`])
    });
}

И назовите это так в открытом событии:

fillDropDowns($element, currentRow, 3);

Эта функция попытается заполнить 3 раскрывающихся списка с именами ValueEdit1, ValueEdit2 и ValueEdit3 с помощью клавиш Value1, Value2 и Value3 из currentRow.