Kendo Mvc Grid Template Column

6 posts, 0 answers
  1. Jason
    Jason avatar
    1 posts
    Member since:
    Sep 2011

    Posted 14 Jun 2012 Link to this post

    I'm testing out some conversion of MVC grid to Kendo grid, and i'm running into several issues with template columns.  Am I doing something wrong here?

    In some scenarios, I get "undefined" showing in the column, others I'm getting a javascript error "cannot call kendoSortable
    on undefined".  I assume they're both the same issue related to the rendering of the column.


    @(Html.Kendo().Grid(Model)
        .Name("Grid")
        .Columns(columns =>
                     {
                         columns.Template(o => Html.ActionLink(o.ProductID.ToString(), "Index", "Home"));
                         
                         columns.Bound(p => p.ProductName);
                         columns.Bound(p => p.UnitPrice);
                         columns.Bound(p => p.UnitsInStock);
                     })
        .Groupable()
        .Pageable()
        .Sortable()
        .Scrollable()
        .Filterable()
        .DataSource(dataSource => dataSource
            .Ajax()
            .Read(read => read.Action("Products_Read", "Grid"))
        )
    )

    Thanks!
    Jason
  2. ben
    ben avatar
    27 posts
    Member since:
    Jun 2008

    Posted 14 Jun 2012 Link to this post

    Hello Jason,

    I ran into the "kendoSortable" javascript error as well.  I was using jQuery 1.7.1 and upgrading to 1.7.2 fixed the issue for me.


    Telerik,

    For the template column "column.field" will be undefined, and the code below will return "undefined" for jquery 1.7.1 but for 1.7.2 it will return the jquery object, which allows the code to continue.

    $(this).attr("data-" + kendo.ns +"field", column.field)

    The code is taken from the _sortable: function() { ...} in kendo.web.js.

            _sortable: function() {
                debugger;
                var that = this,
                    columns = that.columns,
                    column,
                    sortable = that.options.sortable;

                if (sortable) {
                    that.thead
                        .find("th:not(.k-hierarchy-cell,.k-group-cell)")
                        .each(function(index) {
                            column = columns[index];
                            if (column.sortable !== false && !column.command) {
                                $(this).attr("data-" + kendo.ns +"field", column.field).kendoSortable(extend({}, sortable, { dataSource: that.dataSource }));
                            }
                        });
                }
            },


    Hope this helps.

    Ben
  3. Michael Pullella
    Michael Pullella avatar
    16 posts
    Member since:
    Jul 2010

    Posted 21 Jun 2012 Link to this post

    Hi.

    Still an issue even with jquery 1.7.2. 
  4. Ashwin
    Ashwin avatar
    3 posts
    Member since:
    Jun 2012

    Posted 26 Jul 2012 Link to this post

    I'm running into the same issue with the latest version of KendoUI and jquery 1.7.2.
    Does anybody have a workaround for this?

    @(Html.Kendo().Grid(Model)
            .Name("Grid")
       .Columns(columns =>
            {
                columns.Bound(p => p.CREATEDDATE).Title("Submit Date");
    columns.Template(@<text>
                                <input type="button" class="k-button" onclick="getDetails('@item.KEY')" value="Details" />
                                </text>).HeaderTemplate(@<text></text>);
       })
       .Sortable()
    //code works fine without the following three lines. the template column returns 'undefined' when I enable the code below
       //.DataSource(dataSource => dataSource.Ajax()
            //            .ServerOperation(false)
            //.Events(events => events.Change("emptyGridFix")))
       .Scrollable(scrollable => scrollable.Virtual(false).Height(400))
    )
  5. Ashwin
    Ashwin avatar
    3 posts
    Member since:
    Jun 2012

    Posted 26 Jul 2012 Link to this post

    FYI - For anyone interested, I modified the code slightly to make it work

    @(Html.Kendo().Grid(Model)
            .Name("Grid")
       .Columns(columns =>
            {
                columns.Bound(p => p.CREATEDDATE).Title("Submit Date");
    columns.Bound(p => p.KEY)
                        .ClientTemplate("<input type='button' class='k-button' onclick=\"getDetails('#=KEY#')\" value='Details' />")
                .Title("");                
    // columns.Template(@<text>
    //                            <input type="button" class="k-//button"onclick="getDetails('@item.KEY')" value="Details" />
    //                            </text>).HeaderTemplate(@<text></text>);
       })
       .Sortable()

       .DataSource(dataSource => dataSource.Ajax()
                        .ServerOperation(false)
            .Events(events => events.Change("emptyGridFix")))
       .Scrollable(scrollable => scrollable.Virtual(false).Height(400))
    )
  6. yongkai
    yongkai avatar
    1 posts
    Member since:
    Sep 2014

    Posted 01 Jun 2020 in reply to Jason Link to this post

    @(Html.Kendo().Grid(Model)
        .Name("Grid")
        .Columns(columns =>
                     {
                         columns.Template(o => Html.ActionLink(o.ProductID.ToString(), "Index", "Home"));

                         columns.Bound(p => p.ProductName);
                         columns.Bound(p => p.UnitPrice);
                         columns.Bound(p => p.UnitsInStock);
                     })
        .Groupable()
        .Pageable()
        .Sortable()
        .Scrollable()
        .Filterable()
        .DataSource(dataSource => dataSource
            .Ajax()
            .Read(read => read.Action("Products_Read", "Grid"))
        )
    )
Back to Top