Display Gridpanel cell tooltip in Ext.Net

You often want to display tooltip using cell data when data length overflows column width in your gridpanel. You will get an example to show tooltip with gridpanel cell data here: http://examples1.ext.net/#/Miscellaneous/ToolTips/GridPanel_Cell_Tooltip/

But this is not working properly when it is included in some project especially if you have master page based design. I have tried this in my project and it worked properly with little bit changes. Here I want to share the codes with you guys:

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">

    <link href="../Style/examples.css" rel="stylesheet" type="text/css" />

    <ext:XScript ID="XScript1" runat="server">

        <script type="text/javascript">

            var showTip = function () {

                var rowIndex = #{gpList}.view.findRowIndex(this.triggerElement),

                cellIndex = #{gpList}.view.findCellIndex(this.triggerElement),

                record = #{gpListStore}.getAt(rowIndex),

                fieldName = #{gpList}.getColumnModel().getDataIndex(cellIndex),

               

                data = record.get(fieldName);

                if (data ==null){

                this.body.dom.innerHTML = "";

                }

                else{

                this.body.dom.innerHTML = data;

                };

            };

        </script>

    </ext:XScript>

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">

    <ext:ResourceManager ID="rcm" runat="server">

    </ext:ResourceManager>

    <ext:Hidden ID="hfPK" runat="server">

    </ext:Hidden>

    <ext:TabPanel ID="tPnlMain" runat="server" ActiveTabIndex="0" AnchorHorizontal="100%"

        Height="500" Plain="true" Visible="true" Width="1024">

        <Items>

<ext:Panel ID="Tab2" runat="server" Title="Employee Search" Padding="1" AutoScroll="true">

                <Items>

                    <ext:RowLayout runat="server">

                        <Rows>

                            <ext:LayoutRow RowHeight=".25">

                                <ext:Panel ID="Panel1" runat="server" Header="false" Padding="1" AutoScroll="true">

                                    <Items>

                                    </Items>

                                </ext:Panel>

                            </ext:LayoutRow>

                            <ext:LayoutRow RowHeight=".75">

                                <ext:Panel ID="Panel3" runat="server" Title="Employee List" Padding="1" AutoScroll="true">

                                    <Items>

                                        <ext:GridPanel ID="gpList" runat="server" StripeRows="true" AutoExpandColumn="EmployeeName"

                                            Collapsible="true" AnchorHorizontal="100%" Height="322" TrackMouseOver="true">

                                            <Store>

                                                <ext:Store ID="gpListStore" runat="server">

                                                    <Reader>

                                                        <ext:JsonReader IDProperty="EmployeeId">

                                                            <Fields>

                                                                <ext:RecordField Name="EmployeeId" />

                                                                <ext:RecordField Name="EmployeeName" />

                                                                <ext:RecordField Name="EnrollId" />

                                                                <ext:RecordField Name="FirstName" />

                                                                <ext:RecordField Name="MiddleName" />

                                                                <ext:RecordField Name="LastName" />

                                                                <ext:RecordField Name="AddressLine1" />

                                                                <ext:RecordField Name="DepartmentId" />

                                                                <ext:RecordField Name="DesignationId" />

                                                                <ext:RecordField Name="PolicyId" />

                                                                <ext:RecordField Name="CardNumber" />

                                                                <ext:RecordField Name="DesignationName" />

                                                                <ext:RecordField Name="DeptName" />

                                                                <ext:RecordField Name="SbuName" />

                                                            </Fields>

                                                        </ext:JsonReader>

                                                    </Reader>

                                                </ext:Store>

                                            </Store>

                                            <ColumnModel ID="ColumnModel1" runat="server">

                                                <Columns>

                                                    <ext:RowNumbererColumn />

                                                    <ext:CommandColumn Header="Action" Width="65">

                                                        <Commands>

                                                            <ext:GridCommand Icon="ApplicationEdit" CommandName="Edit">

                                                                <ToolTip Text="Edit" />

                                                            </ext:GridCommand>

                                                        </Commands>

                                                    </ext:CommandColumn>

                                                    <ext:Column ColumnID="cEnrollId" Header="Enroll Id" DataIndex="EnrollId" Width="50" />

                                                    <ext:Column ColumnID="cStaffCode" Header="Employee Code" DataIndex="StaffCode" Width="70" />

                                                    <ext:Column ColumnID="cEmployeeName" Header="EmployeeName" DataIndex="EmployeeName"

                                                        Width="130" />

                                                    <ext:Column ColumnID="cDesignationName" Header="Designation" DataIndex="DesignationName"

                                                        Width="150" />

                                                    <ext:Column ColumnID="cDepartmentName" Header="Department" DataIndex="DeptName" Width="100" />

                                                    <ext:Column ColumnID="cSbuId" Header="Branch" DataIndex="SbuName" />

                                                    <ext:Column ColumnID="cAddressLine1" Header="Address" DataIndex="AddressLine1" Width="180" />

                                                </Columns>

                                            </ColumnModel>

                                            <SelectionModel>

                                                <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true" />

                                            </SelectionModel>

                                            <BottomBar>

                                                <ext:PagingToolbar ID="gpListPager" runat="server" PageSize="20" />

                                            </BottomBar>

                                            <Listeners>

                                                <Command Handler="Ext.net.DirectMethods.ExecuteActionCommand(command, record.data.EmployeeId, record.data.EnrollId);" />

                                            </Listeners>

                                            <ToolTips>

                                                <ext:ToolTip ID="RowTip" runat="server" Target="#{gpList}.getView().mainBody" Delegate=".x-grid3-cell" ShowDelay="0"

                                                    TrackMouse="true">

                                                    <Listeners>

                                                        <Show Fn="showTip" />

                                                    </Listeners>

                                                </ext:ToolTip>

                                            </ToolTips>

                                        </ext:GridPanel>

                                    </Items>

                                </ext:Panel>

                            </ext:LayoutRow>

                        </Rows>

                    </ext:RowLayout>

                </Items>

            </ext:Panel>

        </Items>

    </ext:TabPanel>

</asp:Content>

Hope this will help my friends.