2012-07-04 12 views
10

Próbuję użyć nowej siatki Kendo UI z ASP.NET MVC 3.Telerik Kendo UI wyświetlanie siatki komórek html zamiast generowane kontrola html

Mam tabelę tabela jest generowana automatycznie z kontrolera w asp.net mvc 3.

Wyświetlane z siatką Kendo.ui.

Jednakże mam kod HTML wewnątrz komórek, a nie html steruje

przykład:

wyświetlać w komórce: <input checked="checked" class="check-box" disabled="disabled" type="checkb.. zamiast wejścia kod w widoku jest @ html.input

lub <a href="/Admin/Edit">Edit</a> | <a href="/Admin/Details">Details</a> | <a href="/Adm zamiast linku (kod w widoku jest @ Html.ActionLink)

Jak mogę uczynić go zakodować kod HTML?

To jest mój skrypt:

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

    }); 
}); 

Dzięki

+0

Możesz pisać kod JavaScript gdzie utworzyć kendoUI krata? – nemesv

+0

to jest mój skrypt: $ (document) .ready (function() { $ ("# calendrierMatch"). KendoGrid ({ }); }); – dtjmsy

Odpowiedz

26

KendoUI Siatka automatycznie koduje zawartość sieci, dlatego można uzyskać tekst <input type= ... zamiast rzeczywistej Controll wejściowego.

można wyłączyć kodowanie dla danej kolumny z użyciem encoded opcje (see documentation):

zakodowane: Boolean (default: true) określono, czy treść jest kolumna uciekł. Wyłącz kodowanie, jeśli dane zawierają znaczniki HTML.

Więc trzeba coś takiego:

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

Witaj nemesv, dziękuję za twoją radę, używam $ ("# grid"). KendoGrid() aby utworzyć moją siatkę, kolumny i dane są pobierane bezpośrednio z tabeli w widoku (z i ), w celu używać opcji encoded: false, co oznacza, że ​​za każdym razem muszę zadeklarować wszystkie kolumny tabeli w wywołaniu kendoGrid? – dtjmsy

+0

Na podstawie dokumentacji w aktualnej wersji nie ma innego sposobu na globalne wyłączenie kodowania. Obawiam się więc, że musisz podać wszystkie kolumny i wyłączyć kodowanie indywidualnie ... – nemesv

+0

Wypróbowałem najnowszą wersję beta i mogę teraz uzyskać renderowany HTML, jednak nie mogę uporządkować kolumn, nawet jeśli sortable: true option, widzę ikony w górę/w dół, ale kiedy klikając nic nie wynik, widziałeś coś podobnego? – 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

w modelu wiązania siatki kendo Razor strony HTML użyć tego kodu

@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>); 
})