Kendo ui 单击网格数据时弹出剑道窗口
我已经为我的项目中的10个产品创建了剑道网格。我希望在单击剑道网格中显示的productname时,弹出包含产品详细信息的剑道窗口 我已经查看了剑道网格的演示,但我不想编辑所选产品的详细信息,也不想使用示例和演示中所示的“详细信息”按钮的单独列 我还查看了剑道ui的音乐商店演示,但我无法理解它在jQuery中的代码,我正在使用asp.NETMVC和razor语法进行我的项目 注: 我希望窗口仅在单击产品名称并显示其详细信息时显示 您可以使用:Kendo ui 单击网格数据时弹出剑道窗口,kendo-ui,kendo-grid,kendo-asp.net-mvc,Kendo Ui,Kendo Grid,Kendo Asp.net Mvc,我已经为我的项目中的10个产品创建了剑道网格。我希望在单击剑道网格中显示的productname时,弹出包含产品详细信息的剑道窗口 我已经查看了剑道网格的演示,但我不想编辑所选产品的详细信息,也不想使用示例和演示中所示的“详细信息”按钮的单独列 我还查看了剑道ui的音乐商店演示,但我无法理解它在jQuery中的代码,我正在使用asp.NETMVC和razor语法进行我的项目 注: 我希望窗口仅在单击产品名称并显示其详细信息时显示 您可以使用: $('#grid').on("click", "tr
$('#grid').on("click", "tr.k-state-selected", function (e) {
// open window here
// you have i.e. Id here $('#grid').dataItem($('#grid').select()).Id
});
为此,必须将选项设置为可选:网格配置中的行。
否则,您可以仅使用:
$('#grid').on("click", "tr", function (e) { ... }
您可以使用detailTemplate来实现它
<script>
var wnd,
detailsTemplate;
$(document).ready(function () {
var grid = $("#grid").kendoGrid({
dataSource: {
pageSize: 20,
data: createRandomData(50)
},
pageable: true,
height: 550,
columns: [
{ field: "FirstName", title: "First Name", width: "140px" },
{ field: "LastName", title: "Last Name", width: "140px" },
{ field: "Title" },
{ command: { text: "View Details", click: showDetails }, title: " ", width: "180px" }]
}).data("kendoGrid");
wnd = $("#details")
.kendoWindow({
title: "Customer Details",
modal: true,
visible: false,
resizable: false,
width: 300
}).data("kendoWindow");
detailsTemplate = kendo.template($("#template").html());
});
function showDetails(e) {
e.preventDefault();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
wnd.content(detailsTemplate(dataItem));
wnd.center().open();
}
</script>
<script type="text/x-kendo-template" id="template">
<div id="details-container">
<h2>#= FirstName # #= LastName #</h2>
<em>#= Title #</em>
<dl>
<dt>City: #= City #</dt>
<dt>Birth Date: #= kendo.toString(BirthDate, "MM/dd/yyyy") #</dt>
</dl>
</div>
</script>
转到此处进行工作演示
[更新]
下面是在单击产品名称时显示窗口的代码片段
<script>
var wnd,
detailsTemplate;
$(document).ready(function () {
var grid = $("#grid").kendoGrid({
dataSource: {
pageSize: 20,
data: createRandomData(50)
},
pageable: true,
height: 550,
columns: [
{ field: "FirstName", title: "First Name", width: "140px",attributes: { "class": "FirstName"} },
{ field: "LastName", title: "Last Name", width: "140px" },
{ field: "Title" }]
}).data("kendoGrid");
wnd = $("#details")
.kendoWindow({
title: "Customer Details",
modal: true,
visible: false,
resizable: false,
width: 300
}).data("kendoWindow");
detailsTemplate = kendo.template($("#template").html());
$('#grid').on("click", ".FirstName", function (e) {
e.preventDefault();
var dataItem = $("#grid").getKendoGrid().dataItem($(e.currentTarget).closest("tr"));
wnd.content(detailsTemplate(dataItem));
wnd.center().open();
});
});
</script>
<script type="text/x-kendo-template" id="template">
<div id="details-container">
<h2>#= FirstName # #= LastName #</h2>
<em>#= Title #</em>
<dl>
<dt>City: #= City #</dt>
<dt>Birth Date: #= kendo.toString(BirthDate, "MM/dd/yyyy") #</dt>
</dl>
</div>
</script>
您好,我为我的剑道网格制作了“.Selectables=>s.ModeGridSelectionMode.Single”,并尝试用带有警告消息的脚本回答,但没有效果。请在Firefox/Chrome开发者工具中尝试。1.检查$'your\u grid\u id'是否选择了一些元素,2。然后执行$'your_grid_id'。onclick,tr,function e{alert'ble'}我在问题中明确提到,我不想为链接到细节视图的按钮添加另一列。谢谢帮助。你能帮我了解剑道窗口和剑道网格的razor语法吗?