Custom Scrollbar in ejs-grid issue

[Rodrigo Escobar]

Hi Team! to the requirements of the project I needed to add a custom scrollbar to the grid, Currently I'm working with this scroll library for angular: https://www.npmjs.com/package/ngx-scrollbar. 

The thing is, that I'm capable of adding it and wrapping the whole component, the issue here is that I'm also using the toolbar for the grid, and it also is wrapping that part. Is that a possibility to only cover the content of the grid excluding the toolbar?

[Rajapandiyan Settu]

Hi Rodrigo,

Thanks for contacting Syncfusion support.

In EJ2 Grid, the default browser’s scrollbar is shown for the content and we didn’t use the custom scrollbar. Kindly share the below details to check the feasibility of your requirement.

1. Share the screenshot and video demo of your requirement.
2. What are the issues you have faced with the default browser scrollbar and why do you want to use the custom scrollbar?
3. Share the sample you have tried from your side.
4. Are you want to show the scrollbar on both the top and bottom of the Grid content?

Regards,

Rajapandiyan S

[Rodrigo Escobar]

Thank you!

Currently I'm trying to add a custom scroll with the previously mentioned library. The thing is, that I can only achieve that by wrapping the whole ejs grid component, and looks like this:

The issue here is that it also wraps the header of the table and the toolbar. And i want to only wrap the content of the table.

I'm trying to add a custom scrollbar because we are following a style guide for the project, most of the components used in the app use that scrollbar, and having the default scrollbar break that flow,

[Rajapandiyan Settu]

Hi Rodrigo,

By setting height to the Grid component, we can show the scrollbar to the content. This will be a default browser’s scrollbar and we can’t use any custom scrollbar for this. Please find the sample for your reference.

Sample: https://stackblitz.com/edit/angular-xybtnb?file=src%2Fapp.component.html

Height: https://ej2.syncfusion.com/angular/documentation/api/grid/#height

 

[app.component.html]

    <ejs-grid [dataSource]='data' height='350'>

    </ejs-grid>

 

However, we can customize it by using CSS. If you need it, we will share the CSS.

Regards,

Rajapandiyan S

[Rodrigo Escobar]

Thank you so much! it will be so helpful to have the CSS to use that!

[Rajapandiyan Settu]

Hi Rodrigo,

By using the following CSS, you can customize the scrollbar of the Grid content.

 

[index.html]

    <style>

      .e-grid .e-gridcontent .e-content::-webkit-scrollbar {

        width: 1em;

      }

 

      .e-grid .e-gridcontent .e-content::-webkit-scrollbar-track {

        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);

      }

      .e-grid .e-gridcontent .e-content::-webkit-scrollbar-thumb {

        background-color: darkgrey;

        outline: 1px solid slategrey;

      }

      /* Scrollbar Buttons */

      .e-grid .e-gridcontent .e-content::-webkit-scrollbar-button:single-button {

        background-color: #eee;

        display: block;

        background-size: 10px;

        background-repeat: no-repeat;

      }

 

      /* Up */

      .e-grid .e-gridcontent  .e-content::-webkit-scrollbar-button:single-button:vertical:decrement {

        height: 12px;

        width: 16px;

        background-position: center 4px;

        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'

 fill='rgb(73, 73, 73)'><polygon points='50,00 0,50 100,50'/></svg>");

      }

 

      /* Down */

      .e-grid .e-gridcontent .e-content::-webkit-scrollbar-button:single-button:vertical:increment {

        height: 12px;

        width: 16px;

        background-position: center 2px;

        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' 

fill='rgb(73, 73, 73)'><polygon points='0,0 100,0 50,50'/></svg>");

      }

 

      /* Start */

      .e-grid .e-gridcontent .e-content::-webkit-scrollbar-button:single-button:horizontal:start {

        height: 12px;

        width: 16px;

        background-position: center 4px;

        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'

 fill='rgb(73, 73, 73)'><polygon points='50 50, 100 0, 100 100'/></svg>");

      }

 

      /* End */

      .e-grid .e-gridcontent .e-content::-webkit-scrollbar-button:single-button:horizontal:end {

        height: 12px;

        width: 16px;

        background-position: center 2px;

        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' 

fill='rgb(73, 73, 73)'><polygon points='0 0, 0 100, 50 50'/></svg>");

      }

    </style>

 

Sample: https://stackblitz.com/edit/angular-xybtnb-hpxufl?file=src%2Findex.html

Please get back to us if you need further assistance with this.

Regards,

Rajapandiyan S