Custom column not working

[Federico]

I'm trying to fill a column of the my grid with images from the Content/images folder of the project, but for some reason the column doesn't display any content.

Since maybe I wrote the path in a wrong way, I tried to follow an example of the web with only some text, without any luck.

This is my custom column:

    columns.Template(@<text>
       custom content here, which is not related to the data
       </text>).Title("Column Title");

I'm using Ajax binding, and because of that columns.ClienteTemplate is not an option (I need to use aggregates, which is not possible when Server binding.

This is my data source (abreviatted):

    .DataSource(dataSource => dataSource
              .Ajax()
              .Read(read => read.Action("Products_Read", "Home"))
              )

 Any help will be really appreciated.

[Greg]

We've implemented our grid using AJAX and are also using the "clientTemplate" property. Here's an example from our grid:

Html.Kendo().Grid(Of grid_model)() _
  .Name("myGrid") _
  .DataSource(Function(d) d.Ajax().Sort(Sub(sort) sort.Add("some_number").Ascending()).ServerOperation(True).PageSize(pageSize).Read(Function(read) read.Action("WebMethod", "Controller").Data("myApp.WebMethod.gridColumnFormatting.moduleMethod"))) _
  .Columns(Sub(columns)
           columns.Bound(Function(c As wh_get_pro_list) c.flag).ClientTemplate("#= myApp.WebMethod.gridColumnFormatting.moduleMethod.flag(flag)#").Title(" ") _
                                                                     .Width(42).Sortable(True).Filterable(True).Groupable(False).HtmlAttributes(New With {.class = "CenterCellContent"})
.Events(Function(evnt) evnt.DataBound("myApp.WebMethod.gridColumnFormatting.onGrid_DataBound").Change("myApp.WebMethod.gridColumnFormatting.mainGridEvents.onChange")) _
.Pageable(Function(pg) pg.Refresh(True).Input(True).PageSizes(True)) _
.Resizable(Function(resizable) resizable.Columns(True)) _
.Sortable() _
.ClientDetailTemplateId("childID") _
.Groupable() _
.Filterable(Function(fltr) fltr.Messages(Sub(msg)
                                                 msg.Info("Show rows where")
                                         End Sub)) _
.Scrollable(Function(scroll) scroll.Height("auto")) _
.Selectable(Function(selectable) selectable.Mode(GridSelectionMode.Multiple)) _
.Render()

 

Not sure if this helps at all.

 

[Federico]

Thanks, Greg. I'll try to learn from your example as much as I can.

I figured out a way to display images in the grid, but I'd like to know if this is the standard way of doing it or this is beyond complicated without much sense:

columns.Template(@<text>custom content</text>).ClientTemplate("<img src=" + "../Images/Logo.png" + " />").Title("Column Title");

This renders the image, not the text between the <text> tags.

[Greg]

I'm not sure if it's the best way to deal with graphics in the column but it is the way we are doing it. ;)

In the JavaScript module that handles the data binding we replace values with their respective graphical equivalents:

myApp.namespace("myApp.WebMethod.gridColumnFormatting");
myApp.WebMethod.gridColumnFormatting = (function () {
    var priority, flag, comment, forward, onGrid_DataBound, getStateColImage;

    priority = function (priority) {
        return priority != 0 ? "<img src = '" + _relativePath + "/Content/Images/List/high_priority_16_red.png' alt='Y' title='High priority'/>" : "";
    },
    flag = function (flag) {
        return flag != 0 ? "<img src = '" + _relativePath + "/Content/Images/List/high_priority_16_red.png' alt='Y' title='High priority'/>" : "";
    },
    comment = function (comment, proforma_number) {
        return comment != 0 ? "<img id='proforma-" + proforma_number + "-comments' src = '" + _relativePath + "/Content/Images/List/comment_16_darkblue.png' alt='Y' title='' class='comments-mouseover' />" : "";
    },
    forward = function (forwarded, proforma_number) {
        return forwarded != 0 ? "<img id='proforma-" + proforma_number + "-forwarded' src = '" + _relativePath + "/Content/Images/List/Forwarded_20.png' alt='Y' title='Number of forwards: " + forwarded + "' />" : "";
    },
    onGrid_DataBound = function (ev) {
    },
    getStateColImage = function (state, substate) {
        var html;
        $.ajax({
            method: "POST",
            url: _relativePath + "/myController/GetStateColImage",
            data: { state: state, substate: substate },
            async: false,
            success: function (data) { html = data; },
            error: function (passParams) { }
        })
        return html;
    }
    return {
        priority: priority,
        flag: flag,
        comment: comment,
        forward: forward,
        onGrid_DataBound: onGrid_DataBound,
        getStateColImage: getStateColImage
    };
}());

[Maria Ilieva]

Hello,

Either using Template column with mage in it or the appraoch you presented in your last post are good approaches for achieving the required functionality.
You can see this thread for more information:
http://stackoverflow.com/questions/25014428/kendo-grid-image-column

Regards,
Maria Ilieva
Telerik