2013-05-02 45 views
3

我想在劍道網格中填充動態圖像。 我正在獲取json數據。在劍道網格中顯示動態圖像

而且我下面的代碼

var grid = $("#timeSegmentGrid").kendoGrid({ 
    //var icon=''; 
     dataSource: { 
      transport: { 
       read: function (options) { 
        getTimeSegmentList("", onSuccess, null); 
        function onSuccess(responseData) { 
         if (responseData.segments != null) 
          options.success(responseData.segments); 
         else 
          options.success([]); 
        } 
       } 
      }, 
      pageSize: 5 
     }, 
     pageable: { 
      input: true, 
      numeric: false, 
      pageSizes: false, 
      refresh: true 
     }, 
     toolbar: kendo.template($("#template").html()), 
     columns: [ 
      { field: "display_name", title: "&{'Name'}" }, 
      { field: "display_order", title: "&{'Display Order'}" }, 
      { field: "icon", 
       title: "Icon" 
      } 
     ] 
    }).data("kendoGrid"); 

「圖標」 包含圖像路徑。現在,我可以打印路徑,但我真的不知道如何根據該路徑顯示圖像。任何幫助,高度讚賞。

回答

8

你可以嘗試:

columns : [ 
    { 
     field: "icon", 
     title: "Icon", 
     template: '<img src="#= icon #" alt="image" />' 
    } 
] 
1

嘗試,這可能是其有益

@(Html.Kendo().Grid<TelerikMvcAppCombo.Models.ImageModel>() 
.Name("grdImageModel") 
.Columns(columns => 
{ 
    columns.Bound(c => c.IMAGESIZE_ID).ClientTemplate("<input type='checkbox'  value =#IMAGESIZE_ID# />"); 
    columns.Bound(c => c.IMAGESIZE_NAME).Width(140); 
    columns.Bound(c => c.IMAGESIZE_DESC).ClientTemplate("<img src='" + 
    Url.Content("~/Images/") + "#=IMAGESIZE_NAME#'/>"); 
    columns.Bound(c => c.created_by); 
    columns.Bound(c => c.created_date); 
    columns.Bound(c => c.modified_by); 
    columns.Bound(c => c.modified_date); 
}) 
.HtmlAttributes(new { style = "height: 580px;" }) 
.Scrollable() 
.Groupable() 
.Sortable() 
.Pageable(pageable => pageable 
    .Refresh(true) 
    .PageSizes(true) 
    .ButtonCount(10) 
) 
.DataSource(datasource => datasource 
    .Ajax() 
    .Read(read => read 
      .Action("GetData", "Image") 
     )) 

)