Grid Scrolling Header Frozen when scroll (does not following content)

[Andrias Abadi]

Hi,

Im using the ASP MVC Grid and needs the grid to maintain  the width incase of overflows (small screen). This is achieveable when using the Local data with no problem, however when I switch to use URL Adaptor as the datasource the grid scrolling turns buggy. The Field Header does not follow the scrolling of the content, I attached a screenshot to illustrate the problem.

Here is my code for the grid:

@(Html.EJ().Grid<object>("StockListGrid")
            .AllowSorting()
            .AllowTextWrap()
            .AllowResizing()
            .AllowSearching(true)
            .AllowPaging()
            .PageSettings(page =>
            {
                page.PageSize(25);
            })
            .ToolbarSettings(tool =>
            {
                tool.ShowToolbar(true).ToolbarItems(items =>
                {
                    items.AddTool(ToolBarItems.PrintGrid);
                    items.AddTool(ToolBarItems.ExcelExport);
                });
            })
            .AllowScrolling()
            .ScrollSettings(scroll => scroll.Width("auto").Height("100%"))
            .Mappers(map => { map.ExportToExcelAction(Url.Action("ExportStockList", "Product")); })
            .AllowFiltering(true)
            .FilterSettings(filter => { filter.FilterType(FilterType.Excel); })
            //.Datasource((IEnumerable<GBM.Domain.ViewModel.Product.StockListVM>)Model)
            .Datasource(ds => ds.URL(Url.Action("AllStockDataSource", "Product")).Adaptor(AdaptorType.UrlAdaptor))
                .Columns(col =>
                {
                    col.Field("ID").HeaderText("Id").IsPrimaryKey(true).IsIdentity(true).Visible(false).Add();
                    col.Field("Code").HeaderText("Kode Produk").TextAlign(TextAlign.Left).Width(150).Add();
                    col.Field("Detail").HeaderText("Keterangan").TextAlign(TextAlign.Left).Width(200).Add();
                    col.Field("Estate").HeaderText("Lokasi").TextAlign(TextAlign.Left).Width(150).Add();
                    col.Field("StockCode").HeaderText("Kode Stok").TextAlign(TextAlign.Left).Width(150).Add();
                    col.Field("Qty").HeaderText("Qty").TextAlign(TextAlign.Left).Width(150).Format("{0:N2}").Add();
                    col.Field("Tools").Template("#columnTemplate").AllowSorting(false).Width(200).AllowFiltering(false).HeaderText("").Add();
                }
            ))

On a side note, when I used the IsResponsive(), it overrides the width of the col.fields hence effectively disables the horizontal scrolling.

Is there any method to apply the IsResponsive() only to the grid width while preserving the col.field width?

Attachment: Syncfusion_Grid_Scrolling_Problem_da807690.rar

[Jayaprakash Kamaraj]

Hi Andrias, 

In Grid, we have default support for responsive behavior. If responsive is enabled, then the grid will be rendered based on parent’s width and height. We need to set IsResponsive and MinWidth Property to enable responsive in Grid. MinWidth is used to maintain minimum width for the Grid and if the grid width is less than minWidth then the scrollbar will be displayed. Please refer to the below API reference documentation.

http://help.syncfusion.com/js/api/ejgrid#members:isresponsive

http://help.syncfusion.com/js/api/ejgrid#members:minwidth 

https://help.syncfusion.com/aspnetmvc/grid/responsive 

We suspect that you have missed to set MinWidth property in Grid. So, we suggest you to set MinWidth property of Grid. Please refer to the below code example. 

@(Html.EJ().Grid<OrdersView>("Editing") 

            .Datasource(ds => ds.URL("/Home/DataSource").Adaptor(AdaptorType.UrlAdaptor)) 

 

          .AllowSorting() 

                .AllowTextWrap() 

                .AllowResizing() 

                .AllowSearching(true) 

                .AllowPaging() 

                .PageSettings(page => 

                { 

                    page.PageSize(25); 

                }) 

                .ToolbarSettings(tool => 

                { 

                    tool.ShowToolbar(true).ToolbarItems(items => 

                    { 

                        items.AddTool(ToolBarItems.PrintGrid); 

                        items.AddTool(ToolBarItems.ExcelExport); 

                    }); 

                }) 

                .IsResponsive() 

                .MinWidth(400) 

                .AllowScrolling() 

                .ScrollSettings(scroll => scroll.Width("auto").Height("100%")) 

                .Mappers(map => { map.ExportToExcelAction(Url.Action("ExportStockList", "Product")); }) 

                .AllowFiltering(true) 

                .FilterSettings(filter => { filter.FilterType(FilterType.Excel); }) 

        .Columns(col => 

        { 

            col.Field("OrderID").HeaderText("Id").IsPrimaryKey(true).IsIdentity(true).Visible(false).Add(); 

            col.Field("EmployeeID").HeaderText("Kode Produk").TextAlign(TextAlign.Left).Width(150).Add(); 

            col.Field("CustomerID").HeaderText("Keterangan").TextAlign(TextAlign.Left).Width(200).Add(); 

            col.Field("ShipCity").HeaderText("Lokasi").TextAlign(TextAlign.Left).Width(150).Add(); 

            col.Field("ShipName").HeaderText("Kode Stok").TextAlign(TextAlign.Left).Width(150).Add(); 

            col.Field("ShipAddress").HeaderText("Qty").TextAlign(TextAlign.Left).Width(150).Format("{0:N2}").Add(); 

            col.Field("Tools").Template("{{:Freight}}").AllowSorting(false).Width(200).AllowFiltering(false).HeaderText("").Add(); 

        }) 

        .ClientSideEvents(eve => { eve.ActionBegin("begin"); }) 

) 

We have prepared a sample with your code example but we were unable to reproduce the issue at our end.Please share the following details it will help us to provide the prompt solution 

 

1. Grid rendering code example both client and server.
2. Essential studio and browser version details.
3. Issue replication procedure.
4. Please open the console window in browser and check whether any script error throws.
5. An issue reproducing sample if possible or hosted link or replicate the issue in the attached sample.  

 

Sample: http://www.syncfusion.com/downloads/support/forum/130690/ze/MvcApplication66-1986541409 

Regards, 

Jayaprakash K. 

 

[Andrias Abadi]

Hi, 

Thanks for the reply i did fixed the width problem by putting the width as 100% instead of auto which works fine

But the main issue is the header which didn't scroll with the content as shown on the attached image, can you take a look at it?

the header was frozen while the content moves when it was scrolled

[Jayaprakash Kamaraj]

Hi Andrias, 

We have prepared a sample with your code example, but we were unable to reproduce the issue at our end. Please share the following details as it will help us to provide a solution.  

1.       Grid rendering full code example both client and server. 

2.       Essential studio and browser version details. 

3.       Issue replication procedure 

4.       Did you add or remove the column after rendering the Grid? 

5.       Share the video to show the issue. 

6.       Please open the console window in the browser and check whether any script error throws. 

7.       An issue reproducing sample if possible or hosted link or replicate the issue in the attached sample 

    

Sample: http://www.syncfusion.com/downloads/support/forum/130690/ze/MvcApplication66-1986541409  

 

Regards,  

Jayaprakash K