Hiding column rows

[David Price]

Hello,

If you auto-generate the grid columns at runtime

<ej:Grid ID="OrdersGrid" runat='server' >                                          

                                            

            <EditSettings AllowEditing="True"></EditSettings>

            <ToolbarSettings ShowToolbar="True" ToolbarItems="edit,update,cancel"></ToolbarSettings>

                                           

 </ej:Grid>

The first row will be the auto-generated column names. How can I hide the first row?

[Thavasianand Sankaranarayanan]

Hi David, 

Thanks for contacting Syncfusion support. 

As per your given details we suspect that you want to hide the headers in Grid. So, we suggest you to follow the below code example to hide the Grid header. 

Refer the below code example. 

<style type="text/css"> 

 

             .e-grid .e-gridheader { 

                 display: none !important; 

            } 

 

</style> 

Refer the screen shots: 

Without headers in Grid: (if we apply the above solution then we get the Grid without the header) 

 

With Grid header: 

 

We have prepared a sample and it can be downloadable from the below location. 

Sample: https://www.syncfusion.com/downloads/support/forum/138142/ze/SyncfusionASPNETApplication2_(4)-706286131.zip 

If we misunderstood your query then please get back to us. 

Regards, 

Thavasianand S. 

[David Price]

Thank you that is great. How can I also hide the last row in the grid?

[Manivannan Padmanaban]

Hi David, 

Thanks for the update. 

Query: How can I also hide the last row in the grid? 

 

Based on your query we suspect that you want hide the pager information in the grid, But if we hide the pager we are unable to switch to other pages instead of that you can set the the allowPaging property as “false”. 

 

If we misunderstood your query please get back to us, with the following details. 

1. Share the exact requirement.
2. Confirm whether are you want to remove the last row(i.e. last record ) in the grid. If yes, share the details.

 

Provided details help us, to achieve your requirement as early as possible. 

Regards, 

Manivannan Padmanaban. 

[David Price]

Hello,

In my grid, I have the last row which contains the database ID.  They are needed for when I save the data back to the database.

The ID row will always be the last row in the grid. I would like to hide them from showing on the webpage.

[Manivannan Padmanaban]

Hi David, 

To hide the last row in the grid we suggest you to use the below code example, 

  <ej:Grid ID="Grid" runat="server" > 

                    <ClientSideEvents DataBound="ondatabound" /> 

                    <Columns> 

                        ……………………. 

                    </Columns> 

 

                </ej:Grid> 

<script> 

 

        function ondatabound(args) { 

 

            this.element.find("tr:last").closest("tr").hide();  // hide the last row 

 

        } 

    </script> 

But if you enabled the paging, then the above code will hide only the last row in the current page (i.e. page #1). So, we want further details to achieve your requirement. 

1. Share the complete grid structure.
2. Share the complete grid code example.
3. Confirm whether the ID is the row cell element.
4. share the grid model (JSON stringify)

Please share the details, that help us to achieve your requirement as early as possible. 

Regards, 

Manivannan Padmanaban. 

[David Price]

Hello,

When I hide the header row ( first row )

using 

this.element.find("tr:first").closest("tr").hide();

or

.e-grid .e-gridheader { 

     display: none !important; 

} 

I am now unable to resize the columns. How can I hide the first row and retain the ability to resize the columns? 

[Thavasianand Sankaranarayanan]

Hi David, 

By default, resizing works based on the headers and also we have shown the resizing icon when go for the column header borders. So, it is not possible to resize the columns directly on the Grid UI, when column header is not present in Grid. 

We can achieve this is in programmatically by using the resizeColumns method of ejGrid control. 

  

Please refer the below help documentation for more information about resizeColumns method. 

Link: https://help.syncfusion.com/api/js/ejgrid#methods:resizecolumns 

Regards, 

Thavasianand S.