We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Center Button in Comman Column Grid

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>
        <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">
                <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>

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

Thanks in advance

3 Replies

VN Vignesh Natarajan Syncfusion Team February 7, 2020 04:58 AM UTC

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 ( 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 26th 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.  

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

    .e-grid .e-rowcell.e-unboundcell { 
        text-aligncenter !important; 

Kindly get back to us if you have further queries.  
Vignesh Natarajan 

SC Stefano Capobianco February 7, 2020 08:18 AM UTC

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


VN Vignesh Natarajan Syncfusion Team February 10, 2020 03:53 AM UTC

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. 
Vignesh Natarajan.  

Live Chat Icon For mobile
Up arrow icon