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

Grid row format variable in dataset?

3 Answers 126 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 2
Tim asked on 08 May 2015, 06:34 PM

A little background first:  I am building a dashboard for our accounting department which has various metrics and actuals displayed in a Kendo UI Grid object.  I am hosting this dashboard on our company's SharePoint site and am building the datasource for the grid by combining information found in multiple SP lists using SPServices and a custom JS array join function.

My problem is that each one of these 16 rows of metrics and actuals are unique in the type of information they contain; some rows contain monetary values, some contain decimals, some contain whole numbers.  I need to find a way to format a couple columns in the grid based upon what type of information that row contains.  I know I can build some ugly and overly complex JS function to loop through each row and apply formatting based upon values found in that row, but I'd rather do something a bit more elegant with the Kendo markup if possible.

My though is this: if I stored the formatting code for each row in the SP List that becomes the JS array which I am using for the grid's datasource, could I use then somehow use this stored formatting code in the grid markup, thus eliminating the need to loop back through the grid once it has been rendered?

Thanks in advance for any input, and if I missed a related forum post please point me in the right direction!

3 Answers, 1 is accepted

Sort by
Top achievements
Rank 2
answered on 08 May 2015, 07:35 PM

Seems like using a row template is going to be my best bet:

 This example given is not very complete, however.  If anyone has specific examples/code of how this can be implemented it would be greatly appreciated.

Atanas Korchev
Telerik team
answered on 13 May 2015, 06:14 AM

Hello Tim,

You can either use the template option of a column (to set the template of a specific column) or rowTemplate (to define a template for the entire grid row). You can embed JavaScript logic inside a Kendo template which will allow you to format the column values as required. More info is available here.

Atanas Korchev
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Top achievements
Rank 2
answered on 13 May 2015, 06:20 PM

Thanks for pointing me in the right direction Atanas!

 This really was child's play once I learned how to leverage conditional formatting for the template setting in the column definitions:

01.//create grid datasource object
02.var gridDS = new{
03.    data: combined,
04.    pageSize: 30,
05.    schema: {
06.        model: {
07.            id: "measureID",
08.            fields: {
09.                measureID: { type:"string" },
10.                measurement: { type: "string" },
11.                measuredIn: { type: "string" },
12.                minTarget: { type: "number" },
13.                maxTarget: { type: "number" },
14.                actual: { type: "number" },
15.                formatCode: { type: "string" }
16.            }
17.        }
18.    }
21.//create Kendo Grid object using combined dataset
23.    columns:    [{title: "Measurement", field: "measurement",width: "20%"},
24.                {title: "Measured In", field: "measuredIn",width: "20%"},
25.                {title: "Min. Target", field: "minTarget",width: "15%", template: '#= kendo.toString(minTarget,formatCode) #'},
26.                {title: "Max. Target", field: "maxTarget",width: "15%", template: '#= kendo.toString(maxTarget,formatCode) #'},
27.                {title: "Actual", field: "actual",width: "15%", template: '#= kendo.toString(actual,formatCode) #' },
28.                {title: "Indicator", width:"25%",template: '# if( actual < minTarget ) {#  <img src="../SiteAssets/greenDot.png" alt="Exceeding Goal" title="Exceeding Goal" />     <img src="../SiteAssets/smallPlus.png" alt="Exceeding Goal" title="Exceeding Goal" />   # } else if (actual >= minTarget && actual <= maxTarget ) {#  <img src="../SiteAssets/yellowDot.png" alt="Meeting Goal" title="Meeting Goal" />     <img src="../SiteAssets/smallEqual.png" alt="Meeting Goal" title="Meeting Goal" /> #} else {#  <img src="../SiteAssets/redDot.png" alt="Below Goal" title="Below Goal" />     <img src="../SiteAssets/smallMinus.png" alt="Below Goal" title="Below Goal" /> # } #'}],
29.    dataSource: gridDS,
30.    scrollable: false,
31.    pageable: true,
32.    editable: false

I solved a couple different problems using the template setting for columns:

 1) On lines #25-27, I format each row differently by passing the value being displayed and the format code for that particular row (both of which are stored in the dataset object) to the kendo.toString() method.

2) On line #28, I use conditional formatting to display one of three different image combinations depending on whether the values are exceeding the goal, meeting the goal or are below the goal.

Asked by
Top achievements
Rank 2
Answers by
Top achievements
Rank 2
Atanas Korchev
Telerik team
Share this question