Different Gridview Operations

We use gridview control for different purpose in our application. Here I am explanning some of the
most useful operations using gridview
Here I am showing the final results of the various samples. You can download the complete source in end of the article.

• Search in Gridview


• General Edit operations with Gridview.


• Showing Image in gridview.


• Showing Image in gridview from Databas


• Gridview with checkboxes


• Modalpopup with Gridview


• Hovermenu with Gridview


• Import Excel to Gridview


• Import Gridview to Excel


• Using Filters in Gridview

Search in Gridview
Some times we need search the inner details of a gridview. For this requirement we can use this functionality.

General Edit operations with Gridview.
This is very common operation. But really useful when we have few columns

Showing Image in gridview.
Some times we have to show Images inside gridview which are placed in one folder in server.

 <asp:TemplateField HeaderText="Image">

           <ItemTemplate>

            <img src="Images/<%# DataBinder.Eval(Container.DataItem, "Mobile")%>"

            width="200px"

            height="200px" />

           </ItemTemplate>

          </asp:TemplateField>

Showing Image in gridview from Databas
If the Images are stored in database, then we have to use Generic handler, by using this we can retrive the Images from database. You can find the source in download.

  <asp:TemplateField HeaderText="Image">

           <ItemTemplate>

            <asp:Image ID="imgproduct" runat="server" Width="100px" Height="100px"

            ImageUrl='<%# "Product.ashx?pid="+ Eval("PID") %>'  />

           </ItemTemplate>

          </asp:TemplateField>

Gridview with checkboxes
In many requirements we will have checkboxes in our grid. check here how to get the selected checkbox values inide the gridview

Modalpopup with Gridview
In gridview we can show the Ajax Modalpopup, when user clicks on button which placed inside a gridview.

  if (e.CommandName == "view")

        {

            string idval = e.CommandArgument.ToString();

            DataSet ds = (DataSet)Session["dbsample"];

            DataRow[] gvw = ds.Tables[0].Select("ID = '" + idval + "'");

            if (gvw.Length > 0)

            {

                txtname.Text = gvw[0]["Name"].ToString();

                txtdept.Text = gvw[0]["Department"].ToString();

                txtdesig.Text = gvw[0]["Designation"].ToString();

                txtemail.Text = gvw[0]["Email"].ToString();

                txtphone.Text = gvw[0]["Phone"].ToString();

                txtaddress.Text = gvw[0]["Address"].ToString();

            }

           

            ModalPopupExtender1.Show();

        }

Hovermenu with Gridview
Check out this example, how to integrate a hovermenu with the gridview

   protected void grdImage_RowDataBound(object sender, GridViewRowEventArgs e)

    {

        if (e.Row.RowType == DataControlRowType.DataRow)

        {

            AjaxControlToolkit.HoverMenuExtender hme = e.Row.FindControl("HoverMenuExtender1") as AjaxControlToolkit.HoverMenuExtender;

            e.Row.ID = "row" + e.Row.RowIndex.ToString();

            Panel hf = e.Row.FindControl("pnl1") as Panel;

            hme.TargetControlID = e.Row.ID;

        }

    }

Import Excel to Gridview
Check how to Import a XL file and bind it grid view

Import Gridview to Excel
Export the selected rows in gridview to Excel

Using Filters in Gridview
Check here how to use the filters in gridview

Source Code

Working with POPUPs in ASP.Net

In an application I have a requirement like in this way. There are some details about USER like User Name, First Name, Last Name, Email, Mobile Number, and City. After that I have Four buttons with named as Search, Clear, Save, Delete.
You can see the Screen Shot

Here the main functionality is when I click on Search button a POPUP Window has to be opened that window contains search functionality for users. When I open the window it will provide a functionality to search user by User Name, City Name. When I provide User Name or City Name and clicked on Search button it will display all related details in Grid. And this grid has to be allowing me to select a row. When I clicks on any row of the grid automatically the grid has to be closed and a selected row detail has to be displayed in the Main Form where search button located.

Search Screen shot

In order to achieve this functionality I used Java script with DOM, which allow me to send the search results to Parent window when user clicks on the grid and to close pop window.

search results

Grid contains hyper links when user clicks on that one it will call a Java script function. Here is the sample code..!

<asp:TemplateField HeaderText="User Name">
<ItemTemplate>
<a style="cursor: hand" onmouseover="this.style.textDecoration='underline'" onmouseout="this.style.textDecoration='none'"
name="UserName" onclick="javascript:CalltoParent(this)" runat="server"
id="uname">
<%# DataBinder.Eval(Container.DataItem, "UserName") %>
</a>
</ItemTemplate>
</asp:TemplateField>

When user clicks it will call “CalltoParent” and here we are passing the Current Node value.
Java Script function can be written as..!

 function CalltoParent(user)
      {
        if(window.opener!=null){
          if(window.opener.document.getElementById('txtuname')!=null){
             var uval=user.parentNode.parentNode;
             window.opener.document.getElementById('txtuname').value = uval.childNodes[0].childNodes[0].innerText;
             window.opener.document.getElementById('txtfname').value = uval.childNodes[1].childNodes[0].innerText;
             window.opener.document.getElementById('txtlanme').value = uval.childNodes[2].childNodes[0].innerText;
             window.opener.document.getElementById('txtmail').value = uval.childNodes[3].childNodes[0].innerText;
             window.opener.document.getElementById('txtmobile').value = uval.childNodes[4].childNodes[0].innerText;
             window.opener.document.getElementById('txtcity').value = uval.childNodes[5].childNodes[0].innerText;
             window.close();
          }
          return true; 
        }
      }

Source Code