CODEWITHSUNDEEP
javascriptkendo-uikendo-grid
Greg Gum
Greg Gum

Reputation: 37905

Grid with Tooltip

I have a grid with an image column to show if there is an error or not. If this is an error, I would like to display a tooltip with a message when the user hovers over the image. The message would be from c.ErrorMessage.

Is there a sample on how to do this? I searched and could not find one.

@(Html.Kendo().Grid<GridLineItem>().Name("grid").Columns(columns =>

          {

                columns.Bound(c => c.ReportName).Title("Status").ClientTemplate(

                    "# if (HasError == true) { #" +

                        "<img src='" + Url.Content("Images/error.png") + "'/>" +

                    "# } else { #" +

                          "<img src='" + Url.Content("Images/success.png") + "'/>" +

                    "# } #"

                );

                            )

Upvotes: 0

Views: 1133

Answers (2)

Lars H&#246;ppner
Lars H&#246;ppner

Reputation: 18402

Give your image a class, add the error message as a data attribute (e.g. <img class='error' data-error='my error message'/>), then add the tooltip like this:

$('#grid').kendoTooltip({
    filter: ".error",
    content: function (e) {
        var target = e.target; // the element for which the tooltip is shown
        return $(target).data("error"); // get the tooltip content from the error attribute
    }
});

(partial demo)

Upvotes: 1

Greg Gum
Greg Gum

Reputation: 37905

I was able to make this work with just using the standard browser tool tip like this:

 columns.Bound(c => c.ReportName).Title("").Width(25).ClientTemplate(
                    "# if (HasError == true) { #" +
                        "<img style='margin-top: 5px;' src='" + Url.Content("Images/error.png") + "' title='#=ErrorMessage#'/>" +
                    "# } else { #" +
                          "<img style='margin-top: 5px;' src='" + Url.Content("Images/success.png") + "' />" +
                    "# } #"

Upvotes: 0

Related Questions