Grid row format variable in dataset?

[Tim]

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!

[Tim]

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

http://stackoverflow.com/questions/22369016/formatting-of-values-in-dynamic-kendo-grid

 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]

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.

Regards,
Atanas Korchev
Telerik

 

 

[Tim]

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 kendo.data.DataSource({
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.    }
19.});
20.
21.//create Kendo Grid object using combined dataset
22.jQuery('#kGrid').kendoGrid({
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
33.});

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.