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

Ext.Net MVC GridPanel Calculate Fields[Server-Side]

Full Source : https://github.com/ismailkocacan/GridPanelCalculateField
More Detail : http://mvc.ext.net/#/GridPanel_Editable/Editor_with_DirectMethod

ViewModel

	using Newtonsoft.Json;
	using System;
	using System.Collections.Generic;
	using System.Linq;
	using System.Web;
	//ViewModel Stock
	public class VmStock
	{
	public String id { get; set; }
	public String Name { get; set; }
	public float UnitPrice { get; set; }
	public float Amount { get; set; }
	public float Total { get; set; }
	}

view raw VmStock.csHtml hosted with ❤ by GitHub

View

	@model System.Collections.IEnumerable
	@using Ext.Net;
	@using Ext.Net.MVC;
	@{
	ViewBag.Title = "Index";
	Layout = "~/Views/Shared/_Layout.cshtml";
	}
	@(Html.X().ResourceManager())
	@(Html.X().GridPanel()
	.Title("GridPanel Calculated Fields")
	.Width(500)
	.Frame(true)
	.Store
	(
	Html.X().Store()
	.ID("Store1")
	.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)
	)
	)
	.ServerProxy
	(
	Html.X().AjaxProxy()
	.Url(Url.Action("GetData"))
	)
	)
	.ColumnModel
	(
	Html.X().RowNumbererColumn().Width(50),
	Html.X().Column()
	.Text("Name")
	.DataIndex("Name")
	.Flex(1),
	Html.X().Column()
	.Text("UnitPrice")
	.DataIndex("UnitPrice")
	.Width(150)
	.Editor
	(
	Html.X().TextField()
	.MaskRe(@"/[0-9\$\.]/")
	)
	.Align(Alignment.Right),
	Html.X().Column()
	.Text("Amount")
	.DataIndex("Amount")
	.Width(75)
	.Align(Alignment.Right)
	.Editor(Html.X().NumberField()),
	Html.X().Column()
	.Text("Total")
	.DataIndex("Total")
	.Width(75)
	.Align(Alignment.Right)
	)
	.SelectionModel
	(
	Html.X().RowSelectionModel().Mode(SelectionMode.Single)
	)
	.Plugins
	(
	Html.X()
	.CellEditing()
	.ClicksToEdit(1)
	.DirectEvents
	(
	de =>
	{
	de.Edit.Url = Url.Action("CellEditing");
	de.Edit.ExtraParams.Add(new Parameter("id", "e.record.data.id", ParameterMode.Raw));
	de.Edit.ExtraParams.Add(new Parameter("field", "e.field", ParameterMode.Raw));
	de.Edit.ExtraParams.Add(new Parameter("oldValue", "e.originalValue", ParameterMode.Raw));
	de.Edit.ExtraParams.Add(new Parameter("newValue", "e.value", ParameterMode.Raw));
	de.Edit.ExtraParams.Add(new Parameter("vmStock", "e.record.data", ParameterMode.Raw));
	}
	)
	)
	)

view raw index.cshtml hosted with ❤ by GitHub

Controller

	using Ext.Net;
	using System.Web.Mvc;
	using Ext.Net.MVC;
	using System.Collections;
	using System.Collections.Generic;
	namespace GridPanelCalculateFields.Controllers
	{
	public class GridPanelCalculateFieldController : Controller
	{
	//
	// GET: /GridPanelCalculateField/
	public ActionResult Index()
	{
	return View(TestData());
	}
	public static IEnumerable TestData()
	{
	List<VmStock> list = new List<VmStock>();
	list.Add(new VmStock() { Name = "Apple", UnitPrice = 0, Amount = 0 });
	list.Add(new VmStock() { Name = "Banana", UnitPrice = 0, Amount = 0 });
	list.Add(new VmStock() { Name = "Tomato", UnitPrice = 0, Amount = 0 });
	return list;
	}
	public ActionResult GetData()
	{
	return this.Store(TestData());
	}
	public DirectResult CellEditing(string id, string field, string oldValue, string newValue, object vmStock)
	{
	string json = JSON.Serialize(vmStock);
	json = json.Substring(2, json.Length - 4).Replace(@"\", "");
	VmStock vmStockObj = JSON.Deserialize<VmStock>(json);
	vmStockObj.Total = vmStockObj.UnitPrice * vmStockObj.Amount;
	Store store = X.GetCmp<Store>("Store1");
	ModelProxy modelProxy = store.GetById(id);
	modelProxy.Set("Total", vmStockObj.Total);
	store.GetById(id).Commit();
	return this.Direct();
	}
	}
	}

view raw GridPanelCalculateFieldController.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,
	serverProxy: {
	type: "ajax",
	url: "/GridPanelCalculateField/GetData"
	},
	proxy: {
	data: [{
	"Name": "Apple",
	"UnitPrice": 0.0,
	"Amount": 0.0,
	"Total": 0.0
	}, {
	"Name": "Banana",
	"UnitPrice": 0.0,
	"Amount": 0.0,
	"Total": 0.0
	}, {
	"Name": "Tomato",
	"UnitPrice": 0.0,
	"Amount": 0.0,
	"Total": 0.0
	}],
	type: 'memory'
	}
	},
	frame: true,
	plugins: [{
	ptype: "cellediting",
	clicksToEdit: 1,
	listeners: {
	edit: {
	fn: function(item, e) {
	edit
	}
	}
	},
	directEvents: {
	edit: {
	fn: function(item, e) {
	Ext.net.directRequest({
	cleanRequest: true,
	url: "/GridPanelCalculateField/CellEditing",
	extraParams: {
	"id": e.record.data.id,
	"field": e.field,
	"oldValue": e.originalValue,
	"newValue": e.value,
	"vmStock": e.record.data
	},
	control: this,
	action: 'Edit'
	});
	}
	}
	}
	}],
	renderTo: "App.id83c3b07cf5843005_Container",
	width: 500,
	title: "GridPanel Calculated Fields",
	columns: {
	items: [{
	width: 50,
	xtype: "rownumberer"
	}, {
	flex: 1,
	dataIndex: "Name",
	editor: new Ext.grid.CellEditor(Ext.apply({
	field: {
	xtype: "textfield"
	}
	}, {})),
	text: "Name"
	}, {
	width: 150,
	align: "right",
	dataIndex: "UnitPrice",
	editor: new Ext.grid.CellEditor(Ext.apply({
	field: {
	xtype: "textfield",
	maskRe: /[0-9\$\.]/
	}
	}, {})),
	text: "UnitPrice"
	}, {
	width: 75,
	align: "right",
	dataIndex: "Amount",
	editor: new Ext.grid.CellEditor(Ext.apply({
	field: {
	xtype: "numberfield",
	decimalSeparator: "."
	}
	}, {})),
	text: "Amount"
	}, {
	width: 75,
	align: "right",
	dataIndex: "Total",
	text: "Total"
	}]
	},
	multiColumnSort: false,
	selModel: Ext.create("Ext.selection.RowModel", {
	selType: "rowmodel"
	})
	});
	});

view raw GridPanelCalculateField.js hosted with ❤ by GitHub

PInvoke Hatalarını Debug Etmek

DLL'leri PInvoke ile kullanmak istediğinizde,eğer LoadLibrary windows apisi ile DLL belleğe yüklenmiyorsa, veya diğer invoke işlemlerinde problemler varsa;

"GetLastError function" ile hata kodu ve detay mesajları incelenmelidir.

	wchar_t buf[256];
	long errorCode = GetLastError();
	FormatMessageW(FORMAT_MESSAGE_FROM_SYSTEM, NULL, GetLastError(),MAKELANGID(LANG_NEUTRAL, SUBLANG_DEFAULT), buf, 256, NULL);

view raw GetLastError.cpp hosted with ❤ by GitHub

"Dependency Walker" ve "Process Monitor" gibi araçlarla,
DLL'in diğer başka DLL'lere bağımlılıklarını ve diğer (registry,file system,network vs) etkileşimini izleyip,sonuçlara (Result) göre problemleri tespit edebilmek mümkündür.


Örneğin Visual C++ da geliştirmiş olduğum, bir Win32 DLL içersinde ki fonksiyonları
çağırmak istediğimde ,LoadLibrary apisi ile DLL yükleme işlemi başarısız olmaktaydı.

"Dependency Walker" ile DLL'in bağımlı olduğu diğer DLL'leri ilgili "path"lere kopyalayarak çözmek mümkündür.



MSVCR120.dll dosyasını temin etmek için,"Visual C++ Redistributable Packages for Visual Studio 2013" indirip kurmak yeterlidir.