Dane w komórce kolumny, które mają być linkiem do innej strony. Widget siatki KendoUI

Question

Badam bibliotekę KendoUI, aby użyć jej w projekcie Asp.Net Mvc 3. Jest to przykład widżetu siatki wypełnionego pewnymi lokalnymi danymi. Potrzebuję niektórych kolumn, które mają być linkami prowadzącymi do innej strony aplikacji. Na przykład, jeśli klikniesz opcję Wpłata, powinieneś przejść do widoku "Strona główna/Wpłata". Jak to zrobić? Każda pomoc z roboczym przykładem zostanie bardzo doceniona. Dzięki.

Oto Skrzypek próbki:

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

Answer 1

Należy użyć kolumny szablonu, tutaj jest przykładem

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

Answer 2

Oto niektóre linki mogą pomocny znaleźć:

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

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

Również tutaj jest rozwiązanie, aby utworzyć kolumnę związaną głównie w 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.