剑道网格 - 无法使用自定义按钮传递值

Posted 2023-05-07

【中文标题】剑道网格 - 无法使用自定义按钮传递值

【英文标题】：Kendo grid - unable to passing value with custom button

【发布时间】：2014-02-27 12:56:30

【问题描述】：

我正在使用剑道网格 MVC。我想将选定行的 ID 值发送到控制器。阅读剑道文档并搜索一些示例。问题是网格数据源的 select() 函数出错。

function editRow() 
    var grid = $("#grid").data("kendoGrid");
    var selectedRow = grid.select(); // Getting error on this line(Cannot call method 'value' of undefined )
    var index = selectedRow.index();
    alert(index);

 ;

查看：

@(html.Kendo().Grid<AIS.UI.WebService.Proxy.DSrvAllService.AMBULANCEDEFINITIONS>() //Bind the grid to ViewBag.Products
.Name("grid")
.Columns(columns =>


columns.Bound(product => product.DESCRIPTION).Title("<strong>Ambulance Description</strong>").Width("20%");
columns.Bound(product => product.CODE).Title("<strong>Ambulance CODE</strong>").Width("20%");
columns.Command(commands =>


commands.Custom("").Text("editteam").HtmlAttributes(new  id = "editteam", onClick = "editRow()" );
commands.Destroy();
).Title("Operations").Width("10%");
)
.ToolBar(toolbar =>

toolbar.Create().HtmlAttributes(new  id = "addbutton", style = "font-weight:bold;color:blue" ).Text("Add Records"); // The "create" command adds new data items
toolbar.Save();
)

.Editable(editable => editable.Mode(GridEditMode.InCell))
.Pageable(pager => pager
.PageSizes(true)
.Input(true)
.Refresh(true)

)

.Sortable() // Enable sorting
.DataSource(dataSource => dataSource

.Ajax()
.ServerOperation(true)
.Events(events => events.Error("onError"))
.Model(model =>

model.Id(product => product.ID); // Specify the property which is the unique identifier of the model
model.Field(product => product.ID).Editable(false).DefaultValue(Guid.Empty);
model.Field(p => p.DESCRIPTION).Editable(true);
model.Field(product => product.CODE).Editable(true);


)
.Events(events => events.Error("onError"))

.Create(create => create.Action("AmbulanceCreate", "Administrator")) // Action invoked when the user saves a new data item
.Read(read => read.Action("AmbulanceRead", "Administrator"))  // Action invoked when the grid needs data
.Update(update => update.Action("AmbulanceUpdate", "Administrator"))  // Action invoked when the user saves an updated data item
.Destroy(destroy => destroy.Action("AmbulanceDelete", "Administrator")) // Action invoked when the user removes a data item

))

更新（已解决）

获取按下自定义按钮的行的 ID 值：

function EditName(e) 
 var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
 var id = dataItem.ID;
 alert(id);

还需要像这样将数据传递给函数：

commands.Custom("Edit Team").Click("EditName")

【问题讨论】：

editRow 函数何时调用？格子是当时生成的吗？是否只选择带有 jQ​​uery 的“网格”返回生成的元素？

【参考方案1】：

我认为您没有选择 selected 行，因为实际上您没有选择任何行，对吗？您想要的是选择包含按钮的行，对吗？

如果是这样，你可以让项目做：

function editRow() 
    // e.target is the DOM element representing the button
    var tr = $(e.target).closest("tr"); // get the current table row (tr)

    // Show the row index in the HTML table
    alert("Row in the grid: " + tr.index());

    // get the data bound to the current table row
    var data = this.dataItem(tr);

    // Show DataSource index
    alert("Datasource index: " + this.dataSource.indexOf(item));

如您所见，我显示了两个索引：HTML 表中的索引和 DataSource 中的索引，如果您有分页，它们可能会有所不同。

在这里运行：http://jsfiddle.net/OnaBai/VKEHK/1/

【讨论】：

是的，这正是我想要做的。当我单击每一行上的按钮时，我需要从单击按钮的行中获取特定值（例如“ID”）。我检查我需要 .Click("functionName") 而不是 onClick = "editRow()" 来传递 "e" 值

已修复，以便您的解释。谢谢