在Kendo UI Grid行中添加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
       }
    ]          
  });

}）;