This is a migrated thread and some comments may be shown as answers.

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

6 Answers 673 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jason
Top achievements
Rank 1
Jason asked on 24 Jan 2013, 12:45 AM
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.

6 Answers, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 25 Jan 2013, 10:52 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jason
Top achievements
Rank 1
answered on 25 Jan 2013, 05:54 PM
Using that, wouldn't I have to define each column?  I only need to define a template for column[0] the hyperlink column.
0
Dimiter Madjarov
Telerik team
answered on 29 Jan 2013, 10:52 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jason
Top achievements
Rank 1
answered on 31 Jan 2013, 12:20 AM
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? 
0
Dimiter Madjarov
Telerik team
answered on 01 Feb 2013, 01:31 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jason
Top achievements
Rank 1
answered on 01 Feb 2013, 08:37 PM
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. 
Tags
Grid
Asked by
Jason
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Jason
Top achievements
Rank 1
Share this question
or