We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

130690 May 26,2017 09:07 AM UTC Jun 1,2017 12:12 PM UTC ASP.NET MVC 3
loading
Tags: Grid
Andrias Abadi
Asked On May 26, 2017 09:07 AM UTC

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 [Syncfusion]
Replied On May 29, 2017 07:37 AM UTC

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
 

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.  
 

Regards, 

Jayaprakash K. 

 


Andrias Abadi
Replied On May 31, 2017 04:31 PM UTC

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 [Syncfusion]
Replied On June 1, 2017 12:12 PM UTC

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 
    
 
Regards,  

Jayaprakash K 

 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;