Telerik Product and Version
|
|
|
Supported Browsers and Platforms
|
browser support all browsers supported by RadControls
|
|
Components/Widgets used (JS frameworks, etc.)
|
|
PROJECT DESCRIPTION
This code library demonstrates how to style all cells in a column in such manner, so a percentage value could be presented as a progress bar within the cell.
This data visualization technique, despite its simplicity, allows the user to easily interpret the percentage values through the column:
Using GridTemplateColumn
With GridTemplateColumn you could accomplish the progress-bar-like column from the markup with CSS and some adjustments for the width and the text position for each cell. Following is a very simple example for styling a GridTemplateColumn as a progress-bar-like column (where "value" is a number between 0 and 100):
And the CSS:
Using GridBoundColumn or GridNumericColumn
For getting the same result with
GridBoundColumn or
GridNumericColumn, the server-side
OnPreRender event of the RadGrid should be handled, where the
AddPercentageBarToColumn() method should be called with correct parameters for the columns for which we want to display the progress bar.
In the attached sample page you could find the three methods that you must include in your project. Those three methods are
AddPercentageBarToColumn(),
AddPercentageBarToFooter() (if a progress bar will be displayed in the footer) and the
InterpolateColors().
Please note that the same CSS classes (as in the GridTemplateColumn approach) should be used.
AddPercentageBarToColumn() and AddPercentageBarToFooter() methods
Both methods accept four parameters:
- GridTableView object
- Column's UniqueName
- HEX color for 0% (StartColor)
- HEX color for 100% (EndColor)
When AddPercentageBarToColumn() is called, all items in the GridTableView will be traversed and a progress bar will be added to each cell in the specified column. Depending on the values in the cells, an interpolated color between the StartColor and the EndColor will be set as a background of the progress bar.
InterpolateColors() method
This method interpolates two colors by a given percentage and returns a HEX color as a string. It accepts three parameters:
- Numeric value between 0 and 100
- HEX color for 0% (StartColor)
- HEX color for 100% (EndColor)
InterpolateColors() method could also be used with the
GridTemplateColumn approach as demonstrated in the following example: