2012-07-04 15 views
10

Estoy tratando de utilizar la nueva rejilla de Kendo UI de asp.net mvc 3.red de interfaz de usuario que muestra celular html Telerik Kendo en lugar del control html generado

estoy teniendo una tabla de la tabla se genera de forma automática desde un controlador de asp.net mvc 3.

Y muéstrelo con la grilla Kendo.ui.

Sin embargo, estoy teniendo el código HTML dentro de las células en lugar de la html controla

Ejemplo:

que se vea en la célula: <input checked="checked" class="check-box" disabled="disabled" type="checkb.. en lugar de una entrada, el código en la vista es @ html.input

o <a href="/Admin/Edit">Edit</a> | <a href="/Admin/Details">Details</a> | <a href="/Adm en lugar de un enlace (código en la vista es @ Html.ActionLink)

¿Cómo puedo hacer que codifica código html?

Esta es mi guión:

$(document).ready(function() { 
    $("#calendrierMatch").kendoGrid({ 

    }); 
}); 

Gracias

+0

Se puede publicar el código Javascript donde se crea el kendoUI ¿cuadrícula? – nemesv

+0

este es mi script: $ (document) .ready (function() { $ ("# calendrierMatch"). KendoGrid ({ }); }); – dtjmsy

Respuesta

26

El KendoUI cuadrícula codifica automáticamente el contenido de la red, es por eso que se obtiene el texto <input type= ... en lugar del controll de entrada real.

Puede desactivar la codificación para una columna dada con el uso de las opciones encoded(see documentation):

codificado: Boolean (por defecto: true) especificado si el contenido de la columna se escapó. Deshabilite la codificación si los datos contienen marcas HTML.

por lo que necesita algo como:

$(document).ready(function(){ 
     $("#grid").kendoGrid({ 
     //... 
     columns: [ 
      { 
       field: "Column containing HTML", 
       encoded: false 
      } 
     ]   
     }); 
}); 
+0

Hola, nemesv, gracias por tu consejo, estoy usando $ ("# grid"). KendoGrid() para crear mi cuadrícula, las columnas y datos se obtienen directamente de la tabla en la vista (con y ), con el fin usar la opción codificada: falsa, eso significa que para cada vez que necesito declarar todas las columnas para la tabla en la llamada kendoGrid? – dtjmsy

+0

Según la documentación en la versión actual, no hay otra forma de desactivar la codificación globalmente. Así que me temo que debe especificar todas las columnas y desactivar la codificación de forma individual ... – nemesv

+0

Probé la última versión beta, y ahora puedo obtener el html representado, pero no puedo ordenar las columnas, incluso con el ordenable: opción verdadera, puedo ver los iconos arriba/abajo, pero al hacer clic en los resultados nada, ¿has visto algo similar? – dtjmsy

0
You need to add the template feature of kendo grid. 

In the below code i have created a text box inside the cell of kendo grid. 


{ 
    field: "Total", 
    title: "Total", 
    width: "40px", 
    template: "<input type='text' class=\"quantity_total\" id='txtTotal_${ItemId}'  
       name='txtTotal_${ItemId}' maxlength='8' onkeypress = 'return 
       fnCheckNumeric_total(event,this.id)' />" 

}, 
1

en modelo de unión rejilla kendo Razor página HTML utilizar el código

@Html.Kendo().Grid(Model).Name("GridName").Columns(col =>{ 
col.Bound(m => m.ID); 
col.Bound(m => m.Name); 
col.Template(@<text> 
     @Html.Raw(HttpUtility.HtmlDecode(item.Text)) 
    </text>); 
}) 
Cuestiones relacionadas