Tooltip for button in grid command column

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:

@{

var title = (context as Title);

</EjsTooltip>

</EjsTooltip>

}

</Template>

How i can obtain the desired result ?

Thanks

Stefano

Reply | Reply with quote

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>

@{

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

Documentation : https://ej2.syncfusion.com/blazor/documentation/button/how-to/tooltip-for-button/

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.

Reply | Reply with quote

Stefano Capobianco

Replied On February 10, 2020 02:03 PM UTC

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

Stefano

Reply | Reply with quote

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.

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
151359	Feb 7,2020 03:40 PM UTC	Feb 11,2020 04:55 AM UTC	Blazor	3

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US