Pager Styling

[À la mode Clothing Outlet]

Hi, I have an SfGrid and the pager has this weird blue border around it, how do i remove it or at least make it transparent...this is what it looks like: 

Attachment: Screenshot_20251008_223608_fc5e2e53.png

[Guhanathan Ramanathan]

Hi ,

Greetings from Syncfusion,

 

Based on your query, we have prepared a sample using custom CSS to achieve your requirement. Please refer to the code snippet and sample for your reference.

 

<SfGrid DataSource="@Orders" AllowPaging="true" height="273px">

    <GridEditSettings AllowAdding="true" AllowEditing="true"  AllowDeleting="true"></GridEditSettings>

    <GridColumns>

        <GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="100" ValidationRules="@(new ValidationRules{ Required=true})"></GridColumn>

        <GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer Name" Width="120" ValidationRules="@(new ValidationRules{ Required=true})"></GridColumn>

        <GridColumn Field=@nameof(OrderData.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120" EditType="EditType.NumericEdit" ValidationRules="@(new ValidationRules{ Required=true,Min=1,Max=1000})"></GridColumn>

        <GridColumn Field=@nameof(OrderData.ShipCountry) HeaderText="ShipCountry" EditType="EditType.DropDownEdit" TextAlign="TextAlign.Right" Width="150"></GridColumn>

    </GridColumns>

</SfGrid>

<style>

    .e-pager .e-numericcontainer .e-currentitem {

        border: 3px solid #e9ecef;

     

    }

</style>

 

Regards,
Guhanathan R

Attachment: Pager_da3c90f.zip

[À la mode Clothing Outlet]

Thank you! Much appreciated

[Sanjay Kumar Suresh]

Hi À la mode Clothing Outlet,

We are happy to hear that the provided solution was helpful. Please get back to us if you need any other assistance.

Regards,

Sanjay Kumar Suresh