ASP.NET MVC grid - inconsistent row height between frozen and unfrozen columns.

[Vasyl Shepelyov]

Hi,

I have a problem with row height when I freeze columns. When I initially create grid and freeze columns, everything works fine:

But after I reduce padding-top and padding-bottom, row height gets smaller in frozen columns, but remains the same in unfrozen columns:

RowHeight grid setting works only when I set it bigger or equal to right side row height, i.e. if I set it 40 and more, both sides increase row height accordingly. But if I set RowHeight less then 40, only left side decreases the row height, while right side remains 40.

Please advise how can I synchronize row height and make it 20 on both frozen and unfrozen sides?

I use grid for various reports which users view on desktop PCs. It has great functionality except that I need to decrease padding and row height and I always struggle to achieve this. If I use default grid settings, I get huge size grid which displays small piece of info. Default padding is enormously huge and I have to modify css in order to achieve desired result.

Thank you in advance.

[Rajapandi Ravi]

Hi Vasyl, 

Greetings from syncfusion support 

Based on your query we have prepared a sample of Grid with stacked header columns and frozen columns which was same as your application scenario and tried to reproduce the issue. But it works fine from our end. In your query you have mentioned that, when you set the RowHeight value as below 40 only the frozen columns height are decreased. In this below sample, we have set the Rowheight value as 20 and its working fine from our end. Please refer the below code example and sample for more information. 

<div> 

@Html.EJS().Grid<gridmvclocalization.Controllers.OrdersDetails>("Grid").FrozenColumns(2).DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col => 

                    { 

                        .  .  .  .  .  .  . 

 

                    }).AllowPaging().RowHeight(20).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).PageSettings(page => page.PageCount(2)).Render() 

</div> 

 

<style> 

    .e-grid .e-rowcell { 

        padding-left: 1px; 

        padding-bottom: 1px; 

        padding-top: 1px; 

        padding-right: 1px; 

    } 

</style> 

Sample: https://www.syncfusion.com/downloads/support/forum/154862/ze/1548622129287200.zip 

Screenshot: 

 

If you still face the issue, please share the below details that will be helpful for us to provide better solution. 

1)   Please share your syncfusion package version. 

2)   Please share your complete Grid rendering code. 

3)   If possible please replicate the issue with our above attached sample. 

Regards, 

Rajapandi R

[Vasyl Shepelyov]

Thank you very much for the information. I've added custom css to the grid, this must be causing misalignment. I'll experiment with your example, will let you know if any further questions.

[Rajapandi Ravi]

Hi Vasyl,  

Thanks for the update.  

We will wait to hear from you.  

Regards,  

Rajapandi R