I want to implement like this.
https://ej2.syncfusion.com/aspnetcore/Grid/FrozenRows#/material
only my issue is i have first row and then i want to allocate remain height to grid without scroll of whole page and give grid to all the other height and width.
can you let me know show should i do that? i have tried couple of things but it does not work
<div class="row wrapper border-bottom white-bg page-heading">
<span> TestPage Data Sync</span>
</div>
<div class="wrapper wrapper-content animated" style="display:flex;flex-flow:column;height:87%">
<div style="height:72px">
<div class="row" style="margin-bottom: 3px;">
<div class="col-md-12">
<div class="ibox">
<div class="ibox-content">
<div class="row">
<div class="col-md-12">
<div class="pull-left" style="padding-right: 10px;margin-top: 5px;">
Select a Instance:
</div>
<div class="pull-left" style="padding-right: 10px;">
<ejs-dropdownlist id="TestPageInstances" index="0" dataSource="@ViewBag.TestPageInstances" placeholder="Select a Instance" width="400px" popupHeight="220px">
<e-dropdownlist-fields value="value" text="text"></e-dropdownlist-fields>
</ejs-dropdownlist>
</div>
<div class="pull-left">
<ejs-button id="submitInstanceChanges" cssClass="e-primary" content="Submit"></ejs-button>
</div>
<div class="pull-right" style="padding-right: 10px;">
<ejs-button id="runOnDemandSync" cssClass="e-primary" content="Sync Selected Tables"></ejs-button>
</div>
<div class="pull-right" style="padding-right: 10px;margin-top: 5px;">
Sync Status: <span id="TestPageSyncRunningStatus" style="font-weight:bold">@(ViewBag.IsInstanceRunning?"Running":"Idle")</span>
</div>
<div class="pull-right" style="padding-right: 10px;margin-top: 5px;">
Current Instance: <span id="TestPageSelectedInstance" style="font-weight:bold"></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="divGridTestPageSettings" style="flex-grow: 1;">
<div>
<ejs-grid id="TestPageSyncSettings" allowSorting="true" allowTextWrap="true" height="100%" width="100%" allowFiltering="true" gridLines="Both" allowPaging="false" frozenColumns="2" created="test.TestPageSyncSettings.TestPageSyncSettingsCreated" actionFailure="test.TestPageSyncSettings.TestPageSyncSettingsActionFailure" actionComplete="test.TestPageSyncSettings.TestPageSyncSettingsActionComplete" rowDataBound="test.TestPageSyncSettings.TestPageSyncSettingsRowDataBound" dataBound="test.TestPageSyncSettings.TestPageSyncSettingsDataBound">
<e-data-manager json="Model.ToArray()" adaptor="RemoteSaveAdaptor" updateUrl="/TestPageSync/UpdateTestPageSyncSettings"></e-data-manager>
<e-grid-pagesettings pageSizes="@(new string[] { "50", "100", "200", "500", "All" })" pageSize="50"></e-grid-pagesettings>
<e-grid-editSettings allowEditOnDblClick="false" allowAdding="false" allowDeleting="false" allowEditing="true" mode="Dialog"></e-grid-editSettings>
<e-grid-selectionsettings allowColumnSelection="false" enableSimpleMultiRowSelection="false" enableToggle="false"></e-grid-selectionsettings>
<e-grid-filtersettings type="Excel"></e-grid-filtersettings>
<e-grid-textwrapsettings wrapMode="Both"></e-grid-textwrapsettings>
<e-grid-columns>
<e-grid-column field="Id" headerText="Id" isPrimaryKey="true" visible="false"></e-grid-column>
<e-grid-column field="TableName" headerText="Name" width="350" allowEditing="false"> </e-grid-column>
<e-grid-column field="CanTransferData" template="#canTransferData" headerText="Sync Data" width="70" allowEditing="true" editType="booleanEdit"></e-grid-column>
<e-grid-column field="DeltaUpdate" template="#deltaUpdate" headerText="Delta Update" width="80" allowEditing="true" editType="booleanEdit"></e-grid-column>
<e-grid-column field="DeltaFieldName" headerText="Delta Field Name" allowEditing="true" width="100" edit="@(new {create = "test.TestPageSyncSettings.createTableColumnDropdown", read = "test.TestPageSyncSettings.readTableColumnDropdown", destroy = "test.TestPageSyncSettings.destroyTableColumnDropdown", write = "test.TestPageSyncSettings.writeTableColumnDropdown"})"> </e-grid-column>
<e-grid-column field="CreatedDateText" headerText="Created Date" allowEditing="false" width="100"> </e-grid-column>
<e-grid-column field="LastSyncDateText" headerText="Last Sync Date" allowEditing="false" width="100"> </e-grid-column>
<e-grid-column field="LastSyncTimeTakenInMinutes" headerText="Last Sync Time In Minutes" width="90" allowEditing="false"> </e-grid-column>
<e-grid-column field="TestPageRowCount" headerText="Net Suite Row Count" minWidth="250" width="80" allowEditing="false"> </e-grid-column>
<e-grid-column field="ReplicaRowCount" headerText="Replica Row Count" width="80" allowEditing="false"> </e-grid-column>
<e-grid-column field="RecordsFilter" headerText="Records Filter" allowEditing="true"> </e-grid-column>
<e-grid-column field="Status" headerText="Status" allowEditing="false" width="100"> </e-grid-column>
<e-grid-column headerText="Action" width="80" textAlign="Center" allowEditing="false" template="#actionColumnTemplate"></e-grid-column>
<e-grid-column type="checkbox" width="50"></e-grid-column>
</e-grid-columns>
</ejs-grid>
</div>
</div>
</div>