Custom column not working

5 posts, 0 answers
  1. Federico
    Federico avatar
    5 posts
    Member since:
    Feb 2016

    Posted 25 Feb Link to this post

    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.
  2. Greg
    Greg avatar
    18 posts
    Member since:
    Nov 2012

    Posted 25 Feb in reply to Federico Link to this post

    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.

     

  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Federico
    Federico avatar
    5 posts
    Member since:
    Feb 2016

    Posted 25 Feb in reply to Greg Link to this post

    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.

  5. Greg
    Greg avatar
    18 posts
    Member since:
    Nov 2012

    Posted 25 Feb in reply to Federico Link to this post

    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
        };
    }());

  6. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 29 Feb Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET MVC is VS 2017 Ready