Replace cell value in specific column

1 Answer 4511 Views
Grid
Luke
Top achievements
Rank 1
Luke asked on 13 Jul 2016, 09:14 AM
In the datasource of my kendo grid, there is a column which contains numbers as values. Consider them as a code. So is there a way to replace those numbers with a string which is provided with a property file or a json when creating the grid?

I can use a function to replace value before creating the grid, but then again it is a costly operation to replace in that manner if there are many records. If there is some other way to set the string as a title when hover over cell, that would be helpful too. 

1 Answer, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 15 Jul 2016, 07:24 AM
Hi Luke,

There are three possible ways to manipulate the Grid data - before, during, or after it is rendered inside the widget table.

1) use a parse function to change the data before it is used by the Kendo UI DataSource instance of the Grid

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.parse

2) use a column template to change how the data is displayed in the Grid cells

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.template

3) use the Grid's dataBound event to change how the data is displayed after it has been rendered. The dataBound event will also allow you to modify the HTML rendering of the Grid table cell elements (which is not possible with a column template, but is possible with a row template)

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-dataBound

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-rowTemplate
 
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-altRowTemplate

Here is one more demo that you may find useful if you decide to follow option (3):

http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/style-rows-cells-based-on-data-item-values

Finally, here is how to use a Kendo UI Tooltip to show additional information when hovering over Grid cells:

http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/grid-with-kendo-ui-tooltip

Regards,
Dimo
Telerik by Progress
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
Luke
Top achievements
Rank 1
commented on 25 Jul 2016, 11:38 AM

Great. Another question. I have a 'number' type column in my grid. Is there any way to list min/max/ average/ sum/ count properties of the column, in the 'column menu' ?
Dimo
Telerik team
commented on 25 Jul 2016, 12:19 PM

Hello Luke,

I am afraid the column menu does not provide such a functionality. Please display column aggregates in the footer row:

http://demos.telerik.com/kendo-ui/grid/aggregates

Regards,
Dimo
Telerik by Progress
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
Mark
Top achievements
Rank 1
commented on 20 Feb 2018, 09:29 PM

Dino, is there a way to replace the text or blank out the text in "Grouped" rows?  Meaning if I am grouping a grid on Year and Employer Code, the user does not want to see the data repeated in the grid.  They see the year/code in the Grouped Header, they just want to see the dollar amounts we aggregate and not have the year/employer code repeat for each grouped row.  Hope that makes sense.  Thanks.
Stefan
Telerik team
commented on 22 Feb 2018, 12:29 PM

Hello, Mark,

Based on the description, I can assume that the Grid should remove the column from the table if it is grouped on it.

If this is correct, I can suggest hiding the grouped columns in the group event of the Grid:

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/group

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/showcolumn

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/hidecolumn

I made an example demonstrating this:

https://dojo.telerik.com/uZidE

Then based on the application logic the column can be added to the Grid using the shownColumn method.


Regards,
Stefan
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Mark
Top achievements
Rank 1
commented on 22 Feb 2018, 03:45 PM

Close but not quite.  They don't mind the column being there, they just don't want to see repetitive data.  I found some jquery code to blank out the field using a template.  Thanks though.
Tags
Grid
Asked by
Luke
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Share this question
or