Saturday, 31 August 2013

Scrollable GridView using JQuery...?


 
I have a Gridview, in my GridView I have thousands of Rows. Previously I'm displaying my Grid using paging concept. But now my requirement is to display the data with Scrolling option with Headers should be fixed. To follow the below steps we can easily do this...


STEP 1:


Using below styles we give some colors of the headers and set the position.


< style type="text/css">
.GVFixedHeader
        {
            font-weight: bold;
            background-color:DarkBlue;
            color:White;
            position: relative;
            top: expression(this.parentNode.parentNode.parentNode.scrollTop-1);
        }
 .GridviewScrollPager
        {
            border-top: 1px solid #AAAAAA;
            background-color: #FFFFFF;
        }
</style>




STEP 2:


And call this class in GridView HeaderStyle and FoterStyle properties itself. Use the below sample code


<HeaderStyle Font-Bold="True" ForeColor="White" CssClass="GVFixedHeader" />
<PagerStyle ForeColor="White" HorizontalAlign="Center" CssClass="GridviewScrollPager" />


STEP 3:



Add JQuery Plugins, for this we download from below link use the below link and download the plugins.

STEP 4:


After download JQuery plugins you just keep it that plugins in script folder and call that plugins using below lines of code


<script type="text/javascript" src="../Scripts/jquery1.8.2.min.js"></script>
<script type="text/javascript" src="../Scripts/jquery1.9.1.min.js"></script>
<script type="text/javascript" src="../Scripts/gridviewScroll.min.js"></script>
<script type="text/javascript">
        $(document).ready(function () {
            gridviewScroll();
        });

        function gridviewScroll() {
            $('#<%=GV.ClientID%>').gridviewScroll({
                width: 1100,
                height: 200
            });
        } 
</script>


STEP 5:


Design your page like below.


<asp:GridView runat="server" ID="GV" 
       AutoGenerateColumns="false">
      <RowStyle BackColor="#EFF3FB" />
      <PagerStyle BackColor="#2461BF" ForeColor="White"
       HorizontalAlign="Center" />
      <HeaderStyle CssClass="GVFixedHeader" />
      <FooterStyle CssClass="GVFixedFooter" />
      <AlternatingRowStyle BackColor="White" />
      <Columns>
         <asp:TemplateField HeaderText="Material" HeaderStyle-Width="8%">
             <ItemTemplate>
                 <asp:Label ID="lblMaterial" runat="server" Text='<%# Bind_Material(Convert.ToString(Eval("Material")))%>'/>
                 <asp:Label ID="lblMaterial_Id" runat="server" Text='<%#DataBinder.Eval(Container.DataItem,"Material_Id") %>' Visible="false"/>
             </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Items" HeaderStyle-Width="8%" HeaderStyle-HorizontalAlign="center">
            <ItemTemplate>
                <asp:Label ID="lblItem" runat="server" Text='<%#DataBinder.Eval(Container.DataItem,"Item") %>'/>
                <asp:Label ID="lblItem_Id" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"Item_Id") %>' Visible="false"/>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Grade" HeaderStyle-Width="8%" HeaderStyle-HorizontalAlign="center">
             <ItemTemplate>
                 <asp:Label ID="lblGrade" runat="server" Text='<%#DataBinder.Eval(Container.DataItem,"Grade") %>'/>
                 <asp:Label ID="lblGrade_Id" runat="server" Text='<%#DataBinder.Eval(Container.DataItem,"Grade_Id") %>' Visible="false"/>
             </ItemTemplate>
        </asp:TemplateField>

      </Columns>
</asp:GridView>


STEP 6:


In code behind wrote below lines of code and see the result


protected void Page_Load(Object sender, EventArgs e)
{
    DataTable dt1= // bind your Data;
    if(dt1.Rows.Count>0)
    {
       gvdetails.DataSource=dt1;
       gvdetails.DataBind();
    }
    else
    {
       DataTable dt = new DataTable();
       dt.Columns.Add("Material");
       dt.Columns.Add("Material_Id");
       dt.Columns.Add("Grade");
       dt.Columns.Add("Grade_Id");
       dt.Columns.Add("Item");
       dt.Columns.Add("Item_Id");
       DataRow dr;
       dr = dt.NewRow();
       dt.Rows.Add(dt.NewRow().ItemArray);
       GV.DataSource = dt;
       GV.DataBind();
       GV.Rows[0].Visible = false;
       GV.Rows[0].Controls.Clear();
    }
}


follow above mentioned all points and see the result.

OutPut: