2013-05-02 2 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") 
     )) 

) 
관련 문제