How to enable scroll in Syncfusion responsive MVC Grid

Question

I have created a grid with Syncfusion in a MVC application, and I madethat responsive by importing ej.grid.responsive.css. But when it's rendering in a mobile resolution, the scroll bar is not visible and I am unable to see other columns since not showing the scroll bar. How i enable that scroll bar in Syncfusion MVC Grid ?

<div class="box-body">
   @(Html.EJ().Grid<ServiceRepairInspectionViewModel>("SriGrid")
      .Datasource(ds => ds.URL(@Url.Action("GetActive", "ServiceRepairInspection")).Adaptor(AdaptorType.UrlAdaptor))
                      .AllowPaging()
                      .IsResponsive(true)
                      .EnableResponsiveRow(true)
                      .AllowScrolling(true)
                      .ScrollSettings(scroll => {                           scroll.EnableTouchScroll(true); })
                      .Columns(col =>
                      {
                          col.Field(p => p.Id).Visible(false).IsPrimaryKey(true).Add();
                          col.Field(p => p.SriName).HeaderText("Id").AllowFiltering(true).Add();
                          col.Field(p => p.CustomerFirstName).HeaderText("Name").AllowFiltering(true).FilterType(FilterOption.Menu).Add();
                          col.Field(p => p.JobDescription).HeaderText("Job Description ").ForeignKeyField("Value").ForeignKeyValue("Text").DataSource(EnumHelper.GetSelectList(typeof (EnumJobDescription))).AllowSorting(true).Add();
                          col.Field(p => p.Status).HeaderText("Status").Template("#statusTemplate").AllowSorting(true).Add();

                      }))
            </div>

Note : The Gird is getting rolled when i render that window in mobile resolution, But only scroll bar not displayed .

Answer 1

We found that you have not set MinWidth property in grid. To show the scrollbar in grid when responsive we suggest you to set MinWidth propery in grid.

Please refer the below code example.

[Index.cshtml]

    @(Html.EJ().Grid<MvcApplication14.OrdersView>("FlatGrid")
        .Datasource((IEnumerable<object>)ViewBag.dataSource)
      .AllowPaging()
                          .IsResponsive(true)

                          .MinWidth(400)
                          ...
    .Columns(col =>
    {
             ...
    })
    )

Please refer the documentation link:

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

Answer 2

I am working on a project of which an older version of Syncfusion ejGrid is being used and found an oddity that I was able to resolved and sharing it here in case someone encounters it also.

The ejGrid was not display the horizontal and vertical scroll bars when loading data when setting the datasource from an Ajax call.

I had hidden the grid on line 175 but it was originally on line 176. Due to some behind the scene mechanics of jQuery, the refreshContent() call did not have the intended effect and the .show() displayed the ejGrid with no visible scrollbars until one of the sortable headers was clicked on.

So, if you hide the grid, make sure that lines 175 and 176 are in the order of showing the grid then called the refreshContent.

Note: If you are using classic Syncfusion JS controls you WILL need to use jQuery to reference the ejGird. If you try u sing pure JavaScript you will not get the expected results (see line 169). I believe this is due to chaining of jQuery and that Syncfusion (classic, v1) relies on chaining on line 169 then using something like the following DOES NOT work.

var parentGrid = document.getElementByID("progressTrackerGrid");
parentGrid.dataSource(ej.parseJSON(data));