Grid Row Tooltip

[John Fleet]

Hi ,is it possible to show a Grid Row Tooltip with information from hidden field using VB.Net ?

I don't want to use the Cell Tooltip unless necessary.

Regards,

John

[Farveen Sulthana Thameeztheen Basha]

Hi John,

Query#:- Hi ,is it possible to show a Grid Row Tooltip with information from hidden field using VB.Net ?

We have already discussed about “How to render Tooltip for Grid content” in client end. We can perform this customization to show Tooltip only from Client end.

https://www.syncfusion.com/kb/5436/how-to-render-tooltip-for-grid-content

Please get back to us if you need any further assistance.

Regards,
Farveen sulthana T

[John Fleet]

Thank you for trying ... this appears to be Cell Tooltip not Row.

Rgds

John

[Farveen Sulthana Thameeztheen Basha]

Hi John,

We have achieved your requirement (show row Tooltip) using client side DataBound event of the Grid(which will shows row related information on tooltip along with hidden field). We have defined CssClass property for any particular column. On Hovering over the corresponding column, it will show the corresponding row Information by accessing the CssClass class in that event.

Refer to the code below:-

Default.aspx:-

 

<ej:Grid ID="Grid" runat="server" AllowPaging="True">

            <ClientSideEvents DataBound="onDataBound" />

            <Columns>

                <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="True" />

                <ej:Column Field="CustomerID" HeaderText="Customer ID" visible="false"  />

                <ej:Column Field="EmployeeID" HeaderText="Employee ID" CssClass="coltip" />  /bind CssClass property for the column in order to access the tooltip

               

            </Columns>

</ej:Grid>  

 

<script type="text/javascript">

    function onDataBound(args) {

        $(".coltip").ejTooltip({

            width: "350px",

            //content: 'some content'

            beforeOpen: function (args) {

                if ($(args.event.target).hasClass("e-headercell", "e-headercelldiv")) {

 //check if headercell is hovered

                    args.cancel = true;

                    return;

                }

                var gridObj = $("#Grid").data("ejGrid");

                var index = gridObj.getIndexByRow(args.event.target.closest("tr"));

                var val = gridObj.getCurrentViewData()[index]; //get the row data

                $(".coltip").ejTooltip({ content: temp.render(val) });//Get the row data and display it as content for tooltip

            }

        })

    }

</script>

Screenshot:- (shown Tooltip for hidden field also)

Refer KB to show Customized Tooltip:- https://www.syncfusion.com/kb/7128/how-to-render-customized-tooltip-for-one-column-which-displays-values-of-another-column

Please get back to us if you need any further assistance.

Regards,
Farveen sulthana T

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.