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
close icon

Tooltip for button in grid command column

Hi, i've tried to add a tooltip for the button inside a command column but the result is the following:




I would like to have the button on the same line.

My template column is the following:

            <Template>
                @{
                    var title = (context as Title);
                    <EjsTooltip Content="@ContentEdit" Target="#btnEdit" >
                        <EjsButton ID="btnEdit" @ref="buttonEdit" @onclick="@OnClickEdit" CssClass="far fa-edit" ></EjsButton>
                    </EjsTooltip>
                    <EjsTooltip Content="@ContentDelete" Target="#btnDelete" >
                        <EjsButton ID="btnDelete" @ref="buttonDelete" @onclick="@OnClickDelete" CssClass="fas fa-trash-alt"></EjsButton>
                    </EjsTooltip>
                }
            </Template>

How i can obtain the desired result ?
Thanks
Stefano


3 Replies

RS Renjith Singh Rajendran Syncfusion Team February 10, 2020 11:10 AM UTC

Hi Stefano, 

Thanks for contacting Syncfusion support. 

Query : I would like to have the button on the same line. 
We suggest you to add the below highlighted style to make the Buttons display on the same line. Please use the code below, 

 
        <GridColumn HeaderText="Manage Records" Width="150"> 
            <Template> 
                @{ 
                    <div style="display:inline-flex"> 
                        <EjsTooltip Content="@ContentEdit" Target="#btnEdit" CssClass="inlineclass"> 
                            <EjsButton ID="btnEdit" @ref="buttonEdit" @onclick="@OnClickEdit" CssClass="far fa-edit"></EjsButton> 
                        </EjsTooltip> 
                        <EjsTooltip Content="@ContentDelete" Target="#btnDelete"> 
                            <EjsButton ID="btnDelete" @ref="buttonDelete" @onclick="@OnClickDelete" CssClass="fas fa-trash-alt"></EjsButton> 
                        </EjsTooltip> 
                    </div> 
                } 
            </Template> 
        </GridColumn> 


And also, you can use the “HtmlAttributes” property of EjsButton to display tooltip for Syncfusion Button component. We have already documented this topic, please refer the documentation link below for more details, 

Please use the code below, 

 
<EjsGrid DataSource="@Orders" AllowPaging="true" Height="315"> 
    ... 
    <GridColumns> 
        ... 
       <GridColumn HeaderText="Manage Records" Width="150"> 
            <Template> 
                @{ 
                    <EjsButton @ref="buttonEdit" HtmlAttributes="@EditButton" @onclick="@OnClickEdit" CssClass="far fa-edit"></EjsButton> 
                    <EjsButton @ref="buttonDelete" HtmlAttributes="@DeleteButton" @onclick="@OnClickDelete" CssClass="fas fa-trash-alt"></EjsButton> 
                } 
            </Template> 
        </GridColumn> 
    </GridColumns> 
</EjsGrid> 
 
@code{ 
        ... 
       private Dictionary<string, object> DeleteButton = new Dictionary<string, object>() 
        { 
             { "title", "Delete Button"} 
        }; 
        private Dictionary<string, object> EditButton = new Dictionary<string, object>() 
        { 
             { "title", "Edit Button"} 
        }; 
        ... 
} 


Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran. 



SC Stefano Capobianco February 10, 2020 02:03 PM UTC

Thanks, i've used the first suggestion and work very well.
Stefano


RS Renjith Singh Rajendran Syncfusion Team February 11, 2020 04:55 AM UTC

Hi Stefano, 

Thanks for your update. 

We are happy to hear that our suggestion helped you in achieving your requirement. 

Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran. 


Loader.
Live Chat Icon For mobile
Up arrow icon