Hi David,
Thanks for contacting the Syncfusion support.
Query: Would be possible to show the scrollbar as part of the grid?
Yes, Scrollbar can be rendered along with Grid and it is part of it. Please refer the online documentation for scrolling.
Please refer below link for the sample.
In above sample, we have enabled allowScrolling and defined the scrollsettings height and width of the grid. While rendering the records, if the size of grid exceeds the defined height and width scroller is created and its rendered within the grid.
<ej-grid id="FlatGrid" allow-paging="true" datasource="ViewBag.data" allow-scrolling="true">
<e-edit-settings allow-adding="true" allow-deleting="true" allow-editing="true" edit-mode="Normal" ></e-edit-settings>
<e-toolbar-settings show-toolbar="true" toolbar-items="@(new List<string>() {"add","edit","delete","cancel","update" })"></e-toolbar-settings>
<e-columns>
<e-column field="OrderID" is-primary-key="true" header-text="Order ID" text-align="Right" width="70" validation-rules='new Dictionary<string, object>() { { "required",true} }'></e-column>
<e-column field="CustomerID" header-text="Customer ID" width="80" validation-rules='new Dictionary<string, object>() { { "required",true}, { "minlength",3} }'></e-column>
<e-column field="EmployeeID" header-text="Employee ID" template='{{:EmployeeID}} * {{:Freight}}' edit-type="Dropdown" text-align="Left" width="75"></e-column>
<e-column field="Freight" header-text="Freight" text-align="Right" format="{0:C2}" width="75"></e-column>
</e-columns>
<e-scroll-settings height=@("100%") width="400"></e-scroll-settings>
</ej-grid> |
Query2: When we display the view in a small screen the scrollbar appears at the button of page.
Responsive mode is enabled by setting is-responsive property as true. Please refer the responsive grid documentation link for your reference.
<ej-grid id="FlatGrid" allow-paging="true" datasource="ViewBag.data" allow-scrolling="true" allow-sorting="true" allow-multi-sorting="true" is-responsive="true" min-width="100">
<e-edit-settings allow-adding="true" allow-deleting="true" allow-editing="true" edit-mode="Normal" ></e-edit-settings> |
Regards,
Vignesh Natarajan.