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

时间:2017-01-07 06:23:49

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

我在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会滚动,但只显示滚动条。

1 个答案:

答案 0 :(得分:2)

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

请参考以下代码示例。

[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