locked
JQuery Grid Height Control not works on ajaxToolkit:TabPanel RRS feed

  • Question

  • User1356263470 posted

    I make a jquery function in external file to control the asp.Gridview Height as per window screen and linked it in sitemaster. It works fine on single page, but in Multiple ajaxToolkit:TabPanel page it works only once when page load. but when i switch the tab its not control the grid's height (Jquery Not works) on other tabs. how can i fix it for each tabs when i switch from one to another. Please help. the Code is mention below.
    Javascript Code:

    $(function () {
        var n = $(".grdheight100 table tbody tr").length;
    
        if (n < 30) {
            $(".grdheight100").css({ "padding-right": 17 + 'px', 'height': 'auto', 'background-color':'white' });
        }
        else {
        $('.grdheight100').css({ 'height': (($(window).height()) - 185) + 'px'});
    
        $(window).bind('resize', function () {
            $('.grdheight100').css({ 'height': (($(window).height()) - 185) + 'px'});
            //alert('resize');
        });
        }
    });
    
    
    $(document).ready(function () {
        var gridHeader = $('asp:GridView').clone(true);
        
        $(gridHeader).find("tr:gt(0)").remove();
        $('asp:GridView tr th').each(function (i) {
            $("th:nth-child(" + (i + 1) + ")", gridHeader).css({ 'width': ($(this).width()).toString() + "px", "line-height": 30 + "px" });
        });
        $(".controlHead").append(gridHeader);
        $('.controlHead').css('position', 'absolute');
        $('.controlHead').css('top', $('asp:GridView').offset().top);
    });

    ASP.net Code:

    <ajaxToolkit:TabContainer ID="tabMain" runat="server" CssClass="Tab" Style="margin-top: -12px" AutoPostBack="true" OnActiveTabChanged="tabMain_ActiveTabChanged">
        <%--Tab 1 CRMDesignation--%>
        <ajaxToolkit:TabPanel BackColor="White" runat="server" ID="tabDesignation" HeaderText="Designation" TabIndex="0">
            <ContentTemplate>
                <div class="row mpbottom">
                    <asp:Panel ID="Panel1" runat="server" Visible="true">
                        <div class="col-lg-1 col-md-1 col-sm-12 col-xs-12  lmzero">
                            <asp:HiddenField ID="hfID1" runat="server" />
                            <asp:TextBox ID="txtDesignationID1" placeholder="ID" ToolTip="Designation ID" Height="30px" MaxLength="5" CssClass="form-control myform-control input-sm" runat="server"></asp:TextBox>
                        </div>
                        <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12  lmzero">
                            <asp:TextBox ID="txtDesc1" placeholder="Description" ToolTip="Description" Height="30px" MaxLength="100" CssClass="form-control myform-control input-sm" runat="server"></asp:TextBox>
                        </div>
                        <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12  mbtntop lmzero text-right">
                            <div class="btn-group">
                                <asp:LinkButton ID="btnSearch" CssClass="btn btn-success btn-smv1" OnClick="btnSearch_Click" Text="Search" runat="server"> <span class="glyphicon  glyphicon-search"> </span>Search</asp:LinkButton>
                                <asp:LinkButton ID="btnSave" CssClass="btn btn-success btn-smv1" OnClick="btnSave_Click" Text="Save" runat="server"> <span class="glyphicon glyphicon-save"></span>Save</asp:LinkButton>
                                <asp:LinkButton ID="btnHelp" CssClass="btn btn-dark btn-smv1" OnClick="btnHelp_Click" Text="Help" runat="server"><span class="glyphicon glyphicon-question-sign"></span>Help</asp:LinkButton>
                            </div>
                        </div>
                    </asp:Panel>
                </div>
                <div class="row">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div class="myx_panel">
                            <div class="x_content myx_content">
                                <div style="height: 30px; margin: 0">
                                    <table id="tblHeader1" class="table table-condensed"
                                           style="background-color: #2A3F54; color: white; border-collapse: collapse; height: 100%;">
                                        <tr>
                                            <td class="col-lg-1 col-md-1 col-sm-1 col-xs-1" style="text-align: left">
                                                <asp:Label ID="lblt1col1" runat="server" Text="ID"></asp:Label>
                                            </td>
                                            <td class="col-lg-10 col-md-10 col-sm-10 col-xs-10" style="text-align: left">
                                                <asp:Label ID="lblt1col2" runat="server" Text="Description"></asp:Label>
                                            </td>
                                            <td class="col-lg-1 col-md-1 col-sm-1 col-xs-1" style="text-align: center">
                                                <asp:Label ID="lblt1col3" runat="server" Text="Option"></asp:Label>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
    
                                <div class="grdheight100" style="height:450px; overflow:auto;">
                                    <asp:GridView ID="grdDesignation" runat="server" AutoGenerateColumns="False"
                                                  CssClass="table table-hover table-striped" ShowHeader="false"
                                                  DataKeyNames="ID"
                                                  OnRowCommand="grd_RowCommand" OnRowDataBound="grd_RowDataBound"
                                                  BorderStyle="None" BorderWidth="0px" CellPadding="1" GridLines="None" Font-Size="Small">
                                        <Columns>
                                            <asp:BoundField DataField="ID">
                                                <ItemStyle CssClass="col-lg-1 col-md-1 col-sm-1 col-xs-1"></ItemStyle>
                                            </asp:BoundField>
                                            <asp:BoundField DataField="Description">
                                                <ItemStyle CssClass="col-lg-10 col-md-10 col-sm-10 col-xs-10"></ItemStyle>
                                            </asp:BoundField>
                                            <asp:TemplateField>
                                                <ItemTemplate>
                                                    <div style="text-align: left; margin-left: 0px">
                                                        <%--<asp:LinkButton ID="btnView" ToolTip="View Jobs/Projects" CommandName="viewRecord"
                                                                            Text="Jobs" Font-Size="Smaller" style="padding-left:15px"
                                                                            CommandArgument='<%# Eval("ID") + ";" + Eval("DesignationID") + ";" + Eval("Name")%>' runat="server">
                                                        </asp:LinkButton>--%>
                                                        <asp:LinkButton ID="btnEdit" ToolTip="Edit this record" CommandName="editRecord"
                                                                        CommandArgument='<%# Eval("IDAuto") + ";" + Eval("ID") + ";" + Eval("Description")%>' runat="server">
                                                            <span class="glyphicon glyphicon-pencil" style="padding-left:20px"></span>
                                                        </asp:LinkButton>
                                                        <asp:LinkButton ID="btnDelete" ToolTip="Delete this record" CommandName="deleteRecord"
                                                                        CommandArgument='<%# Eval("MasterType") + ";" + Eval("IDAuto")%>' runat="server">
                                                            <span class="glyphicon glyphicon-trash"></span>
                                                        </asp:LinkButton>
                                                    </div>
                                                </ItemTemplate>
                                                <ItemStyle CssClass="col-lg-1 col-md-1 col-sm-1 col-xs-1"></ItemStyle>
                                            </asp:TemplateField>
                                        </Columns>
    
                                        <RowStyle BackColor="White" ForeColor="#333333" />
                                    </asp:GridView>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </ContentTemplate>
        </ajaxToolkit:TabPanel>
    
        <%--Tab 2 CRMLeadStatus--%>
        <ajaxToolkit:TabPanel BackColor="White" runat="server" ID="tabLeadStatus" HeaderText="Lead Status" TabIndex="1">
            <ContentTemplate>
                <div class="row mpbottom">
                    <asp:Panel ID="Panel2" runat="server" Visible="true">
                        <div class="col-lg-1 col-md-1 col-sm-12 col-xs-12 lmzero">
                            <asp:HiddenField ID="hfID2" runat="server" />
                            <asp:TextBox ID="txtLeadStatusID2" placeholder="ID" ToolTip="Lead Status ID" Height="30px" MaxLength="10" CssClass="form-control myform-control input-sm" runat="server"></asp:TextBox>
                        </div>
                        <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12 lmzero">
                            <asp:TextBox ID="txtDesc2" placeholder="Description" ToolTip="Description" Height="30px" MaxLength="100" CssClass="form-control myform-control input-sm" runat="server"></asp:TextBox>
                        </div>
                        <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 mbtntop lmzero text-right">
                            <div class="btn-group">
                                <asp:LinkButton ID="LinkButton1" CssClass="btn btn-success btn-smv1" OnClick="btnSearch_Click" Text="Search" runat="server"> <span class="glyphicon  glyphicon-search"> </span>Search</asp:LinkButton>
                                <asp:LinkButton ID="LinkButton2" CssClass="btn btn-success btn-smv1" OnClick="btnSave_Click" Text="Save" runat="server"> <span class="glyphicon glyphicon-save"></span>Save</asp:LinkButton>
                                <asp:LinkButton ID="LinkButton3" CssClass="btn btn-dark btn-smv1" OnClick="btnHelp_Click" Text="Help" runat="server"><span class="glyphicon glyphicon-question-sign"></span>Help</asp:LinkButton>
                            </div>
                        </div>
                    </asp:Panel>
                    <div class="row">
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                            <div class="myx_panel">
                                <div class="x_content myx_content">
                                    <div style="height: 30px; margin: 0">
                                        <table id="tblHeader2" class="table table-condensed"
                                               style="background-color: #2A3F54; color: white; border-collapse: collapse; height: 100%;">
                                            <tr>
                                                <td class="col-lg-1 col-md-1 col-sm-1 col-xs-1" style="text-align: left">
                                                    <asp:Label ID="lblt2col1" runat="server" Text="ID"></asp:Label>
                                                </td>
                                                <td class="col-lg-10 col-md-10 col-sm-10 col-xs-10" style="text-align: left">
                                                    <asp:Label ID="lblt2col2" runat="server" Text="Description"></asp:Label>
                                                </td>
                                                <td class="col-lg-1 col-md-1 col-sm-1 col-xs-1" style="text-align: center">
                                                    <asp:Label ID="lblt2col3" runat="server" Text="Option"></asp:Label>
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
    
                                    <div class="grdheight100" style="height:450px; overflow:auto;">
                                        <asp:GridView ID="grdLeadStatus" runat="server" AutoGenerateColumns="False"
                                                      CssClass="table table-hover table-striped" ShowHeader="false"
                                                      DataKeyNames="ID"
                                                      OnRowCommand="grd_RowCommand" OnRowDataBound="grd_RowDataBound"
                                                      BorderStyle="None" BorderWidth="0px" CellPadding="1" GridLines="None" Font-Size="Small">
                                            <Columns>
                                                <asp:BoundField DataField="ID">
                                                    <ItemStyle CssClass="col-lg-1 col-md-1 col-sm-1 col-xs-1"></ItemStyle>
                                                </asp:BoundField>
                                                <asp:BoundField DataField="Description">
                                                    <ItemStyle CssClass="col-lg-10 col-md-10 col-sm-10 col-xs-10"></ItemStyle>
                                                </asp:BoundField>
                                                <asp:TemplateField>
                                                    <ItemTemplate>
                                                        <div style="text-align: left; margin-left: 0px">
                                                            <asp:LinkButton ID="btnEdit" ToolTip="Edit this record" CommandName="editRecord"
                                                                            CommandArgument='<%# Eval("IDAuto") + ";" + Eval("ID") + ";" + Eval("Description")%>' runat="server">
                                                                <span class="glyphicon glyphicon-pencil" style="padding-left:20px"></span>
                                                            </asp:LinkButton>
                                                            <asp:LinkButton ID="btnDelete" ToolTip="Delete this record" CommandName="deleteRecord"
                                                                            CommandArgument='<%# Eval("MasterType") + ";" + Eval("IDAuto")%>' runat="server">
                                                                <span class="glyphicon glyphicon-trash"></span>
                                                            </asp:LinkButton>
                                                        </div>
                                                    </ItemTemplate>
                                                    <ItemStyle CssClass="col-lg-1 col-md-1 col-sm-1 col-xs-1"></ItemStyle>
                                                </asp:TemplateField>
                                            </Columns>
    
                                            <RowStyle BackColor="White" ForeColor="#333333" />
                                        </asp:GridView>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
            
            </ContentTemplate>
        </ajaxToolkit:TabPanel>
    </ajaxToolkit:TabContainer>
    Tuesday, February 6, 2018 7:07 AM

All replies

  • User-474980206 posted
    Because the update panel replaces the HTML, you must reapply the markup after every update panel update. The the update panel clients to hookup your code,
    Wednesday, February 7, 2018 1:37 AM