locked
HoverMenuExtender not working when I use jquery datatables for my gridview inside a update panel RRS feed

  • Question

  • User1052662409 posted

    Hi All,

    I have a gridview inside a update panel. There is a linkbutton inside gridview. My <asp:HoverMenuExtender  is working fine for that link. No Issues.

    Untitled

    But when I user jquery datatables with my gridview (Jquery datatable is working fine for gridview) then <asp:HoverMenuExtender  doesn't work.

    2

    I guess, the jquery datatable is disabled the HoverMenuExtender ?

    For reference I am showing my code as below

    <asp:UpdatePanel runat="server" ID="updatepanel3" ClientIDMode="Predictable">
                                            <ContentTemplate>
                                                <div class="table-responsive">
                                                    <table class="table table-bordered table-clientinfo table-hover">
    
                                                        <tr>
                                                            <td class="auto-style9">From</td>
                                                            <td class="auto-style10">To</td>
                                                            <td>&nbsp;</td>
                                                        </tr>
                                                        <tr>
                                                            <td class="auto-style9">
                                                                <asp:TextBox ID="txtReqDateFrom" runat="server"></asp:TextBox>
                                                                <asp:CalendarExtender ID="txtReqDateFrom_CalendarExtender" runat="server" Format="dd/MM/yyyy" TargetControlID="txtReqDateFrom">
                                                                </asp:CalendarExtender>
                                                                <br />
                                                                <asp:RequiredFieldValidator ID="RequiredFieldValidator11" runat="server" ControlToValidate="txtReqDateFrom" ErrorMessage="Date Required !" ValidationGroup="req"></asp:RequiredFieldValidator>
                                                            </td>
                                                            <td class="auto-style10">
                                                                <asp:TextBox ID="txtReQDateTo" runat="server"></asp:TextBox>
                                                                <asp:CalendarExtender ID="txtReQDateTo_CalendarExtender" runat="server" Format="dd/MM/yyyy" TargetControlID="txtReQDateTo">
                                                                </asp:CalendarExtender>
                                                                <br />
                                                                <asp:RequiredFieldValidator ID="RequiredFieldValidator12" runat="server" ControlToValidate="txtReQDateTo" ErrorMessage="Date Required !" ValidationGroup="req"></asp:RequiredFieldValidator>
                                                            </td>
                                                            <td>
                                                                <asp:Button ID="btnReQ" runat="server" OnClick="btnReQ_Click" Text="Submit" ValidationGroup="req" />
                                                            </td>
                                                        </tr>
                                                    </table>
    
                                                    <asp:GridView ID="GVRequirement" class="table table-striped table-bordered" runat="server" AutoGenerateColumns="False" DataKeyNames="Sno" OnRowDataBound="GVRequirement_RowDataBound" OnRowEditing="GVRequirement_RowEditing" OnRowUpdating="GVRequirement_RowUpdating" OnRowCancelingEdit="GVRequirement_RowCancelingEdit" OnRowCommand="GVRequirement_RowCommand" ShowFooter="True" Style="margin: 0px;">
                                                        <Columns>
                                                            <asp:BoundField DataField="date" HeaderText="Date" ReadOnly="true" DataFormatString="{0:dd/MM/yyyy}">
                                                                <ItemStyle Font-Size="10px" />
                                                                <HeaderStyle Font-Size="11px" />
                                                            </asp:BoundField>
                                                            <asp:BoundField DataField="location" HeaderText="Location" ReadOnly="true">
                                                                <ItemStyle Font-Size="10px" />
                                                                <HeaderStyle Font-Size="11px" />
                                                            </asp:BoundField>
                                                            <asp:TemplateField>
                                                                <HeaderTemplate>Name</HeaderTemplate>
                                                                <ItemTemplate>
                                                                    <asp:LinkButton ID="lbUserid" Enabled="false" runat="server" Text='<%#Eval("user_name")%>'></asp:LinkButton>
                                                                    <asp:HiddenField ID="lbhdnid" runat="server" Value='<%#Eval("user_id")%>' />
                                                                    <asp:HoverMenuExtender ID="hme2" runat="Server" TargetControlID="lbUserid" PopupControlID="PopupMenu"
                                                                        PopupPosition="Right" Enabled="true" HoverDelay="0" HoverCssClass="popupHover" />
                                                                    <asp:Panel ID="PopupMenu" runat="server" Width="40%">
    
                                                                        <asp:GridView ID="GridView2" runat="server" Width="40%">
                                                                        </asp:GridView>
    
                                                                    </asp:Panel>
    
                                                                </ItemTemplate>
                                                            </asp:TemplateField>
    
                                                            <asp:BoundField DataField="amount" ReadOnly="true" HeaderText="Amount">
                                                                <ItemStyle Font-Size="10px" />
                                                                <HeaderStyle Font-Size="11px" />
                                                            </asp:BoundField>
    
                                                            <asp:BoundField DataField="expense_head" ReadOnly="true" HeaderText="Expense Head">
                                                                <ItemStyle Font-Size="10px" />
                                                                <HeaderStyle Font-Size="11px" />
                                                            </asp:BoundField>
                                                            <asp:BoundField DataField="details" HeaderText="Requirement Details" ReadOnly="true">
                                                                <ItemStyle Font-Size="10px" />
                                                                <HeaderStyle Font-Size="11px" />
                                                            </asp:BoundField>
    
                                                            <asp:BoundField DataField="payee_name" ReadOnly="true" HeaderText="Payee Name">
                                                                <ItemStyle Font-Size="10px" />
                                                                <HeaderStyle Font-Size="11px" />
                                                            </asp:BoundField>
                                                            <asp:BoundField DataField="requested_by" ReadOnly="true" HeaderText="Requested By">
                                                                <ItemStyle Font-Size="10px" />
                                                                <HeaderStyle Font-Size="11px" />
                                                            </asp:BoundField>
                                                            <asp:TemplateField HeaderText="Approval Date">
                                                                <EditItemTemplate>
                                                                    <asp:TextBox ID="TextBox1" runat="server" Width="60px"></asp:TextBox>
                                                                    <asp:CalendarExtender ID="TextBox1_CalendarExtender" Format="dd/MM/yyyy" runat="server" Enabled="True" TargetControlID="TextBox1">
                                                                    </asp:CalendarExtender>
                                                                </EditItemTemplate>
                                                                <ItemTemplate>
                                                                    <asp:Label ID="Label5" runat="server" Text='<%# Bind("approval_date", "{0:dd/MM/yyyy}") %>'></asp:Label>
                                                                </ItemTemplate>
                                                            </asp:TemplateField>
    
                                                            <asp:TemplateField HeaderText="Approval Status">
                                                                <EditItemTemplate>
                                                                    <asp:TextBox ID="txtApprovalStatus" runat="server" Width="60"></asp:TextBox>
                                                                </EditItemTemplate>
                                                                <ItemTemplate>
                                                                    <asp:Label ID="Label2" runat="server" Text='<%# Bind("approval_status") %>'></asp:Label>
                                                                </ItemTemplate>
                                                                <ItemStyle Font-Size="10px" />
                                                                <HeaderStyle Font-Size="11px" />
                                                            </asp:TemplateField>
                                                            <asp:TemplateField HeaderText="Approved Amount">
                                                                <EditItemTemplate>
                                                                    <asp:TextBox ID="txtAmount" Width="60" ondrop="return false;" onkeypress="return isNumberKey(event)" onpaste="return false;" runat="server" Text='<%# Bind("approved_amount") %>'></asp:TextBox>
                                                                </EditItemTemplate>
                                                                <ItemTemplate>
                                                                    <asp:Label ID="Label3" runat="server" Text='<%# Bind("approved_amount") %>'></asp:Label>
                                                                </ItemTemplate>
                                                                <ItemStyle Font-Size="10px" />
                                                                <HeaderStyle Font-Size="11px" />
                                                            </asp:TemplateField>
                                                            <asp:TemplateField HeaderText="Approved By">
                                                                <EditItemTemplate>
                                                                    <asp:Label ID="lblManagerName" runat="server" Width="60"></asp:Label>
                                                                </EditItemTemplate>
                                                                <ItemTemplate>
                                                                    <asp:Label ID="Label1" runat="server" Text='<%# Bind("approved_by") %>'></asp:Label>
                                                                </ItemTemplate>
                                                                <ItemStyle Font-Size="10px" />
                                                                <HeaderStyle Font-Size="11px" />
                                                            </asp:TemplateField>
                                                            <asp:TemplateField HeaderText="Paid Date">
                                                                <EditItemTemplate>
                                                                    <asp:TextBox ID="TextBox2" runat="server" Width="60px"></asp:TextBox>
                                                                    <asp:CalendarExtender ID="TextBox2_CalendarExtender" Format="dd/MM/yyyy" runat="server" Enabled="True" TargetControlID="TextBox2" CssClass="test">
                                                                    </asp:CalendarExtender>
                                                                </EditItemTemplate>
                                                                <ItemTemplate>
                                                                    <asp:Label ID="Label6" runat="server" Text='<%# Bind("paid_date", "{0:dd/MM/yyyy}") %>'></asp:Label>
                                                                </ItemTemplate>
                                                                <ItemStyle Font-Size="10px" />
                                                                <HeaderStyle Font-Size="11px" />
                                                            </asp:TemplateField>
    
                                                            <asp:TemplateField HeaderText="Paid Amount">
                                                                <EditItemTemplate>
                                                                    <asp:TextBox ID="txtPaidAmount" Width="60" ondrop="return false;" onkeypress="return isNumberKey(event)" onpaste="return false;" runat="server" Text='<%# Bind("paid_amount") %>'></asp:TextBox>
                                                                </EditItemTemplate>
                                                                <ItemTemplate>
                                                                    <asp:Label ID="Label4" runat="server" Text='<%#Bind("paid_amount")%>'></asp:Label>
                                                                </ItemTemplate>
                                                                <ItemStyle Font-Size="10px" />
                                                                <HeaderStyle Font-Size="11px" />
                                                            </asp:TemplateField>
                                                            <asp:TemplateField HeaderText="Finance Status">
                                                                <EditItemTemplate>
                                                                    <asp:TextBox ID="ddlFinance_Status" runat="server" Width="60">
                                                                    
                                                                    </asp:TextBox>
                                                                </EditItemTemplate>
                                                                <ItemTemplate>
                                                                    <asp:Label ID="Label7" runat="server" Text='<%# Bind("finance_hold") %>'></asp:Label>
                                                                </ItemTemplate>
                                                                <ItemStyle Font-Size="10px" />
                                                                <HeaderStyle Font-Size="11px" />
                                                            </asp:TemplateField>
                                                            <asp:TemplateField HeaderText="Docs">
                                                                <ItemTemplate>
                                                                    <asp:LinkButton ID="lnkDownload" runat="server" CausesValidation="False" CommandArgument='<%# Eval("supporing_docs") %>'
                                                                        CommandName="Download" Text='<%# Eval("supporing_docs").ToString()!=""?"Bill":"" %>' />
                                                                </ItemTemplate>
                                                                <ItemStyle Font-Size="10px" />
                                                                <HeaderStyle Font-Size="11px" />
                                                            </asp:TemplateField>
                                                            <asp:CommandField ShowEditButton="True" />
                                                            <asp:ButtonField CommandName="Remove" Text="Delete" />
                                                        </Columns>
                                                        <FooterStyle Font-Bold="True" />
    
                                                    </asp:GridView>
    
                                                </div>
    
                                            </ContentTemplate>
    
                                        </asp:UpdatePanel>

    Jquery Datatables 

    <script type="text/javascript">
            $(function () {
    
                $('[id$=GVRequirement]').DataTable({
                    searching: false, paging: false, info: false, "ordering": false,
                    dom: 'Bfrtip',
                    buttons: [
                        'csv', 'excel', 'pdf', 'print'
                    ],
                    scrollY: "900px",
    
                    scrollX: true,
                    scrollCollapse: true,
    
                    fixedColumns: {
                        leftColumns: 3
    
                    }
    
                });
    
    
            });
    
            var prm = Sys.WebForms.PageRequestManager.getInstance();
            if (prm != null) {
                prm.add_endRequest(function (sender, e) {
                    if (sender._postBackSettings.panelsToUpdate != null) {
    
    
                        $('[id$=GVRequirement]').DataTable({
                            searching: false, paging: false, info: false, "ordering": false,
                            dom: 'Bfrtip',
                            buttons: [
                                'csv', 'excel', 'pdf', 'print'
                            ],
                            scrollY: "900px",
    
                            scrollX: true,
                            scrollCollapse: true,
    
                            fixedColumns: {
                                leftColumns: 3
    
                            }
    
    
    
                        });
    
                    }
    
                });
            };
    
        </script>

    C# code

    private DataTable PopulateRequirement(string user_id)
        {
            DataTable dt = new DataTable();
            DBHelper oDBHelper = new DBHelper();
            Hashtable param = new Hashtable();
            param.Add("@Case", 12);
            param.Add("@user_id", user_id);
            dt = oDBHelper.GetDatatabel("usp_update_requirement", param);
            return dt;
        }
        protected void GVRequirement_RowDataBound(object sender, GridViewRowEventArgs e)
        {
          
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                DataRowView dr = (DataRowView)e.Row.DataItem;
                string user_id = dr["user_id"].ToString();
                GridView secondGrid = (GridView)e.Row.FindControl("GridView2");
    
                DataTable dtForSecondGrid = new DataTable(); //here you populate this table with values by passing the key 'menuid'
                dtForSecondGrid = PopulateRequirement(user_id);
                secondGrid.DataSource = dtForSecondGrid;
                secondGrid.DataBind();
    }

    Please suggest.

    Thanks

    Saturday, March 28, 2020 6:05 PM

Answers

  • User-719153870 posted

    Hi demoninside9,

    Sorry i missed the buttons but i don't think this issue is caused by the buttons and it turns out i'm right.

    Have you checked the devtools like i suggested? Any error message?

    Best Regard,

    Yang Shen

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, March 31, 2020 2:06 AM

All replies

  • User-719153870 posted

    Hi demoninside9,

    The issue can not be reproduced. Press F12 and check if you got any error message.

    Below is the demo which could show the hover menu, maybe you could find somewhere different from your code:

    aspx:

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css" />
                <script src="Scripts/jquery-3.4.1.min.js"></script>
        <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
                <script type="text/javascript">
                    $(function () {
                        $('[id$=GVRequirement]').DataTable({
                            searching: false, paging: false, info: false, "ordering": false,
                            dom: 'Bfrtip',
                            buttons: [
                                'csv', 'excel', 'pdf', 'print'
                            ],
                            scrollY: "900px",
    
                            scrollX: true,
                            scrollCollapse: true,
    
                            fixedColumns: {
                                leftColumns: 3
                            }
                        });
                    });
    
                    var prm = Sys.WebForms.PageRequestManager.getInstance();
                    if (prm != null) {
                        prm.add_endRequest(function (sender, e) {
                            if (sender._postBackSettings.panelsToUpdate != null) {
                                $('[id$=GVRequirement]').DataTable({
                                    searching: false, paging: false, info: false, "ordering": false,
                                    dom: 'Bfrtip',
                                    buttons: [
                                        'csv', 'excel', 'pdf', 'print'
                                    ],
                                    scrollY: "900px",
    
                                    scrollX: true,
                                    scrollCollapse: true,
    
                                    fixedColumns: {
                                        leftColumns: 3
                                    }
                                });
                            }
                        });
                    };
    
                </script>
                <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
                <asp:UpdatePanel runat="server" ID="updatepanel3" ClientIDMode="Predictable">
                    <ContentTemplate>
                        <div class="table-responsive">
                            <table class="table table-bordered table-clientinfo table-hover">
                                <tr>
                                    <td class="auto-style9">From</td>
                                    <td class="auto-style10">To</td>
                                    <td>&nbsp;</td>
                                </tr>
                                <tr>
                                    <td class="auto-style9">
                                        <asp:TextBox ID="txtReqDateFrom" runat="server"></asp:TextBox>
                                        <ajaxToolkit:CalendarExtender ID="txtReqDateFrom_CalendarExtender" runat="server" Format="dd/MM/yyyy" TargetControlID="txtReqDateFrom" />
                                        <br />
                                        <asp:RequiredFieldValidator ID="RequiredFieldValidator11" runat="server" ControlToValidate="txtReqDateFrom" ErrorMessage="Date Required !" ValidationGroup="req"></asp:RequiredFieldValidator>
                                    </td>
                                    <td class="auto-style10">
                                        <asp:TextBox ID="txtReQDateTo" runat="server"></asp:TextBox>
                                        <ajaxToolkit:CalendarExtender ID="txtReQDateTo_CalendarExtender" runat="server" Format="dd/MM/yyyy" TargetControlID="txtReQDateTo" />
                                        <br />
                                        <asp:RequiredFieldValidator ID="RequiredFieldValidator12" runat="server" ControlToValidate="txtReQDateTo" ErrorMessage="Date Required !" ValidationGroup="req"></asp:RequiredFieldValidator>
                                    </td>
                                    <td>
                                        <asp:Button ID="btnReQ" runat="server" Text="Submit" ValidationGroup="req" />
                                    </td>
                                </tr>
                            </table>
                            <asp:GridView ID="GVRequirement" runat="server" AutoGenerateColumns="False" OnRowDataBound="GVRequirement_RowDataBound" Style="margin: 0px;">
                                <Columns>
                                    <asp:BoundField DataField="date" HeaderText="Date" ReadOnly="true" DataFormatString="{0:dd/MM/yyyy}">
                                        <ItemStyle Font-Size="10px" />
                                        <HeaderStyle Font-Size="11px" />
                                    </asp:BoundField>
                                    <asp:BoundField DataField="location" HeaderText="Location" ReadOnly="true">
                                        <ItemStyle Font-Size="10px" />
                                        <HeaderStyle Font-Size="11px" />
                                    </asp:BoundField>
                                    <asp:TemplateField>
                                        <HeaderTemplate>Name</HeaderTemplate>
                                        <ItemTemplate>
                                            <asp:LinkButton ID="lbUserid" Enabled="false" runat="server" Text='<%#Eval("user_name")%>'></asp:LinkButton>
                                            <asp:HiddenField ID="lbhdnid" runat="server" Value='<%#Eval("user_id")%>' />
                                            <ajaxToolkit:HoverMenuExtender ID="hme2" runat="Server" TargetControlID="lbUserid" PopupControlID="PopupMenu"
                                                PopupPosition="Right" Enabled="true" HoverDelay="0" HoverCssClass="popupHover">
                                            </ajaxToolkit:HoverMenuExtender>
                                            <asp:Panel ID="PopupMenu" runat="server" Width="40%">
                                                <asp:GridView ID="GridView2" runat="server" Width="40%">
                                                </asp:GridView>
                                            </asp:Panel>
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                    <asp:CommandField ShowEditButton="True" />
                                    <asp:ButtonField CommandName="Remove" Text="Delete" />
                                </Columns>
                                <FooterStyle Font-Bold="True" />
                            </asp:GridView>
                        </div>
                    </ContentTemplate>
                </asp:UpdatePanel>
            </div>
        </form>
    </body>
    </html>
    

    cs:

    protected void Page_Load(object sender, EventArgs e)
            {
                DataTable dt = new DataTable();
                dt.Columns.AddRange(new DataColumn[4] { new DataColumn("user_name"), new DataColumn("date"), new DataColumn("location"), new DataColumn("user_id") });
                dt.Rows.Add("AA", "30/03/2020", "location", "1");
                dt.Rows.Add("BB", "30/03/2020", "location", "2");
                dt.Rows.Add("CC", "30/03/2020", "location", "3");
                dt.Rows.Add("DD", "30/03/2020", "location", "4");
                dt.Rows.Add("EE", "30/03/2020", "location", "5");
                dt.Rows.Add("FF", "30/03/2020", "location", "6");
                dt.Rows.Add("GG", "30/03/2020", "location", "7");
    
                GVRequirement.DataSource = dt;
                GVRequirement.DataBind();
                GVRequirement.HeaderRow.TableSection = TableRowSection.TableHeader;
            }
    
            private DataTable PopulateRequirement()
            {
                DataTable dt = new DataTable();
                dt.Columns.AddRange(new DataColumn[5] { new DataColumn("FirstName"), new DataColumn("LastName"), new DataColumn("ID"), new DataColumn("Phone1"), new DataColumn("username") });
                dt.Rows.Add("AA", "aa", "1", "000", "Aa");
                dt.Rows.Add("BB", "bb", "2", "000", "Bb");
                dt.Rows.Add("CC", "cc", "3", "000", "Cc");
                dt.Rows.Add("DD", "dd", "4", "000", "Dd");
                dt.Rows.Add("EE", "ee", "5", "000", "Ee");
                dt.Rows.Add("FF", "ff", "6", "000", "Ff");
                dt.Rows.Add("GG", "gg", "7", "000", "Gg");
                return dt;
            }
            protected void GVRequirement_RowDataBound(object sender, GridViewRowEventArgs e)
            {
    
                if (e.Row.RowType == DataControlRowType.DataRow)
                {
                    DataRowView dr = (DataRowView)e.Row.DataItem;
                    string user_id = dr["user_id"].ToString();
                    GridView secondGrid = (GridView)e.Row.FindControl("GridView2");
    
                    DataTable dtForSecondGrid = new DataTable(); //here you populate this table with values by passing the key 'menuid'
                    dtForSecondGrid = PopulateRequirement();
                    secondGrid.DataSource = dtForSecondGrid;
                    secondGrid.DataBind();
                }
            }

    Result:

    Best Regard,

    Yang Shen

    Monday, March 30, 2020 5:52 AM
  • User1052662409 posted

    Below is the demo which could show the hover menu, maybe you could find somewhere different from your code:

    But in your output, there is no CSV, Excel, PDF, Print button to export

    Monday, March 30, 2020 6:53 AM
  • User-719153870 posted

    Hi demoninside9,

    Sorry i missed the buttons but i don't think this issue is caused by the buttons and it turns out i'm right.

    Have you checked the devtools like i suggested? Any error message?

    Best Regard,

    Yang Shen

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, March 31, 2020 2:06 AM