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. Image for the cookie policy date

Grid Row Tooltip

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


3 Replies 1 reply marked as answer

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team October 10, 2022 09:33 AM

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



JF John Fleet October 10, 2022 11:40 AM

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

Rgds

John



FS Farveen Sulthana Thameeztheen Basha Syncfusion Team October 11, 2022 10:42 AM

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.


Marked as answer
Loader.
Live Chat Icon For mobile
Up arrow icon