Kendo Mvc Grid Template Column
2 Answers 3004 Views
Jason
Top achievements
Rank 1
Jason asked on 14 Jun 2012, 12:57 PM
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
@(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"))
    )
)
- by
yongkai
Top achievements
Rank 1
on 02 Jun 2020, 01:27 AM

2 Answers, 1 is accepted

Sort by
0
ben
Top achievements
Rank 1
answered on 14 Jun 2012, 02:49 PM
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
Hi.

Still an issue even with jquery 1.7.2. 
- by
Michael Pullella
Top achievements
Rank 1
on 21 Jun 2012, 02:19 PM
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))
)
- by
Ashwin
Top achievements
Rank 1
on 26 Jul 2012, 01:42 PM
0
Ashwin
Top achievements
Rank 1
answered on 26 Jul 2012, 02:39 PM
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))
)
Tags
Grid
Asked by
Jason
Top achievements
Rank 1
Answers by
ben
Top achievements
Rank 1
Ashwin
Top achievements
Rank 1
Share this question
or