kendo-ui - 如何点击打开剑道窗口

Question

请通过下面的代码。在下面的网格中，我有一列带有超链接。当我单击特定链接时，我想打开一个剑道窗口。我怎样才能做到这一点。目前它正在导航到其他页面。

@model IEnumerable<WeBOC.Support.Entities.ImportUnit>

@{
    ViewBag.Title = "Import Units";
}

<h2>Import Units</h2>

@(Html.Kendo().Grid(Model)
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.UnitNbr).Width(150).ClientTemplate(@Html.ActionLink("#=UnitNbr#", "UnitInspector", new { id = "#=UnitId#" }).ToHtmlString()).Title("Unit No.");
        columns.Bound(p => p.VIRNbr).Width(150).Title("VIR No.");
        columns.Bound(p => p.BLNbr).Width(150).Title("BL No.");
        columns.Bound(p => p.IGMStatus).Width(80).Title("IGM Status");
        columns.Bound(p => p.LineCode).Width(80).Title("Line Code");
        columns.Bound(p => p.Arrived).Format("{0:dd/MM/yyyy HH:mm}").Width(150).Title("Arrived"); 
    })    
    .Groupable()
    .Pageable()
    .Sortable()
    .Filterable()    
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .ServerOperation(false)
    )
)

Answer 1

为什么不将客户端模板更改为简单的 html 元素（例如 a 元素）并为该元素分配一个 javascript 函数以打开您的窗口？

...
columns.Bound(p => p.UnitNbr).Width(150).ClientTemplate("<a id="myId>Unit No.</a>);
...

然后使用jquery：

$("#myId").click(function() {
    $("#kendoWindow").data("kendoWindow").open();
});

Answer 2

如何创建超链接、如何调用 javascript 函数以及如何传递参数都包含在文档的这一部分中。

Answer 3

调整您的模板，使链接具有 css 类：

columns.Bound(p => p.UnitNbr).Width(150).ClientTemplate(@Html.ActionLink("#=UnitNbr#", "UnitInspector", new { id = "#=UnitId#" }, new { @class="someclass" }).ToHtmlString()).Title("Unit No.");

然后使用 jQuery：

$(document).on("click", ".someclass", function (e) {
    e.preventDefault();
    var address = $(this).attr("href");
    $("<div/>").kendoWindow({ 
        content: address 
    }).data("kendoWindow").open();
});