Changing a grid scrollbar's color

[Erik]

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]

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]

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]

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 

 

https://help.syncfusion.com/aspnet-core/grid/cell#auto-wrap  

 

https://help.syncfusion.com/aspnet-core/grid/cell#tooltip  

 

Please get back to us if you have further queries.    

 

Regards, 

Vignesh Natarajan 

[Erik]

Works fine.

Thanks Vignesh.

[Vignesh Natarajan]

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