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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to show the scrollbar inside the grid rather page level

Thread ID:

Created:

Updated:

Platform:

Replies:

130553 May 18,2017 01:56 AM UTC May 18,2017 11:56 AM UTC ASP.NET Core 1
loading
Tags: Grid
dsapo
Asked On May 18, 2017 01:56 AM UTC

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 [Syncfusion]
Replied On 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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;