Kendo Mvc Grid Template Column

[Jason]

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

[yongkai]

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

[Ashwin]

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))
)

[ben]

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

[Michael Pullella]

Hi.

Still an issue even with jquery 1.7.2. 

[Ashwin]

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))
)