kendo-ui - 列单元格中的数据要链接到另一个页面。KendoUI 网格小部件

Question

我正在研究 KendoUI 库以在 Asp.Net Mvc 3 项目中使用它。这是填充了一些本地数据的网格小部件的示例。我需要使一些列成为指向应用程序另一个页面的链接。例如，如果您点击存款，您应该导航到“主页/存款”视图。如何才能做到这一点？任何有关工作示例的帮助将不胜感激。谢谢。

这是提琴手示例：

http://jsfiddle.net/MwHNd/245/

Answer 1

您应该使用模板列，这是一个示例

http://jsfiddle.net/aNCV4/11/

Answer 2

以下是一些您可能会觉得有帮助的链接：

http://demos.telerik.com/kendo-ui/grid/index

http://bristowe.com/blog/2012/5/9/connecting-the-kendo-ui-datasource-to-remote-data.html

此外，这是一个主要在 Kendo JavaScript 中创建链接列的解决方案：

(function(myPage, $, undefined) {
 
    var IDS = {
        ...
        myGrid: "#my-grid",
 
        ...
 
        selectedMasterkey: "#selected-master-key",
        selectedChildkey: "#selected-child-key",
    };
 
    var Grids = {
        MyGrid: null,
    };
 
    function initMyGrid() {
        $(IDS.myGrid).kendoGrid({
            selectable: true,
            scrolable: true,
            sortable: true,
            columns: [
                { field: "Key", title: "key", width: "60%" },
                { field: "Weight", title: "Weight", width: "20%" },
                { field: "Link", title: "Link", width: "20%", template:"<a href="../MyData.mvc/Index?key=#=KEY#">#=KEY#</a>"} <!-- This is the hyperlinked column -->
            ],
 
            change: function() {
                var selectedDataItem = this.dataItem(this.select());
                if (PageState.Selected.ChildKey != selectedDataItem.KEY) {
                    PageState.Selected.ChildKey = selectedDataItem.KEY;
                    myGridSelectionChanged();
                }
            },
 
            ...
 
        });
 
        Grids.MyGrid = $(IDS.myGrid).data('kendoGrid');
 
        Grids.MyGrid .element.on("dblclick", "tbody>tr", "dblclick", function(e) {
            var dbClickedKey = Grids.MyGrid .dataItem($(this)).KEY;
            window.open('../MyData.mvc/Index?key='+dbClickedKey,'_blank');
        });
        bindMyGrid();
    }
 
    function bindMyGrid() {
        var dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "MyData",
                    dataType: "json"
                },
                parameterMap: function(data) {
                    return {
                        myDataId: getQueryStringParameterByName('mydataid')
                    }
                }
            },
            schema: {
                data: function(response) {
                    return response;
 
                },
                total: function(response) {
                    return response.length;
                },
                parse: function(response) {
                    var myDataList= [];
                    $.each(response, function(i, key) {
                        myDataList.push({ "KEY": key });
                    });
                    return myDataList;
                },
            },
        });
        dataSource.fetch();
        dataSource.view();
        Grids.MyGrid.setDataSource(dataSource);
    }
    ...
 
    myPage.initialize = function() {
        initMyGrid();
    }
 
}(window.myPage = window.myPage || {}, jQuery));

HTH。

Answer 3

         columns.Bound(c => c.Deposit).ClientTemplate("<a target='_blank' href='Home/Deposit'>#=Deposit#</a>").Title("Deposit");