Remove Headers from Grid when in RowRenderingMode Vertical

[Conor]

Hi,

I've got an SfGrid in a Blazor project and am struggling to make the equivalent of the column headers disappear when in RowRenderingMode Vertical. 

I followed this post: https://www.syncfusion.com/forums/158326/remove-header-row-completely, which works in normal row mode, but this doesn't work in Vertical mode. 

The result is I have a big chunk of empty space on each row when I really just want the row content to fill the whole space, since I have no HeaderText.

Thanks in advance.

[Conor]

Sorry I didn't ask a question!

Is it possible to remove the row based "headers" on the left hand side of each row when using a grid with verical RowRenderingMode so that the row content fills the row?

[Sarveswaran Palani]

Hi Conor,

Greetings from Syncfusion support.

From your query, we found that you want to remove the header content in the vertical row rendering mode of our grid. While it is not currently possible to remove or hide the header content from the grid, we understand that this may be an important feature for your use case. We would like to assure you that we value your feedback and will take it into consideration for future updates to our product. In the meantime, please let us know if there are any other ways, we can assist you or if you have any other questions or concerns.

Regards,
Sarvesh

[Glenn Storch]

I would like to remove the column headers and have my row content span the full width in RowRenderingMode Vertical as well, any update on this feature?

[Prathap Senthil]

Based on your requirements, we suggest using the following CSS customization to achieve your goal. Please refer to the code snippet and sample below for your reference.

 

<style>

    .e-bigger.e-grid.e-row-responsive .e-gridcontent td::before{

        content:none;

    }

 

 

 

    .e-bigger .e-grid.e-row-responsive .e-gridcontent td[data-cell], .e-bigger .e-grid.e-row-responsive .e-summarycontent td[data-cell], .e-bigger.e-grid.e-row-responsive .e-gridcontent td[data-cell], .e-bigger.e-grid.e-row-responsive .e-summarycontent td[data-cell] {

        padding-bottom: 5px;

        padding-top: 5px;

        padding-left: 5px;

        width:100%;

 

    }

 

</style>

Sample:
https://blazorplayground.syncfusion.com/embed/LNBzMWtdgoJRGgEf?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

[Glenn Storch]

Thank you, I just copy pasted this style code and it worked perfectly

[Prathap Senthil]

Thanks for the update, We are happy to hear that the provided information was helpful. We are closing the thread now.