How to show the scrollbar inside the grid rather page level

[dsapo]

Hi Support:

I have a grid control inside a view that has several fields.  The content of the rows are define in a template.

When we display the view in a small screen the scrollbar appears at the button of page.

Would be possible to show the scrollbar as part of the grid.

Thanks

David

[Vignesh Natarajan]

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. 

Documentation Link: https://help.syncfusion.com/aspnet-core/grid/scrolling  

Please refer below link for the sample. 

Sample: http://www.syncfusion.com/downloads/support/directtrac/130544/ze/WebApplication8-987116181     

 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. 

Link: https://help.syncfusion.com/aspnet-core/grid/responsive  

  

<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.