如何在 Syncfusion 响应式 MVC 网格中启用滚动

Question

我在 MVC 应用程序中使用 Syncfusion 创建了一个网格，我通过导入 ej.grid.responsive.css 使其响应。但是当它以移动分辨率呈现时，滚动条不可见，并且由于不显示滚动条，我无法看到其他列。我如何在 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>

注意：当我以移动分辨率呈现 window 时，Gird 正在滚动，但只有滚动条未显示。

Answer 1

我们发现您没有在 grid 中设置 MinWidth 属性。要在响应时在网格中显示滚动条，我们建议您在网格中设置 MinWidth 属性。

请参考下面的代码示例。

[Index.cshtml]

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

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

请参考文档link:

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

如何在 Syncfusion 响应式 MVC 网格中启用滚动

How to enable scroll in Syncfusion responsive MVC Grid

css

asp.net-mvc

syncfusion

responsive-design

responsive