css - 同步卡住列的可滚动 div 内网格的响应能力

Question

我在可滚动的 div 中有一个网格，页面中网格正下方有 4 个按钮(razor View )。我写了一些媒体查询来设置不同分辨率的 div 的高度。基于此，页面上显示的行数也会发生变化。现在，当用户滚动网格时，标题需要被卡住。我没有设置网格的高度，基本上我不想设置，因为 css 媒体查询会处理它，因为我现在在 div 中有一个网格。

要卡住行，需要设置 AllowScrolling(true)、网格高度和 FrozenColumns(2).FrozenRows(0) 但是由于卡住行/列不能响应网格。 我们有其他选择吗？我希望因为我在 div 中有一个网格(在 css 中为任何分辨率设置高度)我们可以根据屏幕分辨率设置网格的高度吗？

<div class="row scrollDiv" style="overflow-y: auto;"> 
@(Html.EJ().Grid<DatabaseColumnInfo>("TableColumnGrid")
          .Datasource(Model)
          .AllowSorting()
          .IsResponsive(true)
          .AllowResizing(true)
          //.AllowScrolling(true)            
          //.ScrollSettings(col =>
          //{
          //    col.Height(300);
          //    col.FrozenColumns(2).FrozenRows(0);
          //})
          .ClientSideEvents(evt => evt.RowSelected("onRowSelected"))
          .Columns(col =>
          {
              col.Field("Name").HeaderText("Column name").Width(300).Add();
              col.Field("DataType").HeaderText("Type").Add();
          }))
</div>

CSS:

@media (min-width: 1024px) and (max-width: 1366px) { .scrollDiv { height: 368px; } }
@media (min-width: 1367px) and (max-width: 1920px) { .scrollDiv { height: 720px; } }

Answer 1

为了让grid的高度适应需要的分辨率，将grid的scrollSettings属性中的width和height设置为100%。有关详细信息，请参阅以下示例和代码示例。

样本:http://www.syncfusion.com/downloads/support/directtrac/202776/ze/Grid-1825010219.zip

enter code here
<div> 
    @(Html.EJ().Grid<object>("FlatGrid") 
              .Datasource((IEnumerable<object>)ViewBag.datasource) 

                 ….. 

              .IsResponsive() 
              .AllowResizing() 
              .AllowScrolling() 
              .ScrollSettings(col => 
              { 
                  col.Height("100%"); col.Width("100%"); 
                  col.FrozenColumns(2).FrozenRows(0); 
              }) 
              .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing().EditMode(EditMode.Normal); }) 

               ….. 

请引用以下文档。

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