How can I define a template for only one column in a dynamic grid

[Jason]

I have a kendo grid with a bunch of columns, I know a few default columns but the rest are dynamic as the user can define what data he wants to see in the resulting grid.

Is there a way to make a cell in each row a link using values from multiple columns?

<a href="view.aspx?id=SomeID">SomeValue</a>

SomeID and SomeValue would come from different columns in the row.  

It seems to me I have to either define no templates or all templates for the columns but it would be nice to define column[0].template or something like that.

If it is not possible to make that column a link, is it possible to link a javascript event to clicking on a field in the first column?  I would think that is the same as defining a template but maybe it is different.  I'd want the mouse cursor to change on that cell as well so the user would know it is clickable.

[Dimiter Madjarov]

Hello Jason,

Yes, it is possible to specify a template for each column individually using the columns.template configuration option. In your case, it should look similar to this:

template: '<a href="view.aspx?id=#=SomeID#">#=SomeValue#</a>'

Here you can find more detailed information about Kendo Templating in the Documentation and in the Demos.

Regards, Dimiter Madjarov
the Telerik team

[Jason]

Using that, wouldn't I have to define each column?  I only need to define a template for column[0] the hyperlink column.

[Dimiter Madjarov]

Hi Jason,

Could you show some sample code of your scenario? It will help us to understand your exact needs and assist you further.

Have a great day!

Kind regards,
Dimiter Madjarov
the Telerik team

[Jason]

On my aspx page I have this java script:

var DataResults = new kendo.data.DataSource({

            pageSize: 10,

            transport: {

                read: {

                    url: "../../WebServices/QueryViewerV2WebService.asmx/QueryViewerV2GetResults",

                    dataType: "json"

                }

            }

        });

The QueryViewerV2GetResults returns a json string with multiple columns.  I know some of the first columns but the number of columns is dynamic.

The next bit of code defines the grid:

$("#grid").kendoGrid({

           height: 405,

           pageable: true,

           resizable: true,

           sortable: {

               allowUnsort: false

           },

           dataSource: DataResults,

           filterable: true

       });

 

       DataResults.fetch(function () { ... });

The fetch portion has code in it but it just hides and shows divs based on whether the result set is empty or not.

Is it possible to define a template for just the first column?  Or is it possible to loop through the returned Dataset and define the templates on the fly? 

[Dimiter Madjarov]

Hi Jason,

 
In this case I can suggest you to create the Grid after the dataSource has loaded the data.
e.g.

var dataSource = new kendo.data.DataSource({
   ...
});

dataSource.one("change", function (e) {
    var item = this.data()[0].toJSON();
    var columns = [];

    for (var field in item) {
        columns.push({ field: field });
    }
    columns[0].template = "<a href='view.aspx?id=#=SomeID#'>#=SomeValue#</a>";

    // initialize the Grid with the generated columns
    initGrid(columns, this);
});

function initGrid(columns,dataSource) {
    $("#gridID").kendoGrid({
        dataSource: dataSource,
        pageable: {
            refresh: true,
            pageSizes: true,
        },
        sortable: true,
        groupable: true,
        columns: columns
    });
}

dataSource.read();

All the best,
Dimiter Madjarov
the Telerik team

[Jason]

Thanks!  That worked great.

I added:

if (this.data()[0] == undefined)

    return;

 

var item = this.data()[0].toJSON();

because sometimes the data source has no records and the toJSON() line would throw an error.