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