Tooltip on kendo grid on trying to click on the content on the tooltip disappears

1 Answer 71 Views

Grid ToolTip

nikky03 asked on 27 Sep 2022, 01:07 PM

Hello,

I want the tooltip to remain open when trying to click on the content of tooltip. Below is my code.

---Grid

@(Html.Kendo().Grid<AgeInformation>()
.Name("AgeInformationGrid")
.Columns(columns =>
{
columns.Bound(p => p.FundAge).Title("Agency").ClientTemplate("#=FundAge.FedAgeDesc#").Sortable(false).Width(175).HeaderHtmlAttributes(new { @class = "FundAgeClass" });

})

.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Pageable()
.Sortable()
.Scrollable()
.HtmlAttributes(new { style = "height:500px;" })
.DataSource(dataSource => dataSource
.Ajax()
.AutoSync(false)
.Batch(false)
.PageSize(20)
.ServerOperation(false)
.Events(events => events.Error("errorHandler"))
.Events(events => events.RequestEnd("onAgeInformationRequestEnd"))
.Model(model => {
model.Id(p => p.AgeInformationId);
model.Field(p => p.AgeInformationId).Editable(false);
model.Field(p => p.FundAge).DefaultValue(new FedAgency());
})
.Create(update => update.Action("AddAgeInformation", "Coversheet").Type(HttpVerbs.Post))
.Read(read => read.Action("GetAgeInformation", "Coversheet").Type(HttpVerbs.Get))
.Update(update => update.Action("EditAgeInformation", "Coversheet").Type(HttpVerbs.Post))
.Destroy(update => update.Action("DeleteAgeInformation", "Coversheet").Type(HttpVerbs.Post))
)
//.Events(events => events.Edit("onAgeInformationEdit"))
)

function ToolTipsForAgency() {

$(".FundAgeClass").append(" <i class='far fa-question-circle'></i>");

$(".FundAgeClass").attr("data-html", "true");
$(".k-dropdown, .FundAgeClass").find('i').attr("title", "More information can be found on this link <a href='https://google.com' title='test add link'>link on content</a>");

}

Any help is appreciated

1 Answer, 1 is accepted

nikky03

commented on 03 Oct 2022, 06:28 PM

Hello Aleksandar,

Thank you so much for your response. This worked for me. To add tooltips to other columns do I need to follow the same method? or add filters to the tooltip builder?

Alexander

commented on 06 Oct 2022, 03:10 PM

Hi Nikitha,

You can specify as many filters as per your requirements for which the tooltip will be displayed. You can nest them similarly to how it is illustrated within the previously mentioned knowledge base article.

For example:

.Filter(".FundAgeClass i, td:nth-child(3)")

And handle any arbitrary logic based on the current target element within the respective Content Handler:

function contentHandler(e) {        
        var content = "More information can be found on this link <a href='https://google.com' title='test add link'>link on content</a>";
        if (e.target.is("td")) { // Check if the target is a "<td>" element.
            // Custom logic...
            var dataItem = $("#grid").data("kendoGrid").dataItem(e.target.closest("tr"));
            var text = dataItem.QuantityPerUnit;
            return text;
        }
        return content;
}

For your convenience, here is an updated version of the previously sent example:

Telerik REPL for ASP.NET Core Updated Example - the Tooltip is shown both for the icon element and "Units In Stock" columns.

I hope this helps.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Tooltip on kendo grid on trying to click on the content on the tooltip disappears

1 Answer, 1 is accepted