We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to show the scrollbar inside the grid rather page level

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

1 Reply

VN Vignesh Natarajan Syncfusion Team May 18, 2017 11:56 AM UTC

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. 


Loader.
Up arrow icon