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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Tooltip for button in grid command column

Thread ID:

Created:

Updated:

Platform:

Replies:

151359 Feb 7,2020 03:40 PM UTC Feb 11,2020 04:55 AM UTC Blazor 3
loading
Tags: Grid
Stefano Capobianco
Asked On February 7, 2020 03:40 PM UTC

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


Renjith Singh Rajendran [Syncfusion]
Replied On 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. 


Stefano Capobianco
Replied On February 10, 2020 02:03 PM UTC

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

Renjith Singh Rajendran [Syncfusion]
Replied On 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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon