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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Changing a grid scrollbar's color

Thread ID:

Created:

Updated:

Platform:

Replies:

142382 Jan 30,2019 03:57 PM UTC Feb 1,2019 10:49 AM UTC ASP.NET Core 5
loading
Tags: Grid
Erik
Asked On January 30, 2019 03:57 PM UTC

Hi,

I would like to know how to change the color of a scrollbar in a Grid (EJ1).
scroll-settings seems to only change the behavior and not the style of the bar.

Thanks.

Vignesh Natarajan [Syncfusion]
Replied On January 31, 2019 07:27 AM UTC

Hi Erik, 
 
Thanks for using Syncfusion products. 
 
Query: “I would like to know how to change the color of a scrollbar in a Grid (EJ1).” 
 
From your query, we understand that you need to change the color of the scrollbar inside the ejGrid. We have achieved your requirement by applying the below css to scoller. 
 
Refer the below code example 
 
<style> 
  #Grid .e-scrollbar .e-vhandle, 
      #Grid .e-scrollbar .e-hhandle{ 
      background:#845e5e; 
      }</style> 
 
 
#Grid – denotes the Grid ID. 
 
Refer the below screenshot for the output 
 
 
  
Please get back to us if you have further queries. 
 
Regards, 
Vignesh Natarajan  
 
 
 


Erik
Replied On January 31, 2019 09:19 AM UTC

Hi Vignesh,

Thanks for your quick answer.

I have another grid related question :

I would like to display the full text of a grid header even if i resize the column, like having the text on 2 row instead of one row with "..." at the end of the header.
Would that be possible ? Thanks

Vignesh Natarajan [Syncfusion]
Replied On February 1, 2019 04:55 AM UTC

Hi Erik, 
 
Thanks for the update. 
 
Query: “I would like to display the full text of a grid header even if i resize the column, like having the text on 2 row instead” 
 
From your query we understand that you need to wrap the grid header text while resizing instead of showing “…”. We suggest you to achieve your requirement by enabling the allow-text-wrap. Refer the below code example 
 
<ej-grid id="FlatGrid" allow-paging="true" allow-text-wrap="true" datasource="ViewBag.DataSource"> 
    <e-text-wrap-settings wrap-mode="Both"></e-text-wrap-settings> 
    <e-columns> 
        <e-column field="OrderID" header-text="OrderID" width="90"></e-column> 
        <e-column field="EmployeeID" header-text="EmployeeID" width="100"></e-column> 
        <e-column field="Freight" header-text="Freight" width="100"></e-column> 
        <e-column field="ShipCity" header-text="ShipCity" width="90"></e-column> 
        <e-column field="ShipAddress" header-text="Ship Address" width="110"></e-column> 
    </e-columns> 
</ej-grid> 
 
Note: Text will be wrapped only when it contains multiple words. In case of length word. We suggest you to show tooltip for the hided letters.  
 
Refer our help documentation for your reference 
 
 
 
Please get back to us if you have further queries.    
 
Regards, 
Vignesh Natarajan 


Erik
Replied On February 1, 2019 09:55 AM UTC

Works fine.

Thanks Vignesh.

Vignesh Natarajan [Syncfusion]
Replied On February 1, 2019 10:49 AM UTC

Hi Erik, 
 
Thanks for the update. 
 
We are glad to hear that your query has been resolved by our solution. 
 
Please get back to us if you have further queries. 
 
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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

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

Live Chat Icon For mobile
Live Chat Icon