Datagrid: not able to style row template when using rowTemplateComponent

[whernebrink]

Describe the bug When having an expandable row which should display a custom component, it seems to be required to also have rowTemplate set. When setting this, your component will be put inside a div with a class with a class of datagrid-cell-layout applied to it, which will have display: table-cell, which you cannot override.

const gridOptions = {
  rowTemplateComponent: SomeComponent,
  rowTemplate: '<div class="this-class-for-custom-styling-will-do-nothing"></div>'
}

I've tried adding a class to it (like the example above), but it will not be applied because the innerHtml is overwritten by the following lines in soho-datagrid.component.ts:

To Reproduce Steps to reproduce the behavior:

1. Go to this stackblitz
2. Click on the + to expand the row
3. Inspect the DOM
4. You will now see a div with class datagrid-cell-layout and not the one specified for the rowTemplate

Expected behavior

1. I'd expect not even having to provide the rowTemplate to start with. Is this really needed? If empty, can't the ids-component handle it, create an unstyled div or something i.e. not apply the datagrid-cell-layout class on it?
2. When having a rowTemplate I'd expect it to be used, i.e. The element with its classes and/or inline styles should be respected.

Version

• ids-enterprise-ng: 13.0.0

Screenshots Display issue of dynamic component, which I want to take full-width, inside expandable row:

Platform

• OS Version: OSX
• Browser Name n/a
• Browser Version n/a

Thanks!

[whernebrink]

Just found out that the datagrid-cell-layout is actually applied to my component (which selector is not present but replaced by this div with that class - which was confusing for me). Atleast I can do the following as a workaround:

:host {
  display: block !important;
}

Here one can see my component selector is nowhere to be seen, and the class datagrid-cell-layout is applied to a div, wrapping my component's content:

[tmcconechy]

As far as i know using the :host is the "angular" way to do it. So think given that works its not only a workaround but possibly the only solution...

CC @EdwardCoyle

[tmcconechy]

Could also try something like this https://github.com/infor-design/enterprise-ng/pull/1219/files#diff-7f85d5012fca5a7292c691d2d9b94cec33088a0b107db6c2aaad25bdc743b36cR18

[whernebrink]

@tmcconechy, well the somewhat non-intuitive thing is that I provide the following on my datagrid options:

{ 
  rowTemplateComponent: SomeComponent,
  rowTemplate: '<div class="some-class"></div>'
}

And what i get in the markup is a "merge" of the rowTemplate (actually not - another div with class datagrid-cell-layout) and my component (my component becomes a div, i.e. it no longer has an element selector one could target with e.g. ViewChild or css).

Given the datagrid options, I think I would expect something like this:

<div class="some-class">
   <my-expandable-row></my-expandable-row>
</div>

and not:

<div class="datagrid-cell-layout" _nghost-hly-some-magic="">
  <h1>My expandable row component content</h1>
  <p>More of my component's content</p>
</div>

If that makes sense?

[tmcconechy]

yeah i guess that does.. but given the examples we would have to figure out some way to make this not a breaking change. can you put the <div class="datagrid-cell-layout"> in your SomeComponent instead?

[whernebrink]

Nah, it doesn't make any difference. I will still end up with my host as a div with that class, followed by what ever I have in my component:

The highlighted row is my component, as a div with the class (by enterprise-ng). The div below I added in my component with the datagrid-cell-layout class to it.

[tmcconechy]

Ok we will have to investigate this one

[whernebrink]

@tmcconechy that's great, however it's not a current blocker since I can do the display: block !important, but I think it would be good for the framework to have it looked at, when there is time... This ticket could atleast help anyone else running in to the same issues. :)

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contribution.

[github-actions[bot]]

This issue was closed because it has been inactive for 14 days since being marked as stale.