Question

我想在kendo网格中填充动态图像。我得到了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");

“icon”包含图像的路径。现在，我能够打印路径，但我真的不知道如何根据该路径显示图像。任何帮助都非常感谢。

Answer 1

你可以尝试：

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

Answer 2

尝试这可能是有用的

@(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")
          ))

)

在kendo网格中显示动态图像

2 个答案: