Hi,
I have a data grid that is displaying columns based on configuration stored in table and using list widget to iterate over the columns and adding TextColumn. In this case how can setup a style for a particular column header.
Regards.
Hello @Prasad Rao
Here's an example of how to do this based on the aggregated values.Imagine the following Data Grid:
First, created the styles we want to apply:
.wj-colheaders .red-header.wj-cell.wj-header { background-color: red; } .wj-colheaders .green-header.wj-cell.wj-header { background-color: green; }
We want to style the headers based on the aggregation, so in the Grid Initialize event you can do the following on a Js Node:
Once this is done you'll get the expected behaviour:
Hope it helps!
Cheers,GM
Hello @Prasad Rao,
Can you please be more specific about the conditions for styling the headers?What have you tried so far? Could you provide an example from the Wijmo library website with that behaviour being applied?
I condition is if the column is editable then I need to style them. If you look at the example oml, I have grid which only show 3 columns out of 5 based on the what columns are editable, now I want to style the header of these 3 column to a particular color for example green.
I have tried to get the columns widget id using GridAPI.GridManager.GetGridById(GridWidgetId).getColumn(ColumnBinding).widgetId and then use GridAPI.Styling.SetColumnCssClass but first one is returning undefined as widgetId but works when I try it in console.
Hi Prasad,
I have one possible approach to share for implementing your use case. The approach is outlined below:
Using the GridAPI.Styling.SetColumnCssClass API - you can either add a style class to the entire column, including the header, or exclude the header. In other words, applying the style class only to the column header cannot be achieved using the same API."
JS Snippet:
var grid = OutSystems.GridAPI.GridManager.GetGridById($parameters.GridId); //UpdatedLayout event handler grid._provider.onUpdatedLayout = function (e) { this.updatedView.raise(this, e); grid.provider._cols .filter((el) => !el.isReadOnly) // filter editable columns .forEach((el) => { document .querySelectorAll(".wj-colheaders .wj-row .wj-cell.wj-header") [el._idxVis].classList.add("grid-editable-colheaders"); // add style class to editable column headers }); };
Demo app: GridColumHeaderTask
Refer to the attached OML file with the above-mentioned implementation.
I hope this helps you!
Kind regards,
Benjith Sam
Hello Prasad,
If I understand your situation correctly, you are already storing the columns information in database where I believe are also storing information to hide or show the columns. While fetching other configurations if you also fetch hide/show attribute/element, you can use the same decide whether or not to apply the color style on column header.
Hope this helps!
Junaid