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

Playing Videos - Part II

In Playing Videos-I I have been explained to upload a videos, how convert video from one format to another format and how to generate thumbnail automatically. In this post I am going to expalin how to retrive the videos and thumbnail dynamically from database.

First I am starting with DataBase part, Here I am creating a table called videos. And it contains 3 fields the are
Video_ID,Video_File,Video_Image. You can see the table design pic.

Here "Video_File" field contains Name of the video with extension. Here I am going to store the file name only. But the video file is located in server. "Video_Image" is the thumbnail file name with extension. Same as video thumbnail also located in server.

When I am uploading video, I am going to save the videofilename, Image name in database. Here I used very simple code to insert this details. Here is the code.....

private void Savedetails()
{
string filename, imgname;
filename = Session["outputfile"].ToString();
imgname = Session["thumbname"].ToString();
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["TestConnectionString"].ConnectionString);
con.Open();
SqlCommand cmd = new SqlCommand("insert into video(Video_File,Video_Image) values('" + filename + "','" + imgname + "')", con);
cmd.ExecuteNonQuery();
cmd.Dispose();
con.Close();
}

You can use stored procedures in back end for the better performance. Once the video uploading is finished then I am going to show these details in DataList. Here is the code to bind the video thumbnail in Datalist

<asp:DataList ID="dtlstVideo" runat="server" GridLines="Vertical"
RepeatColumns="2" RepeatDirection="Horizontal" BackColor="White"
BorderColor="#999999" BorderStyle="None" BorderWidth="1px" CellPadding="5">
<ItemTemplate>
<td><a href="Play.aspx?vid=<%# DataBinder.Eval(Container.DataItem, "Video_ID") %>">
<img src="Video/Thumb/<%# DataBinder.Eval(Container.DataItem, "Video_Image") %>" border="0" />
</a>
</td>
</ItemTemplate>
<FooterStyle BackColor="#CCCCCC" ForeColor="Black" />
<AlternatingItemStyle BackColor="#DCDCDC" />
<ItemStyle BackColor="#EEEEEE" ForeColor="Black" />
<SelectedItemStyle BackColor="#008A8C" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#000084" Font-Bold="True" ForeColor="White" />
</asp:DataList>

when the user click on the datalist it will be redirected to play.aspx with video ID as the query string. In the
play.aspx page I am goign to bind the SWF player with video file name. Here is the code...

string vid,vfname;
protected void Page_Load(object sender, EventArgs e)
{
vid = Request.QueryString["vid"].ToString();
DataSet dst = (DataSet)Session["videods"];
DataRow[] dw = dst.Tables[0].Select("Video_ID= '"+ vid +"'");
if (dw.Length > 0)
{
vfname = dw[0]["Video_File"].ToString();
}
string plyr = "<embed src='Players/flvplayer.swf' width='425' height='355'
bgcolor='#FFFFFF' type='application/x-shockwave-flash'
pluginspage='http://www.macromedia.com/go/getflashplayer'
flashvars='file=Video/SWF/" + vfname + "&autostart=false&frontcolor=0xCCCCCC&
backcolor=0x000000&lightcolor=0x996600&showdownload=false&showeq=false&repeat=false&
volume=100&useaudio=false&usecaptions=false&usefullscreen=true&usekeys=true'>
</embed>";
plh.Controls.Add(new LiteralControl(plyr));
}

You can see the screen shot of playing a video dynamically..

Source Code

Reading Contacts(Address Book) from Yahoo, Gmail, Rediff, MSN, AOL

When we are developing a scoal networking websites or Some Referal websites, when the user registration completed then we have to provide an interface to invite the registerd user friends. For this purpose we have to provide option to get contcats (AddressBook) from various Email Providers.

Here I am taking some popular Email Providers like Yahoo, Google, MSN, Rediff, AOL. In order to Read the Address book of Yahoo, Google, Rediff, MSN, AOL we have access the API which provided by them itself.
Few days before I download one one dll from net. Its provided by Ideabubling. It contains all API of Yahoo,Google, Rediff, MSN, AOL, which is ready to use. Here In this application I use the dll.

The Core Functionality is, when user provides Email Address and Password, If these details are valid then we will call getContact method and these details are stored in DataTable. You can see the sample code here..

DataTable dtContatct = new DataTable();

MailType mt = FindTheMailType();

MailClient.GetContacts(mt, strUserid, strPassword, out boolIsOK, out dtContatct, out strError);

dtContatct = MailClient.GetFormat(mt, dtContatct);

Here “mt” is the mail type. It will check what type of Email Address It is. Either Yahoo, Gmail, etc.
Then this DataTable is binded with GridView, so that User can able to see his contcats and he can select some of the or all to send a mail.
You can see the Screen Shot..

Download Complete Application.. Click Here..!

Ajax ModalPopupExtender

Actual Functionality Of A Modal Popup:
Modal pop ups were among the first JavaScript effects to be widely adopted by web Sites like Google and Amazon who were looking for an interactive edge with their Customers.

The window.alert( ) method implements the effect, however, the layout of these pop ups could not be changed. Thanks to CSS and the DOM, today you can Create better pop ups, without the need to open new windows.

Modal pop ups are commonly generated by creating a new DOM element (usually a <div> container), using JavaScript to display the element, then CSS to style it. To Make the pop up modal, you also create a second <div> element that consumes the Complete display area of the browser.

Then using the z-order CSS property (which Sets the virtual z coordinate of an element, effectively placing elements in front of or Behind each other), stack both elements over the current content of the page; “100%
display area” <div> first, then the pop up <div>.

Now The stacking part is taken care of by ASP.NET AJAX; you just have to provide the rest.

Then, the original content of the page is still visible, but since a 100 percent width, 100 percent height element is placed over it, the user cannot click any links outside the pop up, effectively making the pop up modal.

Steps for Creating Modal popup:
The first step to implement this is to create the appropriate CSS classes. We need two: one for the pop up, one for the 100 percent display area <div>.
For the first class, we just apply a border, a background color, and a width (the height is determined automatically by the browser’s rendering engine):

.popup {
border: solid;
background-color: yellow;
width: 200px;
}

The second CSS class also uses a background color, such as gray, but we also set an opacity value so that the background (the content of the page) is visible through the element. Internet Explorer supports the filter property for this task, and all other browsers use the opacity style.

.content {
background-color: grey;
filter: alpha(opacity=50);
opacity: 0.5;
}

Next, we need a server control to display the modal pop up. A link is a good choice:
<asp:HyperLink ID="HyperLink1" runat="server" Text="More ..." NavigateUrl="#" />
Now we create the actual pop up. As shown here, the user could be prompted to log in:

<asp:Panel ID="popupPanel" runat="server" CssClass="popup">
<p>Login to get more information!<br />
User <input type="text" /> - Password <input type="password" />
<input type="button" value="Login" id="Button1" runat="server" />
</p>
</asp:Panel>

Finally, the ModalPopupExtender from the ASP.NET AJAX Control Toolkit comes into play. It lets you create a modal pop up that can be put over the current content of the page. This includes a bit of work, both from the toolkit and from you. You will need the following properties for ModalPopupExtender:

BackgroundCssClass:The CSS class to use to make the page’s contents look disabled
PopupControlID:The ID of the pop up to display
TargetControlID:The ID of the element that triggers showing the pop up
OKControlID:The ID of the element that lets the pop up disappear
(The default position is the center of the page.)

A Complex Modal PopUp:
In this situation, Assume that we have a Registration form which may contains username, password, conformpassword,Email. Then we have a Register Button, when user clicks on Register Button we have to perform Following actions

• Check the validation
• If validation success then dispaly Licensense Aggreement in ModelPopup.

In this situation modelpopup will not display if gave TargetControlID="btnregister". For this purpose we have to take an hidden button pass the hidden button id as TargetControlID.
In the register button click event write the follwing code
modelpopup.show();
Now when the validation successful then only modal popup control visible.
You can download the complete source code. Click Here