Таблица данных DevExtreme, возвращающая значение ячейки при нажатии кнопки - PullRequest
Новая
       71

Таблица данных DevExtreme, возвращающая значение ячейки при нажатии кнопки

0 голосов
/ 06 ноября 2018

В моем проекте у меня есть простая сетка данных, настроенная следующим образом на странице бритвы: 

<div id="Datagrid" dx-item-alias="itemData">
    @(Html.DevExtreme().DataGrid<Batch>().ID("gridContainer")
    .Columns(columns =>
    {
        columns.Add().CellTemplate(
          @<text>
            @(Html.DevExtreme().Button()
            .ID("sendButton")
            .Text("Select Batch")
            .OnClick("onItemClick")     
            )                          
          </text>);
        columns.AddFor(m => m.Id);
        columns.AddFor(m => m.Name).Caption("Name");
    })
    .DataSource(d => d.Mvc().Controller("Batches").LoadAction("GetAllEntries").Key("BatchId")) 
    ) 
</div>

Данные загружаются в сетку данных через созданный мной WebApi. Я опускаю этот код в своем вопросе, так как он ничего не добавляет.

В первом столбце я добавил кнопку для каждой отображаемой строки. Я хочу, чтобы, когда я нажимал на эту кнопку, значение идентификатора ячейки рядом с ней отображалось на экране / консоли / как угодно. Мне просто нужно захватить ценность.

Грубый визуальный пример этого: 

       | Id  | Name
-------|-----|------
button |  1  | John
button |  2  | Chris

Поэтому, когда я нажимаю кнопку рядом с ячейкой, содержащей значение Id, равное 1, я хочу получить это значение и распечатать его на экране или консоли. Когда я нажимаю кнопку рядом со значением id 2, я хочу получить значение «2» и сделать то же самое.

У меня следующий js-код, пытающийся достичь этого: 

function onItemClick(e) {
    DevExpress.ui.notify("The " + e.component.option("value"));
  }

Однако это не работает. Что мне нужно сделать, чтобы получить правильное значение ячейки?

Ответы [ 2 ]

0 голосов
/ 06 ноября 2018

Самый простой способ добиться этого - использовать подход, описанный в статье Элементы управления ASP.NET MVC -> Основы -> Реализация шаблонов -> Доступ к параметрам шаблона статья. То есть внутри вашего обработчика событий Button OnClick вы можете использовать переменную data для доступа к текущей строке сетки: 

columns.Add().CellTemplate(
    @<text>
        @(Html.DevExtreme().Button()
                .ID("sendButton")
                .Text("Select Batch")
                .OnClick("function () { onItemClick(data); }")
        )
    </text>);

Тогда метод onItemClick будет выглядеть так: 

function onItemClick(data) {
    DevExpress.ui.notify(data.Id);
}
0 голосов
/ 06 ноября 2018

Добавление пользовательского шаблона ячейки cellTemplate обратный вызов для получения полных данных строки при нажатии кнопки ячейки. 

cellTemplate: function (container, options) {
                    $("<div>")
                        .append($("<button>", { text:"Button","data-key":JSON.stringify(options.data), "click": function(e){
                           console.log("Button Click Row Data => ",JSON.parse(e.target.getAttribute('data-key')));
                        }.bind(this) }))
                        .appendTo(container);
                }

Я создал демонстрационную версию jsfiddle для справки - https://jsfiddle.net/hzgfetLj/2/

...