Implementing GridPanel Remote Paging

Full Source : https://github.com/ismailkocacan/GridPanelRemotePaging
Test Result : VmStock.cs

	public class VmStock
	{
	public int id { get; set; }
	public String Name { get; set; }
	public float UnitPrice { get; set; }
	public float Amount { get; set; }
	public float Total
	{
	get
	{
	return UnitPrice * Amount;
	}
	}
	}

view raw VmStock.cs hosted with ❤ by GitHub

Index.csHtml

	@model List<VmStock>
	@{
	ViewBag.Title = "GridPanel Remote Paging Test";
	Layout = "~/Views/Shared/_Layout.cshtml";
	}
	@{
	var X = Html.X();
	}
	<h2>@ViewBag.Title</h2>
	@(Html.X().ResourceManager())
	@(Html.X().GridPanel()
	.Title("Generic List[Remote Paging]")
	.ID("myGrid")
	.Width(500)
	.Height(250)
	.Scroll(ScrollMode.Vertical)
	.Store
	(
	Html.X().Store()
	.ID("store1")
	.PageSize(100)
	.RemotePaging(true)
	.DataSource(Model)
	.Model
	(
	Html.X().Model()
	.Fields
	(
	new ModelField("Name", ModelFieldType.String),
	new ModelField("UnitPrice ", ModelFieldType.Float),
	new ModelField("Amount", ModelFieldType.Float),
	new ModelField("Total", ModelFieldType.Float)
	)
	)
	.Proxy
	(
	Html.X().AjaxProxy()
	.Url(Url.Action("GetData"))
	.StartParam("start")
	.LimitParam("limit")
	.PageParam("page")
	.Reader
	(
	Html.X().JsonReader()
	.RootProperty("data")
	.TotalProperty("total")
	)
	)
	)
	.ColumnModel
	(
	Html.X().RowNumbererColumn().Width(50),
	Html.X().Column()
	.Text("Name")
	.DataIndex("Name")
	.Width(150),
	Html.X().Column()
	.Text("UnitPrice")
	.DataIndex("UnitPrice")
	.Align(Alignment.Right)
	.Width(80),
	Html.X().Column()
	.Text("Amount")
	.DataIndex("Amount")
	.Width(80)
	.Align(Alignment.Right),
	Html.X().Column()
	.Text("Total")
	.DataIndex("Total")
	.Align(Alignment.Right)
	.Width(80)
	)
	.SelectionModel
	(
	Html.X().RowSelectionModel().Mode(SelectionMode.Single)
	)
	.BottomBar
	(
	Html.X().PagingToolbar()
	)
	)

view raw index.cshtml hosted with ❤ by GitHub

GridPanelRemotePaging.cs

	using System.Collections.Generic;
	using System.Linq;
	using System.Web.Mvc;
	using Ext.Net.MVC;
	namespace GridPanelRemotePaging.Controllers
	{
	public class GridPanelPagingController : Controller
	{
	//
	// GET: /GridPanelPaging/
	public ActionResult Index()
	{
	return View(new List<VmStock>());
	}
	private List<VmStock> CreateMockData()
	{
	List<VmStock> data = new List<VmStock>();
	for (int i = 1; i <= 1000; i++)
	{
	data.Add(new VmStock() { id = i, Name = "Stock " + i, UnitPrice = i + 1, Amount = 2 });
	}
	return data;
	}
	public ActionResult GetData(int start, int limit, int page)
	{
	List<VmStock> allData = CreateMockData();
	page--;
	var data = allData.Skip(limit * page).Take(limit);
	StoreResult result = this.Store(data);
	result.Total = allData.Count;
	return result;
	}
	}
	}

view raw GridPanelRemotePaging.cs hosted with ❤ by GitHub

Generated ExtJS Code

	Ext.net.ResourceMgr.init({
	isMVC: true,
	locale: "en-US"
	});
	Ext.onReady(function() {
	Ext.create("Ext.grid.Panel", {
	store: {
	model: Ext.ClassManager.isCreated(Ext.id()) ? Ext.id() : Ext.define(Ext.id(), {
	extend: "Ext.data.Model",
	fields: [{
	name: "Name",
	type: "string"
	}, {
	name: "UnitPrice ",
	type: "float"
	}, {
	name: "Amount",
	type: "float"
	}, {
	name: "Total",
	type: "float"
	}]
	}),
	storeId: "store1",
	autoLoad: true,
	pageSize: 100,
	proxy: {
	type: "ajax",
	reader: {
	type: "json",
	rootProperty: "data",
	totalProperty: "total"
	},
	url: "/GridPanelPaging/GetData"
	}
	},
	id: "myGrid",
	height: 250,
	renderTo: "App.myGrid_Container",
	width: 500,
	bbar: {
	xtype: "pagingtoolbar",
	displayInfo: true,
	store: "store1"
	},
	title: "Generic List[Remote Paging]",
	columns: {
	items: [{
	width: 50,
	xtype: "rownumberer"
	}, {
	width: 150,
	dataIndex: "Name",
	text: "Name"
	}, {
	width: 80,
	align: "right",
	dataIndex: "UnitPrice",
	text: "UnitPrice"
	}, {
	width: 80,
	align: "right",
	dataIndex: "Amount",
	text: "Amount"
	}, {
	width: 80,
	align: "right",
	dataIndex: "Total",
	text: "Total"
	}]
	},
	multiColumnSort: false,
	scroll: "vertical",
	selModel: Ext.create("Ext.selection.RowModel", {
	selType: "rowmodel"
	})
	});
	});

view raw GridPanelPaging.cs hosted with ❤ by GitHub