2012-06-25 32 views
5

Estoy investigando la biblioteca KendoUI para utilizarla en el proyecto Asp.Net Mvc 3. Este es un ejemplo del widget de cuadrícula poblado con algunos datos locales. Necesito hacer que algunas de las columnas sean enlaces que conducen a otra página de la aplicación. Por ejemplo, si hace clic en Depósito, debe navegar a la vista "Inicio/Depósito". ¿Cómo puede hacerse esto? Cualquier ayuda con el ejemplo de trabajo será muy apreciada. Gracias.Datos en la celda de la columna para vincular a otra página. Widget de cuadrícula KendoUI

Aquí es muestra de Fiddler:

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

Respuesta

10

Debe utilizar la columna plantilla, aquí es un ejemplo

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

+1

Sí, lo utilizaron como esto: columnas: [ { plantilla: '#=FolderName#', campo: "FolderName", título: "Nombre", width: 100 } gracias por tu respuesta. – Mdb

0

Estos son algunos enlaces que pueden resultar útiles:

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

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

Además, aquí es una solución para crear una columna vinculada principalmente en 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.

Cuestiones relacionadas