검도 UI 그리드 행에 HTML 요소를 추가 하시겠습니까?

Question

나는 여기에 내 코드의 예입니다 JSON에서가는 몇 가지 격자가 있습니다

JAVASCRIPT 나는 괜찮이

같은 것을 가지고이

var orders = [{ 
    OrderID : 10248, 
    CustomerID : "<i class='fa fa-car'></i>", 
    EmployeeID : 5, 
    OrderDate : new Date(1996, 6, 4, 0, 0, 0, 0), 
    RequiredDate : new Date(1996, 7, 1, 0, 0, 0, 0), 
    ShippedDate : new Date(1996, 6, 16, 0, 0, 0, 0), 
    ShipVia : 3, 
    Freight : 32.3800, 
    ShipName : "Vins et alcools Chevalier", 
    ShipAddress : "59 rue de l'Abbaye", 
    ShipCity : "Reims", 
    ShipRegion : "", 
    ShipPostalCode : "51100", 
    ShipCountry : "<i class='fa fa-car'></i>" 
}, { 
    OrderID : 10249, 
    CustomerID : "TOMSP", 
    EmployeeID : 6, 
    OrderDate : new Date(1996, 6, 5, 0, 0, 0, 0), 
    RequiredDate : new Date(1996, 7, 16, 0, 0, 0, 0), 
    ShippedDate : new Date(1996, 6, 10, 0, 0, 0, 0), 
    ShipVia : 1, 
    Freight : 11.6100, 
    ShipName : "Toms Spezialitäten", 
    ShipAddress : "Luisenstr. 48", 
    ShipCity : "MГјnster", 
    ShipRegion : "", 
    ShipPostalCode : "44087", 
    ShipCountry : "Germany" 
}, { 
    OrderID : 11077, 
    CustomerID : "RATTC", 
    EmployeeID : 1, 
    OrderDate : new Date(1998, 4, 6, 0, 0, 0, 0), 
    RequiredDate : new Date(1998, 5, 3, 0, 0, 0, 0), 
    ShippedDate : null, 
    ShipVia : 2, 
    Freight : 8.5300, 
    ShipName : "Rattlesnake Canyon Grocery", 
    ShipAddress : "2817 Milton Dr.", 
    ShipCity : "Albuquerque", 
    ShipRegion : "NM", 
    ShipPostalCode : "87110", 
    ShipCountry : "USA" 
}]; 


        $(document).ready(function() { 
        $("#rowSelection").kendoGrid({ 
         dataSource: { 
          data: orders, 
          pageSize: 7, 
       resizable: true, 
         }, 
       sortable: { 
          mode: "single", 
          allowUnsort: false 
         }, 
         selectable: "multiple", 
         pageable: { 
          buttonCount: 5 
         }, 
         scrollable: true, 
         navigatable: true, 
         columns: [ 
          { 
           field: "ShipCountry", 
           title: "Ship Country" , 
           width: 200 
          }, 
          { 
           field: "Freight", 
           width: 200 
          }, 
          { 
           field: "OrderDate", 
           title: "Order Date", 
           format: "{0:dd/MM/yyyy}" 
          } 
         ] 

        }); 



       }); 

,하지만 난 셀에 이미지를 추가하고 색상을 변경해야합니다. 여기 내가 필요한 사진이 있습니까?

이것은 단지 예입니다. 해당 셀에 광산 HTML 태그를 추가해야합니까?

나는 내가 그냥 테이블을 결합 할 수 있습니다 알고 있지만, 그 방법은 내가 테이블에 페이지 매김을 얻을 해달라고? 여기

내가 http://demos.telerik.com/kendo-ui/web/grid/index.html

은 어떻게 매김과 함께, 테이블에 사용자 정의 HTML을 추가하는 결합하는 데 사용한 무엇인가?

Answer 1

html을 열에 표시하려면 encoding을 해제해야합니다.

If set to true the column value will be HTML-encoded before it is displayed. If set to false the column value will be displayed as is. By default the column value is HTML-encoded. Kendo Documentation

$(document).ready(function(){ 
    $("#rowSelection").kendoGrid({ 
    //... 
    columns: [ 
     { 
      field: "ShipCountry", 
      encoded: false 
     } 
    ]   
    }); 

});