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
- Jut put the Ext.Net.dll in Bin folder.
- Add the new Tab in ToolBox and call this
.dll
- 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]()