2012-06-25 10 views
5

Sto cercando la libreria KendoUI per utilizzarlo nel progetto Asp.Net Mvc 3. Questo è un esempio del widget della griglia popolato con alcuni dati locali. Devo rendere alcune delle colonne come collegamenti che portano a un'altra pagina dell'applicazione. Ad esempio, se si fa clic su Deposito, è necessario navigare nella vista "Home/Deposito". Come si può fare? Qualsiasi aiuto con l'esempio di lavoro sarà molto apprezzato. Grazie.I dati nella cella della colonna devono essere collegati ad un'altra pagina. Widget griglia KendoUI

Ecco Fiddler campione:

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

risposta

10

Si dovrebbe usare colonna Modello, ecco un esempio

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

+1

Sì, l'ho usato in questo modo: colonne: [ { template: '#=FolderName#', campo: "FolderName", titolo: "Nome", Larghezza: 100 } ringraziarvi per la tua risposta. – Mdb

0

Ecco alcuni link si possono trovare utili:

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

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

Inoltre, ecco una soluzione per creare una colonna legata per lo più in 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.

Problemi correlati