Gridview control of Ext.NET

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

You can also read about jQuery Grid name jqGrid and it's free open source ( and it's UI version is paid:

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

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. Add the new Tab in ToolBox and call this .dll
  3. Change your webconfig like


   <add path="*/ext.axd" verb="*" type="Ext.Net.ResourceHandler" validate="false" />
      <add name="DirectRequestModule" type="Ext.Net.DirectRequestModule, Ext.Net" />
    <modules runAllManagedModulesForAllRequests="true"/>
    <validation validateIntegratedModeConfiguration="false"/>
      <add name="DirectRequestModule"
         preCondition="managedHandler"                                type="Ext.Net.DirectRequestModule, Ext.Net"/>
      <add name="DirectRequestHandler"
         verb="*" path="*/ext.axd" preCondition="integratedMode"
         type="Ext.Net.ResourceHandler" />

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" "">
<html xmlns="">
<head runat="server">
    <form id="form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server">
        <ext:GridPanel ID="GridPanel1" runat="server" Height="500" Width="500" Title="Employee Information">
            <ColumnModel ID="ColumnModel1" runat="server">
                    <ext:Column ColumnID="ID" DataIndex="ID" Header="ID">
                    <ext:Column Header="Name" DataIndex="Name" width="150">
                    <ext:Column Header="City" DataIndex="City" width="150">
                <ext:Store ID="Store1" runat="server" OnRefreshData="MyData_Refresh">
                                <ext:RecordField Name="ID">
                                <ext:RecordField Name="Name" >
                                <ext:RecordField Name="City">
                <ext:RowSelectionModel runat="server">
            <LoadMask ShowMask="true" />
                <ext:PagingToolbar ID="PagingToolbar1" runat="server" PageSize="25">
                        <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">
                                <ext:ListItem Text="25" />
                                <ext:ListItem Text="50" />
                            <SelectedItem Value="25" />
                                <Select Handler="#{PagingToolbar1}.pageSize = parseInt(this.getValue()); #{PagingToolbar1}.doLoad();" />

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)
    protected void MyData_Refresh(object sender, StoreRefreshDataEventArgs e)
    private void BindData()
        Store1 = this.GridPanel1.GetStore();        
        using (ExtNetDataDataContext db = new ExtNetDataDataContext(connection))
 var info = (from a in db.Emp_Msts select new
 {ID =,Name = a.emp_name + " " + a.emp_lname,
 City =});
 Store1.DataSource = info;


 Your page source:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns="">

<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[  { 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{ store: this.Store1 = new{ proxyId: "Store1", autoLoad: true, reader: new{ fields: [{ name: "ID" }, { name: "Name" }, { name: "City"}] }), directEventConfig: {}, proxy: new[{ "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{ 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="" />



<script type="text/javascript">


    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;


        }     }



<div class="aspNetHidden">

       <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAgLUtaKDDQLk1b+VAnsbQeCCZgJP8aRltJVrS6z/d5NWTNHmM4fcqIZC1SjI" />



        <div id="GridPanel1_Container">



    </form> </body>


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.