IdsDataGrid: Apply the background color to the expandable area

[aparimalla]

Is your feature request related to a problem or use case? Please describe.

We have a requirement to change the background Color of the expanded area in the ids-expandable-data grid.

Describe the solution you'd like

How to apply background color to the expandable area in ids-expandable-data grid as shown in below snapshot.

Describe alternatives you've considered

I tried adding style to a div in the template (see the code below), but it didn't work (background-color is not filled out; most likely ids-data-grid-expandable-row padding was applied). The background color was applied as in the below snapshot. I also tried ng-deep, host, and root, but none of these worked very well.

 <template id="expandable-row-tmpl">
   <div style="background-color: #f5f5f5">
    </div>
</template>

[tmcconechy]

@aparimalla is there any reason to change the color? Just wondering the use case as it does introduce worse visual color contrast

[aparimalla]

Hi @tmcconechy, the primary reason for changing the background color is to distinguish between the row and the expanded region.

[janblankenburgh]

Hi @tmcconechy,

probably the first reason is because our current GWT implementation has a different color for the extended area. Functionally, the reason to give the different color is to explicitly show/emphasis the area.

In below image you see both variations (the top one is based on current capabilities so still shows white borders). I'm not a UI expert, so if you think we better stick with leaving the extended area the same color as the other rows, we can do so.

[inforandy]

IDS-2531 for design