Today all the Web Developer know about jQuery the Javascript framework. And 
jQuery Server Control is also popular. You can download this from codeplex.:http://jqueryuiserverctls.codeplex.com/



You can also read about jQuery Grid name jqGrid and it's free open source 
(http://www.trirand.com/blog/?page_id=6) and it's UI version is paid: http://www.trirand.net/demo.aspx



But if you are really love AJAX / Javascript then use the open source javascript 
framework.




http://www.ext.net/


http://examples.ext.net/


http://extaspnet.codeplex.com/



I give demo for Gridview control of Ext.NET



How to install the Ext.NET
    
	
  1. Jut put the Ext.Net.dll in Bin folder.
    2. 
	
  2. Add the new Tab in ToolBox and call this 
	.dll
    3. 
	
  3. Change your webconfig like


<configSections>

 </configSections>


  <httpHandlers>


   <add path="*/ext.axd" verb="*" type="Ext.Net.ResourceHandler" validate="false" />


    </httpHandlers>


    <httpModules>


      <add name="DirectRequestModule" type="Ext.Net.DirectRequestModule, Ext.Net" />


    </httpModules>


 <system.webServer>


    <modules runAllManagedModulesForAllRequests="true"/>


    <validation validateIntegratedModeConfiguration="false"/>


    <modules>


      <add name="DirectRequestModule"


         preCondition="managedHandler"                                type="Ext.Net.DirectRequestModule, Ext.Net"/>


    </modules>


    <handlers>


      <add name="DirectRequestHandler"


         verb="*" path="*/ext.axd" preCondition="integratedMode"


         type="Ext.Net.ResourceHandler" />


    </handlers>


  </system.webServer>



Your aspx page


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Gridview1.aspx.cs" Inherits="GridView_Gridview1" %>


 


<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">


<head runat="server">


    <title></title>


</head>


<body>


    <form id="form1" runat="server">


    <ext:ResourceManager ID="ResourceManager1" runat="server">


    </ext:ResourceManager>


    <div>


        <ext:GridPanel ID="GridPanel1" runat="server" Height="500" Width="500" Title="Employee Information">


            <ColumnModel ID="ColumnModel1" runat="server">


                <Columns>


                    <ext:Column ColumnID="ID" DataIndex="ID" Header="ID">


                    </ext:Column>


                    <ext:Column Header="Name" DataIndex="Name" width="150">


                    </ext:Column>


                    <ext:Column Header="City" DataIndex="City" width="150">


                    </ext:Column>


                </Columns>


            </ColumnModel>


            <Store>


                <ext:Store ID="Store1" runat="server" OnRefreshData="MyData_Refresh">


                    <Reader>


                        <ext:JsonReader>


                            <Fields>


                                <ext:RecordField Name="ID">


                                </ext:RecordField>


                                <ext:RecordField Name="Name" >


                                </ext:RecordField>


                                <ext:RecordField Name="City">


                                </ext:RecordField>


                            </Fields>


                        </ext:JsonReader>


                    </Reader>


                </ext:Store>


            </Store>


            <SelectionModel>


                <ext:RowSelectionModel runat="server">


                </ext:RowSelectionModel>


            </SelectionModel>


            <LoadMask ShowMask="true" />


            <BottomBar>


                <ext:PagingToolbar ID="PagingToolbar1" runat="server" PageSize="25">


                    <Items>


                        <ext:Label ID="Label1" runat="server" Text="Page size:" />


                        <ext:ToolbarSpacer ID="ToolbarSpacer1" runat="server" Width="10" />


                        <ext:ComboBox ID="ComboBox1" runat="server" Width="80">


                            <Items>                                


                                <ext:ListItem Text="25" />


                                <ext:ListItem Text="50" />


                            </Items>


                            <SelectedItem Value="25" />


                            <Listeners>


                                <Select Handler="#{PagingToolbar1}.pageSize = parseInt(this.getValue()); #{PagingToolbar1}.doLoad();" />


                            </Listeners>


                        </ext:ComboBox>


                    </Items>


                </ext:PagingToolbar>


            </BottomBar>


        </ext:GridPanel>


    </div>


    </form>


</body>


</html> 



Your .cs page


using System;


using System.Collections.Generic;


using System.Linq;


using System.Web;


using System.Web.UI;


using System.Web.UI.WebControls;


using Ext.Net;


 


public partial class GridView_Gridview1 : System.Web.UI.Page


{


    string connection = System.Configuration.ConfigurationManager.ConnectionStrings["testDatabaseConnectionString"].ToString();


    protected void Page_Load(object sender, EventArgs e)


    {


        if (!X.IsAjaxRequest)


        {


            this.BindData();


        }


    }
    protected void MyData_Refresh(object sender, StoreRefreshDataEventArgs e)
    {
        this.BindData();
    }
    private void BindData()
    {            
        Store1 = this.GridPanel1.GetStore();        
        using (ExtNetDataDataContext db = new ExtNetDataDataContext(connection))
        {
	var info = (from a in db.Emp_Msts select new
	{ID = a.id,Name = a.emp_name + " " + a.emp_lname,
	City = a.city});
	Store1.DataSource = info;
	Store1.DataBind();
	}
   }
}
extdotnet.gif
 Your page source:

<!DOCTYPE html
PUBLIC "-//W3C//DTD 
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
       <link
rel="stylesheet"
type="text/css"
href="/ExtNetExample/extjs/resources/css/ext-all-embedded-css/ext.axd?v=21945"
/>
<title>
</title>
       <script
type="text/javascript"
src="/ExtNetExample/extjs/adapter/ext/ext-base-js/ext.axd?v=21945"></script>
       <script
type="text/javascript"
src="/ExtNetExample/extjs/ext-all-js/ext.axd?v=21945"></script>

       <script
type="text/javascript"
src="/ExtNetExample/extnet/extnet-core-js/ext.axd?v=21945"></script>

       <script
type="text/javascript"
src="/ExtNetExample/extnet/extnet-data-js/ext.axd?v=21945"></script>

       <script
type="text/javascript">

       //<![CDATA[
           Ext.net.ResourceMgr.init({ id:
"ResourceManager1", BLANK_IMAGE_URL:
"/ExtNetExample/extjs/resources/images/default/s-gif/ext.axd", 
aspForm: "form1", theme:
"blue", appName: "ExtNetExample" 
}); Ext.onReady(function () { Ext.QuickTips.init();
new Ext.net.GridPanel({ store:
this.Store1 = new 
Ext.ux.data.PagingStore({ proxyId: "Store1", 
autoLoad: true, reader:
new Ext.data.JsonReader({ fields: [{ name:
"ID" }, { name: "Name" }, { 
name: "City"}] }), directEventConfig: {}, 
proxy: new Ext.data.PagingMemoryProxy([{
"ID": 1, "Name":
"Jayendrasinh Gohil",
"City": "Ahmedabad" 
}, { "ID": 2, 
"Name": "Alkaba Gohil",
"City": "Ahmedabad" 
}, { "ID": 3, 
"Name": "Purvesh Maisuriya",
"City": "Surat" 
}, { "ID": 4, 
"Name": "Jigar Patel",
"City": "Ahmedabad" 
}, { "ID": 5, 
"Name": "Jignesh Ahiya",
"City": "Rajakot" 
}, { "ID": 6, 
"Name": "Jayesh Patel",
"City": "Ankleshwar" 
}, { "ID": 7, "Name":
"Shipra Shah", 
"City": "Simala" }, {
"ID": 8, "Name":
"Shailesh Chavada", 
"City": "Rajakot" }, {
"ID": 9, "Name":
"Ritul Patel", 
"City": "Ahmedabad" }, {
"ID": 10, "Name":
"Meet Chauhan", "City":
"Morabee" }, { "ID": 
11, "Name": "Manthan 
Bhavasar", "City":
"Ahmedabad" }, { 
"ID": 12, "Name":
"Jatin Patel", 
"City": "Ahmedabad"}],
false), beforeLoadParams:
function (store, options) {
if (!options.params) { options.params = {}; }; 
Ext.apply(options.params, {}); Ext.applyIf(options.params, {
"start": 0, "limit": 
25 }); } }), id: "GridPanel1", renderTo:
"GridPanel1_Container", height: 500, width: 
500, bbar: { id: "PagingToolbar1", xtype:
"ux.paging", items: [{ id:
"Label1", xtype: 
"label", text: "Page size:" }, { id:
"ToolbarSpacer1", xtype:
"nettbspacer", width: 10 }, { id:
"ComboBox1", xtype: 
"combo", width: 80, value: "25", 
displayField: "text", hiddenName:
"ComboBox1_Value", mode:
"local", queryDelay: 10, triggerAction:
"all", valueField: 
"value", store: new Ext.data.SimpleStore({ 
fields: ["text", 
"value"], data: [["25",
"25"], ["50",
"50"]] }), submitValue:
true, listeners: { select: { fn:
function (item, record, index) { 
PagingToolbar1.pageSize = parseInt(this.getValue()); 
PagingToolbar1.doLoad(); } }}}], displayInfo: true, 
pageSize: 25 }, title: "Employee Information", 
loadMask: { showMask: true }, sm:
this.ctl02 = new 
Ext.grid.RowSelectionModel({ proxyId: "ctl02" 
}), selectionSavingBuffer: 10, cm: this.ColumnModel1 
= new Ext.grid.ColumnModel({ proxyId:
"ColumnModel1", columns: [{ dataIndex:
"ID", header: "ID", 
id: "ID" }, { dataIndex:
"Name", header: 
"Name", width: 150 }, { dataIndex: "City", 
header: "City", width: 150}] }) }); });
       //]]>       
</script>
</head>

<body>

    <form
method="post"
action="Gridview1.aspx"
id="form1">
<div class="aspNetHidden">
<input type="hidden"
name="__EVENTTARGET"
id="__EVENTTARGET"
value=""
/>
<input type="hidden"
name="__EVENTARGUMENT"
id="__EVENTARGUMENT"
value=""
/>
<input type="hidden"
name="__VIEWSTATE"
id="__VIEWSTATE"
value="/wEPDwUJOTcxNzA5MzU0D2QWAgIDD2QWAgIDD2QWAgIDD2QW
AgICDxQqElN5c3RlbS5XZWIuVUkuUGFpcgEPBQl2c01lbWJlcnMUKwACD
wUMU2VsZWN0ZWRJdGVtFCsEAQ8FBGJhc2UWAh4FVmFsdWUFAjI1D
wUFSXRlbXMPAgIUKwACFCsEAQ8FBGJhc2UWBB4EVGV4dAUCMjUfA
AUCMjUUKwQBDwUEYmFzZRYEHwEFAjUwHwAFAjUwZBgBBR5fX0N
vbnRyb2xzUmVxdWlyZVBvc3RCYWNrS2V5X18WBAUQUmVzb3VyY2
VNYW5hZ2VyMQUKR3JpZFBhbmVsMQUOUGFnaW5nVG9vbGJhcjE
FCUNvbWJvQm94MWs1+s9nhyvctW3BvAIhebkEYfAk1Om1NNawtblq+L2H"
/>
</div>
<script type="text/javascript">
//<![CDATA[
    var theForm = 
document.forms['form1'];
    if (!theForm) {
        theForm = document.form1;
    }
    function __doPostBack(eventTarget, 
eventArgument) {
        if (!theForm.onsubmit 
|| (theForm.onsubmit() != false)) {
            theForm.__EVENTTARGET.value = 
eventTarget;
            theForm.__EVENTARGUMENT.value = 
eventArgument;
            theForm.submit();
        }
    }
//]]>
</script>
<div class="aspNetHidden">
       <input
type="hidden"
name="__EVENTVALIDATION"
id="__EVENTVALIDATION"
value="/wEWAgLUtaKDDQLk1b+VAnsbQeCCZgJP8aRltJVrS6z/d5NWTNHmM4fcqIZC1SjI"
/>
</div>
    <div>
        <div
id="GridPanel1_Container">
</div>
    </div>
    </form>
</body>
</html>
 You can see the following image in Frirebug Ext.NET create DOM object for your grid so it's more faster then ASP.NET gridview control.
  extdotnet1.gif