Dữ liệu trong ô cột sẽ được liên kết đến một trang khác. Tiện ích lưới KendoUI

Question

Tôi đang nghiên cứu thư viện KendoUI để sử dụng nó trong dự án Asp.Net Mvc 3. Đây là ví dụ về tiện ích con lưới được điền bằng một số dữ liệu cục bộ. Tôi cần phải làm cho một số cột là các liên kết dẫn đến một trang khác của ứng dụng. Ví dụ: nếu Bạn nhấp vào Khoản tiền gửi, bạn nên được điều hướng đến Chế độ xem "Trang chủ/Khoản tiền gửi". Điều này có thể giải quyết như thế nào? Bất kỳ trợ giúp với ví dụ làm việc sẽ được đánh giá rất nhiều. Cảm ơn.

Đây là Fiddler mẫu:

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

Answer 1

Bạn nên sử dụng mẫu cột, đây là một ví dụ

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

Answer 2

Dưới đây là một số liên kết bạn có thể thấy hữu ích:

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

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

Ngoài ra, đây là một giải pháp để tạo ra một cột được liên kết chủ yếu trong 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.