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

Implementing KPI

3 Answers 106 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Sagi
Top achievements
Rank 1
Sagi asked on 19 Jun 2012, 07:01 AM
Hi,
We are currntly evaluating KendoUI for our BI solutions.
I do have a question regurding the Grid control.
How can I implement a KPI grid ?
Cant see any cellrenderer event I could attach to in order to have full control on a spesific cell.
We have our on KPI engine which decides on the style of each on of the cells in the grid.
Do you have such a capability ?

Thx
Sagi Karni
Intel Corp.

3 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 19 Jun 2012, 02:37 PM
Hello Sagi,

In order to control the way a single cell in Kendo UI Grid is rendered, you could set a specific template to the grid columns. Also, there is a rowTemplate configuration option, which can be used to customize the presentation of all cells. 

I hope this information helps.

Regards,

Iliana Nikolova
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Sagi
Top achievements
Rank 1
answered on 25 Jun 2012, 06:14 AM
Sorry I still dont get how can i determine in runtime that a spesific cell should be colored in red.
Please take a look at jqxGrid at http://www.jqwidgets.com/jquery-widgets-demo/#demos/jqxgrid/defaultfunctionality.htm  (first sample)
you can see that they have cellsrenderer function that is being invoked for every cell.

DO you have something similar ?

Thx
0
Iliana Nikolova
Telerik team
answered on 26 Jun 2012, 11:03 AM
Hello Sagi,

You could achieve this using rowTemplate and some JavaScript code inside this template to check the conditions. For example, the following code snippet could be used to set a red background-color to all of the cells in the grid from this online demo with rating under 4.3:
<script id="rowTemplate" type="text/x-kendo-tmpl">
   <tr>
      <td><img src="${ BoxArt.SmallUrl }" alt="${ Name }" /></td>
      <td>${ Name } </td>
      # if (AverageRating < "4.3") { #
        <td style="background-color: red;">
      # } else { #
        <td>
      # } #
       ${ AverageRating }
        </td>
   </tr>
</script>

For convenience, I created a simple project which illustrates such approach in action.

 

Greetings,
Iliana Nikolova
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Sagi
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Sagi
Top achievements
Rank 1
Share this question
or