Using Scrollable GridView with Fixed headers inside AJAX TabContainer control in ASP.Net

Last Reply on Dec 04, 2013 03:24 AM By Mudassar

Posted on Dec 03, 2013 09:43 PM

I am working with asp.net tab control currently with two tabs.  The first tab is a list of jobs to be worked.  The gridview id is "gvJobs".  I call the ScrollableGridPlug via

$(document).ready( 

function () {

        $('[id*=gvJobs]').Scrollable({

            ScrollHeight: 450

        });

    });

The gridview for this tab works fine, however, the second tab is a list of equipment available for use.  The id for this gridview is "grEquip".  I call the scrollableplugin via

$(document).ready(

function () {

        $('[id*=grEquip]').Scrollable({

            ScrollHeight: 450

        });

    });

When i click at the Equip Tab is get a blank gridview.  There is a scrollbar on the left side indicating there is data in the gridview; however there is nothing visible.  What am i doing wrong?  Additionally is there a way to scrollable function when I click on the appropriate tab?

 

Posted on Dec 04, 2013 03:24 AM

This way

    <form id="form1" runat="server">
    <cc1:ToolkitScriptManager runat="server">
    </cc1:ToolkitScriptManager>
    <asp:UpdatePanel ID="up" runat="server">
        <ContentTemplate>
            <cc1:TabContainer ID="tabDemo" runat="server" OnClientActiveTabChanged="TabChanged">
                <cc1:TabPanel ID="tabPanelDemo" HeaderText="Customers" runat="server">
                    <ContentTemplate>
                        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
                            <Columns>
                                <asp:BoundField DataField="CustomerID" HeaderText="CustomerID" />
                                <asp:BoundField DataField="City" HeaderText="City" />
                                <asp:BoundField DataField="Country" HeaderText="Country" />
                                <asp:BoundField DataField="PostalCode" HeaderText="PostalCode" />
                            </Columns>
                        </asp:GridView>
                    </ContentTemplate>
                </cc1:TabPanel>
                <cc1:TabPanel ID="tabPanelDemo2" HeaderText="Customers2" runat="server">
                    <ContentTemplate>
                        <asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="false">
                            <Columns>
                                <asp:BoundField DataField="CustomerID" HeaderText="CustomerID" />
                                <asp:BoundField DataField="City" HeaderText="City" />
                                <asp:BoundField DataField="Country" HeaderText="Country" />
                                <asp:BoundField DataField="PostalCode" HeaderText="PostalCode" />
                            </Columns>
                        </asp:GridView>
                    </ContentTemplate>
                </cc1:TabPanel>
            </cc1:TabContainer>
        </ContentTemplate>
    </asp:UpdatePanel>
    <script src="../Scripts/jQuery_1.8.3.js" type="text/javascript"></script>
    <script src="../Scripts/ScrollableGridViewPlugin_ASP.NetAJAXmin.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("[id*=GridView1]").Scrollable({
                ScrollHeight: 300,
                IsInUpdatePanel: true
            });
        });
        var isApplied = false;
        function TabChanged(sender, args) {
            if (!isApplied) {
                if (sender.get_activeTabIndex() == 1) {
                    $("[id*=GridView2]").Scrollable({
                        ScrollHeight: 300,
                        IsInUpdatePanel: true
                    });
                    isApplied = true;
                }
            }
        }
    </script>

 

protected void Page_Load(object sender, EventArgs e)
    {
        if (!this.IsPostBack)
        {
            this.PopulateCustomers();
        }
    }

    public void PopulateCustomers()
    {
        string constr = ConfigurationManager.ConnectionStrings["constr2"].ConnectionString;
        string sqlStatment = "select CustomerID,City,Country,PostalCode from customers";
        using (SqlConnection con = new SqlConnection(constr))
        {
            using (SqlCommand cmd = new SqlCommand(sqlStatment, con))
            {
                using (SqlDataAdapter da = new SqlDataAdapter(cmd))
                {
                    DataSet ds = new DataSet();
                    da.Fill(ds);
                    this.GridView1.DataSource = ds;
                    this.GridView1.DataBind();
                    this.GridView2.DataSource = ds;
                    this.GridView2.DataBind();
                }
            }
        }

    }