How to change the position of Pager from Left to right.

[KINS]

I have an sfgrid control in my web application. I would like to know how to change the position of Pager from Left to right.

Attachment: Untitled_21fc43c5.zip

[Renjith Singh Rajendran]

Hi Hassan, 

Greetings from Syncfusion support. 

We suggest you to apply the below styles in your application to achieve this requirement. Please refer and use the below styles. 

<style> 

    .e-grid .e-pager .e-pagercontainer{ 

        float : right; 

    } 

    .e-grid .e-pager .e-parentmsgbar{ 

        float : left; 

    } 

</style> 

Reference : https://blazor.syncfusion.com/documentation/datagrid/how-to/grid-styling/ 

Please get back to us if you need further assistance. 

Regards, 

Renjith R 

[KINS]

Thanks working fine...

I have one more clarification

The above css will apply for all grid control in all page.

I would like to know how to apply above css in particular page and particular grid 

[Renjith Singh Rajendran]

Hi Hassan, 

We suggest you to set the ID property for the Grids. Now apply style based on the ID property value. Please refer the styles below. Applying below style, the pager style will be applied only for the first grid. 

 

<SfGrid ID="GridOne" DataSource="@Orders" AllowPaging="true"> 

  ... 

</SfGrid> 

 

<SfGrid ID="GridTwo" DataSource="@Orders" AllowPaging="true"> 

   ... 

</SfGrid> 

 

<style> 

    /*Now the pager style will be applied only for 1st grid*/ 

    #GridOne .e-pager .e-pagercontainer{ 

        float : right; 

    } 

    #GridOne .e-pager .e-parentmsgbar{ 

        float : left; 

    } 

</style> 

Please get back to us if you need further assistance. 

Regards, 

Renjith R 

[KINS]

Thanks

[Renjith Singh Rajendran]

Hi Hassan, 

Thanks for your update. Please get back to us of you need further assistance. 

Regards, 

Renjith R 

[KINS]

i have one more clarification

id concept is working fine as per above code

but when I am trying to change backcolor of grid cell and header,then it's not working.pls check below css class and advise how to do this.

<style>

        .ImgStyle {

            border: 1px solid;

            height: 170px;

            width: 270px;

            padding-left: 5px;

        }

    #GridOne .e-rowcell .th {

        font-family: Poppins;

        font-size: 13px;

        font-weight: 500;

        border-style: solid;

        border-width: 1px 0 0;

        display: table-cell;

        line-height: 21px;

        overflow: hidden;

        padding: 7px 12px;

        vertical-align: middle;

        white-space: nowrap;

        width: auto;

        border-bottom-style: double;

        background-color: #dbdbdb;

    }

    #Gridtwo .e-rowcell .th {

        font-family: Poppins;

        font-size: 13px;

        font-weight: 500;

        border-style: solid;

        border-width: 1px 0 0;

        display: table-cell;

        line-height: 21px;

        overflow: hidden;

        padding: 7px 12px;

        vertical-align: middle;

        white-space: nowrap;

        width: auto;

        border-bottom-style: double;

        background-color: tan;

    }

[Renjith Singh Rajendran]

Hi Ahmed, 

We suggest you to ensure to apply styles for proper grid header cell and row cell elements to apply the style in Grid. 

https://blazor.syncfusion.com/documentation/datagrid/how-to/grid-styling/ 

Please use the below styles to achieve this requirement, 

<style> 

    ... 

    #GridOne .e-headercell, 

    #GridOne .e-rowcell { 

        font-family: Poppins; 

        font-size: 13px; 

        ... 

    } 

    #GridTwo .e-headercell, 

    #GridTwo .e-rowcell { 

        font-family: Poppins; 

        font-size: 13px; 

        font-weight: 500; 

        ... 

    }  

</style> 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/ServerApp1917649646 

Please get back to us if you need further assistance. 

Regards, 

Renjith R