How do I change grid row height if there's an edit button in a row

[Yukiko Imazu]

Hello,

I tried to change row height of grid which has edit and cancel button in a row, but it looks like not changed.

I want buttons to be appropriate size as row height was changed to 20px.

.e-grid .e-rowcell {

     height:20px;

}

I attach my sample solution.

How can I fix this issue?

Thank you,

Yukiko

Attachment: test_3bef4baa.7z

[Prasanna Kumar Viswanathan]

Hi Yukiko, 

Thanks for contacting Syncfusion support. 

Query 1 : I tried to change row height of grid which has edit and cancel button in a row, but it looks like not changed. 

 

We already have a knowledge base documentation for how to change the row height of the grid. Please refer the below link for the documentation. 

KB documentation : https://www.syncfusion.com/kb/4266/how-to-modify-the-grid-row-height 

Query 2 : I want buttons to be appropriate size as row height was changed to 20px. 

 

If you want to change the height of the command buttons, then we suggest you to define the height property in the ButtonOptions of the command button property of columns api. Please refer the below code example. 

<ej:Grid ID="Grid1" runat="server" AllowPaging="True"  DataSourceID="test34" ClientIDMode="AutoID" OnServerAddRow="Grid1_ServerAddRow" OnServerEditRow="Grid1_ServerEditRow" >  

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

                              

        <ToolbarSettings ToolbarItems="add,edit,delete,update,cancel" ShowToolbar="true"></ToolbarSettings> 

      <%--  <ClientSideEvents ActionComplete="complete" /> --%> 

        <Columns> 

            <ej:Column Field="memberId"  AllowEditing="false" Width="250px"/> 

            <ej:Column Field="first_name" Type="string" Width="200px" > 

          

            </ej:Column>             

 

                             …... 

 

            <ej:Column HeaderText="Manage Column" IsUnbound="True" Width="230px"> 

                <Command> 

                    <ej:Commands Type="edit"> 

                        <ButtonOptions Text="Edit" Height="20px"></ButtonOptions> 

                    </ej:Commands> 

                    <ej:Commands Type="delete"> 

                        <ButtonOptions Text="Delete" Height="20px"></ButtonOptions> 

                    </ej:Commands> 

                    <ej:Commands Type="save"> 

                        <ButtonOptions Text="Save" Height="20px"></ButtonOptions> 

                    </ej:Commands> 

                    <ej:Commands Type="cancel"> 

                        <ButtonOptions Text="Cancel" Height="20px"></ButtonOptions> 

                    </ej:Commands> 

                </Command> 

            </ej:Column> 

        </Columns> 

</ej:Grid> 

Regards, 

Prasanna Kumar N.S.V 

[Yukiko Imazu]

Hi Prasanna Kumar,

Thank you for replying.

My issue was resolved.

Thank you,

Yukiko

[Vignesh Natarajan]

Hi Yukiko, 

Thanks for the update. 

We are happy to hear that you query has been resolved by our solution. 

Please get back to us if you have further queries. 

Regards, 

Vignesh Natarajan