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-element）并将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函数以及如何传递参数都在文档的this部分中介绍。

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();
});

如何在点击时打开kendo窗口

3 个答案: