This is ultimate grid from etcjs.com site a totally javascript grid which makes your site too fast you can't imagine...

This is ultimate grid from etcjs.com site a totally javascript grid which makes your site too fast you can't imagine...
=======================================================

Register this .js files and .css files for this grid display and work
===================================










ASCX control
============

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="DashBoardOrder.ascx.cs" Inherits="ascx_controls_DashBoardOrder" %>

==============================

dashboard.aspx.cs file
=====================




using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Text;

public partial class ascx_controls_DashBoardOrder : System.Web.UI.UserControl
{
#region Variable
private int _OrderType;
public string Details;
#endregion

#region Property
public int OrderType
{
get { return _OrderType; }
set { _OrderType = value; }
}
#endregion

#region PageLoad
protected void Page_Load(object sender, EventArgs e)
{


DataTable dt_Orders = DAL.Order.GetDashboardOrder(_OrderType);

StringBuilder sb = new StringBuilder();

foreach (DataRow dr in dt_Orders.Rows)
{
sb.AppendFormat("['{0}','{1}','{2}','{3}','

£{4}

','{5}'],", dr["Id"], dr["CustomerName"], dr["OrderItem"], dr["OrderStatus"], dr["OrderTotal"], dr["PNumber"]);
}


string Final;
Final = "[" + sb.ToString().TrimEnd(',') + "]";

string ScriptToRegister = @" Ext.onReady(function(){

Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

var myData"+this.ClientID+ @" = "+Final+@"

// create the data store
var store"+this.ClientID+ @" = new Ext.data.SimpleStore({
fields: [{name: 'Id'},
{name: 'CustomerName'},
{name: 'OrderItem'},
{name: 'OrderStatus'},
{name: 'Total'},
{name: 'PNumber'}]
});
store" + this.ClientID + @".loadData(myData" + this.ClientID + @");

// create the Grid
var grid" + this.ClientID + @" = new Ext.grid.GridPanel({
store: store" + this.ClientID + @",
columns: [
{header: 'Order No.', width: 70, sortable: false, dataIndex: 'Id'},
{header: 'Customer', sortable: true, dataIndex: 'CustomerName', width:150},
{header: 'Items', sortable: true, dataIndex: 'OrderItem', width: 60},
{header: 'Total', sortable: true, dataIndex: 'Total',width:70},
{id:'OrderStatus',header: 'Status', sortable: true, dataIndex: 'OrderStatus',width:125}
" + (OrderType==3?",{id:'PNumber',header: 'P Number', sortable: true, dataIndex: 'PNumber',width:100}":"")+@"
],
stripeRows: true,

height:255,
width:440
});

grid" + this.ClientID + @".render('" + div_Details.ClientID + @"');

grid" + this.ClientID + @".getSelectionModel().selectFirstRow();
});";//autoExpandColumn: 'OrderStatus',
Page.ClientScript.RegisterClientScriptBlock(typeof(string), "JsBlock"+this.ClientID, ScriptToRegister, true);
}
#endregion
}