GridView with Fixed Header & Scroll Bar

Hi,

In previous posts, I have completed two important topics of GridView.

1. Paging in GridView
2. Scroll Bars in GridView

Today, Lets learn another new and important trick with GridView, i.e. Fixed Headers. When we have to scroll through GridView, then there is must have feature that is Fixed Header. On recent post I have written about Fixed Headers in Excel, did you get chance to read them. We are doing exactly same task here. But here we do not have "Fix Pane" as in Excel anywhere. Lets do this with simple CSS and some enhance with code-behind.

Also, Today I am using Manual method of GridView creation, in previous demos and posts, I have used Drag & Dropped GridView control. Today here is manually coded GridView. 

Lets see code for ASPX page.

            <h2 align="center">GridView with Fixed Header</h2>
            <div style="height: 400px; overflow: auto" align="center">
                <asp:GridView ID="gvDistricts" runat="server" HeaderStyle-CssClass="FixedHeader" HeaderStyle-BackColor="YellowGreen" 
                    AutoGenerateColumns="false" AlternatingRowStyle-BackColor="WhiteSmoke" OnRowDataBound="gvDistricts_RowDataBound">
                    <Columns>
                        <asp:TemplateField HeaderText="District ID" HeaderStyle-Width="80px" ItemStyle-Width="80px">
                            <ItemTemplate>
                                <asp:Label ID="lblDistID" runat="server" Text='<%#Eval("DistID")%>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                    <Columns>
                        <asp:TemplateField HeaderText="District Name" HeaderStyle-Width="120px" ItemStyle-Width="120px">
                            <ItemTemplate>
                                <asp:Label ID="lblDistName" runat="server" Text='<%#Eval("DistName")%>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                    <Columns>
                        <asp:TemplateField HeaderText="Description" HeaderStyle-Width="200px" ItemStyle-Width="200px">
                            <ItemTemplate>
                                <asp:Label ID="lblDistDesc" runat="server" Text='<%#Eval("DistDesc")%>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView>
            </div>

In above design, Notable code is style for DIV which will make this GridView scrollable if its height exceeds than 400px. Another notable code is HeaderStyle-CssClass="FixedHeader". This line of code will apply a custom CSS Class named FixedHeader which we will create in while to do the task required. Before doing this lets bind this GridView with Data. Lets move to Back-end.
I am using data from a SQL table, which simply contains, DistrictID, DistName, DistDesc as its field and approx 25 records filled.

We have nothing to do more here. So simply write the databind code inside Page_Load Event.

protected void Page_Load(object sender, EventArgs e)
    {
        string ConStr = "Data Source=.\\sqldb;Initial Catalog=ShikshaNet;Integrated Security=True";
        if (!IsPostBack)
        {
            string Query = "SELECT * FROM Districts";
            SqlConnection con = new SqlConnection(ConStr);
            SqlDataAdapter adp = new SqlDataAdapter(Query, con);
            DataTable dt = new DataTable();
            adp.Fill(dt);
            gvDistricts.DataSource = dt.DefaultView;
            gvDistricts.DataBind();
        }
    }

Now lets loot at browser to know how it looked.

 Perfect as designed. Lets scroll it and look for headers.

Oh! no, Headers are not visible. Lets start what we left at beginning. Add some style to GridView. Just navigate inside Head section of HTML and then add below code. This is stylesheet, you can customize as your requirement, but remember to change your Class name in GridView also if you are changing class name here.

<style type="text/css">
        .FixedHeader {
            position: absolute;
            font-weight: bold;
        }      
    </style>

OK, Lets refresh browser to see the changes.

 On scrolling,

Perfect, Headers are on top. But there is some problem. If you noticed, First record of GridView is not visible. It has dis-appeared. To make that record visible. Lets use a trick. Write some code in RowDataBound Event of GridView.

   protected void gvDistricts_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            if (e.Row.RowIndex == 0)
                e.Row.Style.Add("height", "50px");
        }
    }

We just told Server to add some space if the RowIndex is 0 means first row of GridView should have atleast double space so that the value can be visible.
Lets see the output.

Bingo! You have created a perfect and complete GridView with Fixed Headers. You can use this code and it works fine even used with Paging across multiple browsers.

Thanks to +Amit Jain for the Top row fix which he has posted in his blog at Scrollable GridView With Fixed Headers Asp.Net.
If you found this post useful or helpful, or you have some suggestions to make, please post as comment or send me message on Google+ also.
+John Bhatt 

Tags: Gridview, ASP.NET, Tutorials by John Bhatt, P.Yar.B Complex, Fixed, Freeze, Headers, CSS, C-Sharp, Scrollbar, Tricks

Read More

Fix one or more Rows (Header) in Microsoft Excel

Hi,

Lets work with excel some more. After long back, I am going to continue my Excel series. Today we will learn about a very useful feature of Microsoft Excel.

Suppose we have headers in top row or 2nd or third row and lots of data. Suppose a thousand records or more. This generally happens at offices, schools and various workstations. We need to scroll down the page to view records but while it is large, we get confused with data, It is confusing that what is field header (i.e. What is data).

Lets be clear with below small example.

If above excel sheet. I have maintained ledger balance of Drivers of my company. This file has 2855 Rows (your file might have more or less).

While I have to view other records, I have to scroll the page. This will look like this snapshot.

What data is in column F, or G or H. If I do not remember, we have to scroll back and view headers and then come back to last position. To overcome this problem, Microsoft Excel has built-in feature called Freeze Rows or Panes. In this post, we will learn how to fix a Top row or more rows at same time.
If you are using Excel 2007, 2010 and 2013 the method is similar.

Lets go to process.

1. If Top row of your sheet is header, you need not to do anything, But if you have headers in second or third row, Select entire row below from header row by clicking in Row name..
2. Click on View Tab on Office Ribbon.
3. Click on Freeze Top Row if header in First row or Freeze Panes if header in second or third row. 

Now look at this. How it looked after scrolling down.

One thing most important about this feature. Your settings are saved within file. Means if you share file with other via email or other sharing tools, your settings remains same even if Microsoft Office version changes or system varies.

All the Best. If you found if helpful, do not forget to post a thank or +1 on Google.
+John Bhatt 

Read More

Custom WordPress Admin Style

Hello,

If you are a blogger, you must be using WordPress. WordPress is a blogging platform which is widely used a CMS and most used CMS by worlds developers which is downloaded by uncountable times. Latest version of WordPress is 3.7 which is release on Oct 24 2013. As on 28 Oct 11.50 PM IST, it has been downloaded 1.6 Million times.

Definitely, I am not here to define or describe WordPress. We all have used WordPress and its Admin Interface also. Which allows us to change Themes for WordPress created website and many such functionality. But we are going to change Administration Theme without any Theme. We will use a simple Plugin created by the creator of WordPress Matt Mullenberg.

By default It has Admin Theme like below snapshot.

Now search for a plugin in WordPress plugin directory named MP6. For your convenience link for MP6 plugin is http://wordpress.org/plugins/mp6/.
Download and Install MP6 in your wordpress installation. How above page looked after installing MP6 is below.

 Admin Dashboard

Add  New Post 

I just found it very nice and wanted to share with you. I am not affiliated with WordPress in anyway commercially. However I use it and love its feature as Blog engine.

You can add me on +John Bhatt and follow our page at P.Yar.B Complex at Google+

Tags: WordPress, personalize, admin, configuration, plugin, admin-theme 

Read More

Pagination in GridView

Hi,
Simply we will learn here how to Apply Pagination in ASP.NET GridView Control.
Directly to Code:
In ASPX page, enable paging in GridView.

<asp:GridView ID="gvAllPOD" runat="server" AutoGenerateColumns="false" 
AlternatingRowStyle-BackColor="LightSeaGreen" HeaderStyle-Font-Bold="true" 
AllowPaging="true" PageSize="20" onpageindexchanging="gvAllPOD_PageIndexChanging">

In Above Code, we Automatically Generated Columns from DataSource Then AllowPaging = True, so that GridView Data can be Paged, Also We defined PageSize that what amount of Records whould display in Page.
To Apply Pagination, RIght Click in GridView and Choose Properties > Events. Choose PageIndexChanged event and Place Following code in ASPX.CS Page.

protected void gvAllPOD_PageIndexChanging(object sender, GridViewPageEventArgs e)
    {
        gvAllPOD.PageIndex = e.NewPageIndex;
        BindGVAllPOD();
    }

Now Check on your Page. What is Happening on Clicking Page Number. You can comment if some queries on above code.
John Bhatt
Glad to Know, Free to Share

Tags: Pagination, Paging, GridView, ASP.NET, Disply data in Page, Tutorial bt John Bhatt

Read More