Blog

Gridview control of Ext.NET

By Gohil Jayendrasinh Blogs | .NET 4.5 Dec 12, 2011
In this blog you will learn about the open source javascript framework.

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. Add the new Tab in ToolBox and call this .dll
  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

COMMENT USING

PREMIUM SPONSORS

Hire Mobile & Web Developer on demand. 100% satisfaction. Try for 1 week or Money Back. Local and remote developers available all over USA.

Latest Blogs