add css class to report rows or cells

Hi,

Is it possible to add css class to report grid rows or cells based on condition check? We need to check a condition and for example set background color for rows.

Any suggestion?

Thanks

Topic

[Yevhen ShyshkinParticipant]

Hello.

The easiest way to do that is to pass column called “row_class_name” to frontend – in this case this column value will be added to grid row class, so you can apply your own styles to this row. If you need to apply this styles to some specific grid – you can write it right into grid configuration, if no – you need to listen to datagrid event (probably, PreBuild) and alter grid configuration there.

Example:

YAML

datagrid: grid: source: type: orm query: select: - "'test' as row_class_name" properties: row_class_name: ~

1 2 3 4 5 6 7 8 9

datagrid:     grid:         source:             type:         orm             query:                 select:                     - "'test' as row_class_name"         properties:             row_class_name: ~

And result:

XHTML

<tr class="test row-click-action">...</tr>

1	<tr class="test row-click-action">...</tr>

If you need to do something more sophisticated that includes JS code – you should add JS datagrid builder and customize grid from frontend side there (example of datagrid builder module).

[Ahmad GolzarParticipant]

Dear Yevhen,

Thank you so much for your perfect reply. The “row_class_name” solution is exactly what we were looking for and should cover our needs.

Thanks again,
Ahmad

[farzam.sabetiParticipant]

Hi

I was looking to add css class to report grid rows based on condition check in oro version 3.1. I did what you said but, that did not work. I expected to see the class name on the <tr> … </tr> tag but, nothing happened.

Can you please guide me?

Thanks

[Hryhorii HrebiniukParticipant]

Hi,

Turned out, there’s bug. We’ll fix it.

Here’s patch that fixes the issue:

diff

Index: package/platform/src/Oro/Bundle/DataGridBundle/Resources/public/js/datagrid/row.js <+>UTF-8 =================================================================== --- package/platform/src/Oro/Bundle/DataGridBundle/Resources/public/js/datagrid/row.js (date 1557226077000) +++ package/platform/src/Oro/Bundle/DataGridBundle/Resources/public/js/datagrid/row.js (date 1557233666000) @@ -76,8 +76,9 @@ /** * @inheritDoc */ - constructor: function Row() { - Row.__super__.constructor.apply(this, arguments); + constructor: function Row(options) { + _.extend(this, _.pick(options, ['rowClassName', 'themeOptions', 'template', 'columns'])); + Row.__super__.constructor.call(this, options); }, /** @@ -87,7 +88,6 @@ // itemView function is called as new this.itemView // it is placed here to pass THIS within closure var _this = this; - _.extend(this, _.pick(options, ['themeOptions', 'template', 'columns'])); // let descendants override itemView if (!this.itemView) { this.itemView = function(options) { @@ -206,7 +206,14 @@ }, className: function() { - return this.model.get('row_class_name'); + var classes = []; + if (this.rowClassName) { + classes.push(this.rowClassName); + } + if (this.model.get('row_class_name')) { + classes.push(this.model.get('row_class_name')); + } + return classes.join(' '); }, /** Index: package/platform/src/Oro/Bundle/DataGridBundle/Resources/public/js/datagrid/body.js <+>UTF-8 =================================================================== --- package/platform/src/Oro/Bundle/DataGridBundle/Resources/public/js/datagrid/body.js (date 1557226077000) +++ package/platform/src/Oro/Bundle/DataGridBundle/Resources/public/js/datagrid/body.js (date 1557233468000) @@ -83,7 +83,7 @@ model: model, collection: this.filteredColumns, columns: this.columns, - className: this.rowClassName + rowClassName: this.rowClassName }; this.columns.trigger('configureInitializeOptions', Row, rowOptions); return new Row(rowOptions);

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55

Index: package/platform/src/Oro/Bundle/DataGridBundle/Resources/public/js/datagrid/row.js <+>UTF-8 =================================================================== --- package/platform/src/Oro/Bundle/DataGridBundle/Resources/public/js/datagrid/row.js (date 1557226077000) +++ package/platform/src/Oro/Bundle/DataGridBundle/Resources/public/js/datagrid/row.js (date 1557233666000) @@ -76,8 +76,9 @@          /**           * @inheritDoc           */ -        constructor: function Row() { -            Row.__super__.constructor.apply(this, arguments); +        constructor: function Row(options) { +            _.extend(this, _.pick(options, ['rowClassName', 'themeOptions', 'template', 'columns'])); +            Row.__super__.constructor.call(this, options);          },          /** @@ -87,7 +88,6 @@              // itemView function is called as new this.itemView              // it is placed here to pass THIS within closure              var _this = this; -            _.extend(this, _.pick(options, ['themeOptions', 'template', 'columns']));              // let descendants override itemView              if (!this.itemView) {                  this.itemView = function(options) { @@ -206,7 +206,14 @@          },          className: function() { -            return this.model.get('row_class_name'); +            var classes = []; +            if (this.rowClassName) { +                classes.push(this.rowClassName); +            } +            if (this.model.get('row_class_name')) { +                classes.push(this.model.get('row_class_name')); +            } +            return classes.join(' ');          },          /** Index: package/platform/src/Oro/Bundle/DataGridBundle/Resources/public/js/datagrid/body.js <+>UTF-8 =================================================================== --- package/platform/src/Oro/Bundle/DataGridBundle/Resources/public/js/datagrid/body.js (date 1557226077000) +++ package/platform/src/Oro/Bundle/DataGridBundle/Resources/public/js/datagrid/body.js (date 1557233468000) @@ -83,7 +83,7 @@                      model: model,                      collection: this.filteredColumns,                      columns: this.columns, -                    className: this.rowClassName +                    rowClassName: this.rowClassName                  };                  this.columns.trigger('configureInitializeOptions', Row, rowOptions);                  return new Row(rowOptions);

[farzam.sabetiParticipant]

That works correctly. Thank you so much.

[Author]

Replies