如何通过双击从剑道网格获取行 ID
How to get the row ID from a Kendo Grid with a double click
我目前正在测试Kendo UI MVC Extensions Beta。我正在尝试实现双击 - 编辑,但我不知道如何获取 rowId。
JavaScript:
$('#GridPedidos table tr').live('dblclick', function () {
alert(' grid dbl clicked');
});
视图:
@(Html.Kendo().Grid(Model) _
.Name("GridPedidos") _
.Columns(Sub(column)
column.Bound(Function(item) item.idPedidoDocumentacao).Width("5%")
column.Bound(Function(item) item.descEstadoPedidoDoc).Width("25%")
column.Bound(Function(item) item.descTipoPedidoDoc).Width("25%")
column.Bound(Function(item) item.data).Width("25%").Format("{0:dd-MM-yyyy}")
column.Command(Function(item) item.Destroy()).Width("10%")
End Sub) _
.DataSource(Sub(ds)
ds.Ajax().ServerOperation(False).Read(Sub(s)
s.Action("GetListaGrid", "listaPedidos")
End Sub).Create(Sub(s)
s.Action("detalhePedido", "Pedidos")
End Sub).Model(Sub(m)
m.Id(Function(p) p.idPedidoDocumentacao)
End Sub).Destroy(Sub(d)
d.Action("apagaPedido", "listaPedidos")
End Sub)
End Sub) _
.Selectable()
)
我可以使用此功能检测双击,但是如何获取id?
我已经用客户端 api 完成了这个例子,并使用 MVC 扩展完成了这个例子。
创建网格div,以在运行时创建网格。
<div id="grid" style="width: 400px;"></div>
创建了一个行模板,以便我可以为元素提供一个 id 标签。
<script id="rowTemplate" type="text/x-kendo-tmpl">
<tr>
<td id="EmployeeId">
${ EmployeeID }
</td>
<td>
${ FirstName }
</td>
<td>
${ LastName }
</td>
</tr>
</script>
初始化网格并绑定数据。
<script>
$(document).ready(function () {
$("#grid").kendoGrid({
columns: [
"EmployeeID"
,{
field: "FirstName",
title: "First Name"
},{
field: "LastName",
title: "Last Name"
}
],
dataSource: {
data: [
{
EmployeeID: 0,
FirstName: "Joe",
LastName: "Smith"
}, {
EmployeeID: 1,
FirstName: "Jane",
LastName: "Smith"
}
],
schema: {
model: {
id: "EmployeeID",
fields: {
EmployeeID: {type: "number" },
FirstName: { type: "string" },
LastName: { type: "string" }
}
}
},
pageSize: 10
},
scrollable: {
virtual: true
},
sortable: true,
pageable: true,
rowTemplate: kendo.template($("#rowTemplate").html())
});
//Add a double click event that will return the text in the EmployeeId column.
$('#grid table tr').dblclick(function () {
alert($(this).find("td[id=EmployeeId]")[0].innerText);
});
});
</script>
--编辑--
我还继续创建了一个 MVC 扩展示例,该方法通过模板路由是相同的。
型号类别:
public class Employee
{
public int EmployeeId { get; set; }
public string Name { get; set; }
}
查看代码:
<script type="text/javascript">
function OnDataBound() {
$('#OtherGrid table tr').dblclick(function () {
alert($(this).find("span[id=EmployeeId]")[0].innerText);
});
}
</script>
@(Html.Kendo().Grid<Employee>()
.Name("OtherGrid")
.Columns(columns =>
{
columns.Bound(p => p.EmployeeId).ClientTemplate("<span id='"EmployeeId'">#: EmployeeId #</span>");
columns.Bound(p => p.Name);
})
.DataSource(dataSource => dataSource
.Ajax() // Specify that the data source is of ajax type
.Read(read => read.Action("GetEmployees", "Home")) // Specify the action method and controller name
)
.Events(e => e.DataBound("OnDataBound"))
)
控制器:
public ActionResult GetEmployees([DataSourceRequest]DataSourceRequest request)
{
List<Employee> list = new List<Employee>();
Employee employee = new Employee() { EmployeeId = 1, Name = "John Smith" };
list.Add(employee);
employee = new Employee() { EmployeeId = 2, Name = "Ted Teller" };
list.Add(employee);
return Json(list.ToDataSourceResult(request));
}
希望这有帮助!
我用这个js实现了我想要的东西
$('#GridPedidos table tr').live('dblclick', function () {
var grid = $("#GridPedidos").data("kendoGrid");
var dItem = grid.dataItem($(this));
if (dItem != null) {
detalhePedido(dItem.id);
}
});
要双击打开编辑模式,您需要像这样向网格注册双击事件:
var grid = $("#grid").data("kendoGrid");
grid.element.delegate("tbody>tr", "dblclick", function () {
grid.editRow($(this));
});
相关文章:
- 如何在JqWidgets网格中获取所有未选中行索引的列表
- 如何使用jquery在网格视图中获取所选单选按钮的值
- 获取网格视图行中对象的类型
- 通过ID获取声明性dojo数据网格
- 如何获取网格格式的表中的下拉选定值
- 剑道网格:在Angular指令中获取一个实例
- jqGrid-如何获取当前网格的标题
- 剑道网格:如何在与Angular一起使用时从组合框单元格模板中获取所选项目
- 剑道网格 - 获取当前编辑行
- 如何使用Wijmo Flex网格获取选定的行值
- 光滑网格 - 获取选定的单元格值,ID和字段
- 如何通过双击从剑道网格获取行 ID
- 剑道网格获取列值数据的最大长度
- 从数据网格获取行数据的更好方法
- 剑道UI网格:获取当前分组状态的数据
- 剑道网格获取行和列索引更改事件
- Wijmo网格.获取具有匹配Id的行的行号
- 我如何在智能客户端从网格获取数据
- asp.net mvc-Kendo UI网格获取Javascript中的Cell值
- 从主网格获取数据以填充子网格