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

时间:2014-02-03 20:52:58

标签: jquery asp.net-mvc model-view-controller kendo-ui

我正在使用kendo网格MVC。我想将所选行的ID值发送到controller.Read文档的kendo和google搜索一些例子。问题是我的网格数据源的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")

1 个答案:

答案 0 :(得分:2)

我认为你没有选择选中的行,因为实际上你没有选择任何一行,对吧?你想要的是选择包含按钮的行,是吗?

如果是这样,你可以得到这个项目:

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/