GridView Sorting Using jQuery Plugin

Introduction

This article describes how to use GridView in ASP.Net and jQuery. We can do it server-side but if you do it using jQuery then you are putting less load on the server. You can handle it client-side.

Description

To create this application you need the jQuery plugins listed below.

• jquery.tablesorter.min.js
• jquery-1.4.3.min.js

You can download them from the source code attached in this page.

Design

Add a GridView with AutogeneratedColumn=false and apply any design.

Now design your screen like the following screen:



Or you can copy the following source code:

<form id="form1" runat="server">
     <div>
         <asp:GridView ID="gvDept" runat="server" AutoGenerateColumns="False" BackColor="LightGoldenrodYellow" BorderColor="Tan" BorderWidth="1px" CellPadding="2" ForeColor="Black" GridLines="None">
             <AlternatingRowStyle BackColor="PaleGoldenrod" />
             <Columns>
                 <asp:BoundField DataField="DEPTNO" HeaderText="Id">
                     <ItemStyle Width="50px" />
                 </asp:BoundField>
                 <asp:BoundField DataField="DNAME" HeaderText="Dept Name" />
                 <asp:BoundField DataField="LOC" HeaderText="Location" />
             </Columns>
             <FooterStyle BackColor="Tan" /> 
            <HeaderStyle BackColor="Tan" Font-Bold="True" />
             <PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue"
  HorizontalAlign="Center" />
             <SelectedRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" />
             <SortedAscendingCellStyle BackColor="#FAFAE7" /> 
            <SortedAscendingHeaderStyle BackColor="#DAC09E" /> 
            <SortedDescendingCellStyle BackColor="#E1DB9C" />
             <SortedDescendingHeaderStyle BackColor="#C2A47B" />
         </asp:GridView>
     </div>
     </form>
 Next add the following JavaScript and CSS style code in the head tag (it's used for sorting):<style type="text/css">        th
        {
            cursor: pointer;
            background-color: #dadada;
            color: Black;
            font-weight: bold;
            text-align: left;
        }
        th.headerSortUp
        {
            background-image: url(images/asc.gif);
            background-position: right center;
            background-repeat: no-repeat;
        }
        th.headerSortDown
        {
            background-image: url(images/desc.gif);
            background-position: right center;
            background-repeat: no-repeat;
        }
        td
        {
            border-bottom: solid 1px #dadada;
        }
    </style>    
<script src="scripts/jquery-1.4.3.min.js" type="text/javascript"></script>    
<script src="scripts/jquery.tablesorter.min.js" type="text/javascript"></script>     
<script type="text/javascript">       
 $(document).ready(function () {
            $("#gvDept").tablesorter();
        });
    </script>

Now go to the code view.

Write the BindGrid method using the database or you can use a static datatable.

After binding, write these two lines that are requeired for sorting:

gvDept.UseAccessibleHeader = true;

gvDept.HeaderRow.TableSection = TableRowSection.TableHeader;

And write the following code .cs file: 

using System;
using System.Collections.Generic;
using System.Linq; 
using System.Web; 
using System.Web.UI;
 using System.Web.UI.WebControls; 
using System.Data; 
using System.Data.SqlClient;

public partial class _Default : System.Web.UI.Page{
    private void BindGrid()
    {
        SqlConnection con = new SqlConnection("Data Source=Sanjeeb;database=MYDB;user id=test;password=Test");
        SqlCommand cmd = new SqlCommand("select * from DEPT", con);
        SqlDataAdapter dr = new SqlDataAdapter(cmd);
        DataSet ds = new DataSet();
        dr.Fill(ds);
        gvDept.DataSource = ds;
        gvDept.DataBind();
        gvDept.UseAccessibleHeader = true;
        gvDept.HeaderRow.TableSection = TableRowSection.TableHeader;
    }
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            BindGrid();
        }
    }
}

Now build your application. Click on every header; it will sort the corresponding grid column with ascending and descending image.



For any modifications or problems please comment.

For download source Click Here

Thanks.

Read More

How to Get Latitude and Longitude of a Place Using Google Map API

Introduction

This article describes how to get the latitude and longitude of a location using the Google Map API in ASP.Net. Here I will describe how to communicate with the Google Map API.

Description

To use the Google Map API you need to add the following link to the Head section.

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

Design Now add two Text Boxes,one Button and one Label.

Design your screen as in the following screen.



Or you can copy the following source code:
<body>
    <form id="form1" runat="server">
    <div>
        <table>
            <tr>
                <td>
                    Country :
                </td>
                <td>
                    <asp:TextBox ID="txtCon" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    City :
                </td>
                <td>
                    <asp:TextBox ID="txtCity" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input id="btn" type="button" value="Search Coordinates" />
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <asp:Label ID="lblresult" runat="server" ForeColor="Red"></asp:Label>
                </td>
            </tr>
        </table>
    </div>
    </form>

</body>Now add the following jQuery and Google map references in the Head section:

<script src="jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
Now  write the following JavaScript code in the Head section that will communicate with the Google map API.

<script type="text/javascript">
        $(document).ready(function () {
            $("#btn").click(function () {
                var geocoder = new google.maps.Geocoder();
                var con = document.getElementById('txtCon').value;
                var city = document.getElementById('txtCity').value;
                var res = document.getElementById('lblresult');
                var com = city + "," + con;
                geocoder.geocode({ 'address': com }, function (results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        res.innerHTML = "Latitude : " + results[0].geometry.location.lat() + "<br/>Longitude :" +
results[0].geometry.location.lng();
                    } else {
                        res.innerHTML = "Wrong Details: " + status;
                    }
                });
            });
        });

    </script>

Now build your application. Enter a City and Country in the respective text boxes then press the button.

It will show the latitude and longitude of that place in the label.
 

Thank you.

Read More

GridView Animations Using jQuery

Introduction

This article describes how to apply an animation to a GridView in ASP.Net using jQuery UI.

Description

To create this application you need the jQuery files listed below.

• jquery-1.9.1.js
• jquery-ui.js
• jquery-ui.css

You can download them from the source code attached in this page.
Here I create three pages for checking various animations on GridView.

1. Dragable GridView
2. Zoom able GridView
3. Animated Effect to GridView

Dragable GridView
In this example I will show how to drag a GridView to any position in a browser's screen.
Design
Add a GridView to a page and apply any design.
Now design your screen like the following screen:

 

Or you can copy the following source code:

<body>
   <form id="form1" runat="server">
    <div id="draggable">
        <asp:GridView ID="gvDetails" runat="server" CellPadding="4" ForeColor="#333333" GridLines="None">
            <AlternatingRowStyle BackColor="White" />
            <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
            <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
            <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
            <RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
            <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
            <SortedAscendingCellStyle BackColor="#FDF5AC" />
            <SortedAscendingHeaderStyle BackColor="#4D0000" />
            <SortedDescendingCellStyle BackColor="#FCF6C0" />
            <SortedDescendingHeaderStyle BackColor="#820000" />
        </asp:GridView>
    </div>
    </form>

In the code above just check this div:

<div id="draggable"></div>
Within this div what element you put the dragable  feature applied on that.

Next add the following JavaScript and CSS style code in the head tag of an aspx file (this is used to apply the drag feature to the div in which the grid is present).

<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.9.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui.js" type="text/javascript"></script>
    <style>
        #draggable
        {
            width: 150px;
            height: 150px;
            padding: 0.5em;
        }
    </style>
    <script>
        $(function () {
            $("#draggable").draggable();
        });
    </script>
</head>

Now go to the code view.
And write the following code in the .cs file for binding data to the grid:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
public partial class DragAbleGrid : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        BindGridDetails();
    }
    protected void BindGridDetails()
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("EmpId", typeof(Int32));
        dt.Columns.Add("EmpName", typeof(string));
        dt.Columns.Add("Education", typeof(string));
        dt.Columns.Add("Place", typeof(string));
        DataRow dtrow = dt.NewRow();
        dtrow["EmpId"] = 1;
        dtrow["EmpName"] = "Sanjeeb";
        dtrow["Education"] = "MCA";
        dtrow["Place"] = "Hyderabad";
        dt.Rows.Add(dtrow);
        dtrow = dt.NewRow();
        dtrow["EmpId"] = 2;
        dtrow["EmpName"] = "Laku";
        dtrow["Education"] = "MBA";
        dtrow["Place"] = "Hyderabad";
        dt.Rows.Add(dtrow);
        dtrow = dt.NewRow();
        dtrow["EmpId"] = 3;
        dtrow["EmpName"] = "Pankaj";
        dtrow["Education"] = "B.Tech";
        dtrow["Place"] = "Bihar";
        dt.Rows.Add(dtrow);
        dtrow = dt.NewRow();
        dtrow["EmpId"] = 4;
        dtrow["EmpName"] = "Srikanth";
        dtrow["Education"] = "B.Tech";
        dtrow["Place"] = "Hyderabad";
        dt.Rows.Add(dtrow);
        gvDetails.DataSource = dt;
        gvDetails.DataBind();
    }
}
Now build your application and check.

Default view in browser:


After dragging it in the browser:

 
Zoomable GridView In this example I will show how to Zoom a GridView on button click.
Design
Add a GridView to a page and apply any design and one hyperlink.
Now design your screen like the following screen:

 

Or you can copy the following source code:

<body>
   <form id="form1" runat="server">
<div>
        <a href="#" id="button">Click to Zoom In</a>
    </div>
    <div class="toggler">
        <div id="effect" class="newClass ui-corner-all">
        <asp:GridView ID="gvDetails" runat="server" CellPadding="4" ForeColor="#333333" GridLines="None">
            <AlternatingRowStyle BackColor="White" />
            <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
            <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
            <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
            <RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
            <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
            <SortedAscendingCellStyle BackColor="#FDF5AC" />
            <SortedAscendingHeaderStyle BackColor="#4D0000" />
            <SortedDescendingCellStyle BackColor="#FCF6C0" />
            <SortedDescendingHeaderStyle BackColor="#820000" />
        </asp:GridView>
    </div>
</div>
    </form>

In the code above just check this div:

<div class="toggler">
        <div id="effect" class="newClass ui-corner-all">
</div>
</div>
Within this div what element you put the Zoom feature applied on that.

Next add the following JavaScript and CSS style code in the head tag of an aspx file (this is used to apply the Zoom feature to the div in which the grid is present).

<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.9.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui.js" type="text/javascript"></script>
    <style type="text/css">
        .toggler
        {
            width: 500px;
            height: 200px;
            position: relative;
        }
        #effect
        {
            position: relative;
        }
        .newClass
        {
            width: 240px;
            padding: 1em;
            letter-spacing: 0;
            font-size: 1.2em;
            margin: 0;
        }
        .anotherNewClass
        {
            text-indent: 40px;
            letter-spacing: .4em;
            width: 410px;
            height: 100px;
            padding: 30px;
            margin: 10px;
            font-size: 1.6em;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $("#button").click(function () {
                $(".newClass").switchClass("newClass", "anotherNewClass", 1000); 
                $(".anotherNewClass").switchClass("anotherNewClass", "newClass", 1000);
                return false;
            });
        });
    </script>
</head> 

Now go to the code view.

And write the following code in the .cs file for binding data to the grid:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
public partial class ZoomAbleGrid : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        BindGridDetails();
    }
    protected void BindGridDetails()
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("EmpId", typeof(Int32));
        dt.Columns.Add("EmpName", typeof(string));
        dt.Columns.Add("Education", typeof(string));
        dt.Columns.Add("Place", typeof(string));
        DataRow dtrow = dt.NewRow();
        dtrow["EmpId"] = 1;
        dtrow["EmpName"] = "Sanjeeb";
        dtrow["Education"] = "MCA";
        dtrow["Place"] = "Hyderabad";
        dt.Rows.Add(dtrow);
        dtrow = dt.NewRow();
        dtrow["EmpId"] = 2;
        dtrow["EmpName"] = "Laku";
        dtrow["Education"] = "MBA";
        dtrow["Place"] = "Hyderabad";
        dt.Rows.Add(dtrow);
        dtrow = dt.NewRow();
        dtrow["EmpId"] = 3;
        dtrow["EmpName"] = "Pankaj";
        dtrow["Education"] = "B.Tech";
        dtrow["Place"] = "Bihar";
        dt.Rows.Add(dtrow);
        dtrow = dt.NewRow();
        dtrow["EmpId"] = 4;
        dtrow["EmpName"] = "Srikanth";
        dtrow["Education"] = "B.Tech";
        dtrow["Place"] = "Hyderabad";
        dt.Rows.Add(dtrow);
        gvDetails.DataSource = dt;
        gvDetails.DataBind();
    }
}
Now build your application and check.

Default view in browser:


Now click on "Zoom" in Hyper link.

 
Animated Effect to GridView In this example I will show how to apply an animation effect to a GridView on a button click.
Design
Add a GridView to a page and apply any design, one dropdown and one hyperlink.
The Dropdown will show all the animation effects.
 
Now design your screen as in the following screen:

 

Or you can copy the following source code:

<body>
   <form id="form1" runat="server">
<select name="effects" id="effectTypes">
        <option value="blind">Blind</option>
        <option value="bounce">Bounce</option>
        <option value="clip">Clip</option>
        <option value="drop">Drop</option>
        <option value="explode">Explode</option>
        <option value="fade">Fade</option>
        <option value="fold">Fold</option>
        <option value="highlight">Highlight</option>
        <option value="puff">Puff</option>
        <option value="pulsate">Pulsate</option>
        <option value="scale">Scale</option>
        <option value="shake">Shake</option>
        <option value="size">Size</option>
        <option value="slide">Slide</option>
        <option value="transfer">Transfer</option>
    </select>
    <a href="#" id="button" class="ui-state-default ui-corner-all">Apply effect</a>
    <br />
    <br />
    <div class="toggler">
        <div id="effect" class="ui-corner-all">
            <asp:GridView ID="gvDetails" runat="server" CellPadding="4" ForeColor="#333333" GridLines="None"
                Height="125px" Width="243px">
                <AlternatingRowStyle BackColor="White" />
                <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
                <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
                <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
                <RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
                <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
                <SortedAscendingCellStyle BackColor="#FDF5AC" />
                <SortedAscendingHeaderStyle BackColor="#4D0000" />
                <SortedDescendingCellStyle BackColor="#FCF6C0" />
                <SortedDescendingHeaderStyle BackColor="#820000" />
            </asp:GridView>
        </div>
    </div>
    </form>

In the code above just check this div:

<div class="toggler">
<div id="effect" class="ui-corner-all">

</div>
</div>
Within this div what element you put the Animation effect feature applied on that.

Next add the following JavaScript and CSS style code in the head tag of an aspx file (this is used to apply an Animation effect feature to a div in which a grid is present).

<head runat="server">
    <title></title>
    <link href="Styles/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-1.9.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui.js" type="text/javascript"></script>
    <style type="text/css">
        .toggler
        {
            width: 500px;
            height: 200px;
            position: relative;
        }
        #effect
        {
            width: 240px;
            height: 135px;
            padding: 0.4em;
            position: relative;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            // run the currently selected effect
            function runEffect() {
                // get effect type from
                var selectedEffect = $("#effectTypes").val();
                // most effect types need no options passed by default
                var options = {};
                // some effects have required parameters
                if (selectedEffect === "scale") {
                    options = { percent: 0 };
                } else if (selectedEffect === "transfer") {
                    options = { to: "#button", className: "ui-effects-transfer" };
                } else if (selectedEffect === "size") {
                    options = { to: { width: 200, height: 60} };
                }
                // run the effect
                $("#effect").effect(selectedEffect, options, 500, callback);
            };
            // callback function to bring a hidden box back
            function callback() {
                setTimeout(function () {
                    $("#effect").removeAttr("style").hide().fadeIn();
                }, 1000);
            };
            // set effect from select menu value
            $("#button").click(function () {
                runEffect();
                return false;
            });
        });
    </script>
</head>

 Now go to the code view.

And write the following code in the .cs file for binding data to the grid:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
public partial class EffectToGrid : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        BindGridDetails();
    }
    protected void BindGridDetails()
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("EmpId", typeof(Int32));
        dt.Columns.Add("EmpName", typeof(string));
        dt.Columns.Add("Education", typeof(string));
        dt.Columns.Add("Place", typeof(string));
        DataRow dtrow = dt.NewRow();
        dtrow["EmpId"] = 1;
        dtrow["EmpName"] = "Sanjeeb";
        dtrow["Education"] = "MCA";
        dtrow["Place"] = "Hyderabad";
        dt.Rows.Add(dtrow);
        dtrow = dt.NewRow();
        dtrow["EmpId"] = 2;
        dtrow["EmpName"] = "Laku";
        dtrow["Education"] = "MBA";
        dtrow["Place"] = "Hyderabad";
        dt.Rows.Add(dtrow);
        dtrow = dt.NewRow();
        dtrow["EmpId"] = 3;
        dtrow["EmpName"] = "Pankaj";
        dtrow["Education"] = "B.Tech";
        dtrow["Place"] = "Bihar";
        dt.Rows.Add(dtrow);
        dtrow = dt.NewRow();
        dtrow["EmpId"] = 4;
        dtrow["EmpName"] = "Srikanth";
        dtrow["Education"] = "B.Tech";
        dtrow["Place"] = "Hyderabad";
        dt.Rows.Add(dtrow);
        gvDetails.DataSource = dt;
        gvDetails.DataBind();
    }
}
Now build your application. Select any effect from the dropdown and click on "apply effect".


If you have any modifications to suggest then please comment.
to download click here
Thank you.

Read More