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

【问题标题】：How to enable scroll in Syncfusion responsive MVC Grid如何在 Syncfusion 响应式 MVC 网格中启用滚动
【发布时间】：2017-01-09 20:12:14
【问题描述】：

我在 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>

注意：当我以移动分辨率渲染该窗口时，Gird 正在滚动，但只显示滚动条。

【问题讨论】：

标签： css asp.net-mvc responsive-design responsive syncfusion

【解决方案1】：

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

请参考以下代码示例。

[Index.cshtml]

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

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

请参考文档链接：

链接：https://help.syncfusion.com/api/js/ejgrid#members:minwidth

【讨论】：