Center Button in Comman Column Grid

[Stefano Capobianco]

Hi, this is my grid definition:

<EjsGrid TValue="Title" AllowPaging="true" Query="@GridQuery">

    <EjsDataManager Url="https://localhost:44319/Titles/Gets" Adaptor="Adaptors.WebApiAdaptor"></EjsDataManager>

    <GridEvents CommandClicked="OnCommandClicked" TValue="Title"></GridEvents>

    <GridPageSettings PageSize="5" PageSizes="true"></GridPageSettings>

    <GridColumns>

        <GridColumn Field=@nameof(Title.Id) HeaderText="Title Id" TextAlign="TextAlign.Center" Width="10"></GridColumn>

        <GridColumn Field=@nameof(Title.TitleAbbreviated) HeaderText="Abbreviazione" TextAlign="TextAlign.Center" Width="10"></GridColumn>

        <GridColumn Field=@nameof(Title.TitleName) HeaderText="Titolo" TextAlign="TextAlign.Center" Width="10"></GridColumn>

        <GridColumn HeaderText="Azioni" TextAlign="TextAlign.Center" Width="10">

            <GridCommandColumns>

                <GridCommandColumn ButtonOption="@(new CommandButtonOptions() { IconCss = "e-icons e-edit", CssClass = "e-flat" })"></GridCommandColumn>

                <GridCommandColumn ButtonOption="@(new CommandButtonOptions() { IconCss = "e-icons e-delete", CssClass = "e-flat" })"></GridCommandColumn>

            </GridCommandColumns>

        </GridColumn>

    </GridColumns>

</EjsGrid>

I would like to center the buttons in GridCommandColumns. It's possible and if yes how.

Thanks in advance

Stefano

[Vignesh Natarajan]

Hi Stefano,   

Greetings from Syncfusion support.  

Query: “I would like to center the buttons in GridCommandColumns. It's possible and if yes how.” 

 

Grid Columns can be aligned using its TextAlign property. It will be applied to all the columns including command column. So defining TextAlign property as Center will be applied to CommandColumn also. But we are facing issue in our latest version (17.4.0.47). We have considered the reported query as a bug and logged defect report for the same “” . At Syncfusion, we are committed to fixing all validated defects (subject to technological feasibility and Product Development Life Cycle ) and including the defect fix in our next Bi-Weekly release which is expected to be rolled out on or before 26^th February, 2020.  

 

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.  

 

Feedback Link :   https://www.syncfusion.com/feedback/11886/textalign-is-not-applied-to-commandcolumn-in-blazor-grid  

Till then we suggest you to use below CSS to achieve your requirement as a workaround.   

<style> 

    .e-grid .e-rowcell.e-unboundcell { 

        text-align: center !important; 

    } 

</style> 

Kindly get back to us if you have further queries.  

   

Regards, 

Vignesh Natarajan 

[Stefano Capobianco]

Thank you for the solution, work very well. I'm wait the next service pack to delete from the css the modification suggested.

Thanks

Stefano

[Vignesh Natarajan]

Hi Stefano,  

Thanks for the update.  

We are glad to hear that you have resolved your query using our solution.  

Kindly get back to us if you need any further assistance from us. 

  

Regards, 

Vignesh Natarajan.