Hi Daniil,
Following is my cshtml
@{
ViewBag.Title = "Test";
var X = Html.X();
Layout = "~/Views/Shared/_Layout.cshtml";
}
@System.Web.Optimization.Scripts.Render("~/RP/bundles/RPScripts")
@(Html.X().ResourceManager(ViewBag.ManagerConfig as MvcResourceManagerConfig).RenderStyles(ResourceLocationType.None))
<h2>Test</h2>
@(
Html.X().FormPanel().ID("FRM").Items(
Html.X().GridPanel().ID("TestGrid")
.Title("Editable GridPanel")
.Width(600)
.Height(350)
.Store(Html.X().Store().PageSize(3).Listeners(ls => ls.Load.Fn = "storeLoad")
.ID("Store1")
.Proxy(Html.X().AjaxProxy()
.Url(Url.Action("GetData"))
.Reader(Html.X().JsonReader().Root("data"))
)
.Model(Html.X().Model().IDProperty("IdCol").Name("TestGridModel")
.IDProperty("IdCol")
.Fields(
new ModelField("IdCol", ModelFieldType.Int),
new ModelField("NameCol", ModelFieldType.String),
new ModelField("AgeCol", ModelFieldType.Int)
)
)
)
.ColumnModel(
Html.X().Column()
.Text("IdCol")
.DataIndex("IdCol")
.Flex(1),
Html.X().Column()
.Text("NameCol")
.DataIndex("NameCol")
.Editor(Html.X().TextField().Listeners(ls => ls.Blur.Fn = "cellTxtBlur")),
Html.X().Column()
.Text("AgeCol")
.DataIndex("AgeCol")
.Editor(Html.X().NumberField().Listeners(ls => ls.Blur.Fn = "cellBlur"))
)
.SelectionModel(Html.X().RowSelectionModel().ID("TestGridRowSelectionModel"))
.Plugins(
Html.X().CellEditing().Listeners(ls => ls.BeforeEdit.Fn = "cellEdit")
)
.BottomBar(Html.X().PagingToolbar().ID("PageBar").HideRefresh(true))
.Listeners(l => l.ItemContextMenu.Handler = "onContextMenu(e,this.store.getAt(index),index,#{GridPriceEntryContextMenu})")
.Features
(
Html.X().RowWrap())
))
@(
X.Container(
).ID("cntButton").Items(X.Button().ID("btnSave").Text("Save").Type(ButtonType.Submit).Handler("Save")
))
@(X.Menu().ID("GridPriceEntryContextMenu").Width(100).MaxHeight(50)
.Items(X.MenuItem()
.Text(PR.Resources.RP.RP.PEContextAddRow)
.Listeners(l => l.Click.Handler = "onClick(this,'Add Row')")
))
<script>
function Save() {
for (var i = 0; i < changedRows.length; i++) {
alert("PKColValue : " + changedRows[i].PKColValue + " Field : " + changedRows[i].Field + " New Value : " + changedRows[i].NewValue);
}
}
var addedRecords = [];
var changedRows = [];
var fieldname = null;
var pageNo = 0;
var cellEdit = function (editor, e) {
for (var i = 0; i < changedRows.length; i++) {
if (changedRows[i].IsEdited == false) {
changedRows.splice(i, 1);
}
}
fieldname = e.field;
pageNo = $('#PageBar').find('input[type="text"]').val();
var rowIndex = e.rowIdx;//App.TestGrid.getSelectionModel().selected.items[0].index;//Get the selected row index
//var pageSize = '@Convert.ToInt32(PriceRight.Settings.PropertyReader.GetProperty("GRID_PAGE_SIZE"))'
var pageSize = 3;
if (pageNo > 1) {
rowIndex = rowIndex - ((pageNo - 1) * pageSize);
}
changedRows.push({ "IsEdited": false, "Field": e.field, "PageIndex": pageNo - 1, "RowIndex": rowIndex, "PKColValue": e.view.store.data.items[rowIndex].data.IdCol, "NewValue": "" });
return true;
}
var cellBlur = function (object) {
changedRows[changedRows.length - 1].NewValue = object.lastValue;
changedRows[changedRows.length - 1].IsEdited = true;
}
var cellTxtBlur = function (object) {
changedRows[changedRows.length - 1].NewValue = object.lastValue;
changedRows[changedRows.length - 1].IsEdited = true;
}
var storeLoad = function () {
for (var i = 0; i < App.TestGrid.store.getCount() ; i++) {
for (var j = 0; j < changedRows.length; j++) {
if (App.TestGrid.store.getAt(i).get('IdCol') == changedRows[j].PKColValue) {
App.TestGrid.store.getAt(i).set(changedRows[j].Field, changedRows[j].NewValue);
}
}
}
var pageNo = $('#PageBar').find('input[type="text"]').val();
var storeSt = Ext.getStore('Store1');
for (var i = 0; i < addedRecords.length; i++) {
if (addedRecords[i].PageNo==pageNo) {
storeSt.insert(addedRecords[i].rowIndex, addedRecords[i].record);
}
}
}
var rowindex = null;
var paras = new Array();
var storeData = null;
var originalRecord = null;
// opens application specific context menu
var onContextMenu = function (e, currentRecord, index, priceEntryMenu) {
rowindex = index;
e.preventDefault();
var rec = currentRecord;
originalRecord = currentRecord.data;
storeData = JSON.parse(JSON.stringify(currentRecord.data));
priceEntryMenu.dataRecord = rec.data;
priceEntryMenu.showAt(e.getXY());
};
// On Selecting a option from application specific contextmenu Adds a new row to price entry grid , Deletes a row respectively
var onClick = function (grid, text) {
if (text == "Add Row") {
storeData.IsAddedRow = true;
var r = Ext.create('TestGridModel', storeData);
var storeSt = Ext.getStore('Store1');
storeSt.insert(rowindex + 1, r); // insert a new record into the store (also see add)
pageNo = $('#PageBar').find('input[type="text"]').val();
var rowIndex = App.TestGrid.getSelectionModel().selected.items[0].index;//Get the selected row index
//var pageSize = '@Convert.ToInt32(PriceRight.Settings.PropertyReader.GetProperty("GRID_PAGE_SIZE"))'
var pageSize = 3;
if (pageNo > 1) {
rowIndex = rowIndex - ((pageNo - 1) * pageSize);
}
addedRecords.push({ "PageNo": pageNo, "rowIndex": rowindex + 1, "record": r });
App.TestGrid.getSelectionModel().select(App.TestGrid.store.getAt(rowIndex+1))
App.TestGrid.editingPlugin.startEditByPosition({ row: rowindex, column: 0 });
return false;
}
};
</script>
Following are my controller action methods
[AllowAnonymous]
public ActionResult Test()
{
return View();
}
[AllowAnonymous]
public ActionResult GetData(StoreRequestParameters parameters)
{
return this.Store(Paging(parameters));
}
private Paging<DummyData> Paging(StoreRequestParameters parameters)
{
return Paging(parameters.Start, parameters.Limit, parameters.SimpleSort, parameters.SimpleSortDirection, null);
}
private Paging<DummyData> Paging(int start, int limit, string sort, SortDirection dir, string filter)
{
List<DummyData> data = new List<DummyData>();
data.Add(new DummyData() { IdCol = 1, NameCol = "First", AgeCol = 25 });
data.Add(new DummyData() { IdCol = 2, NameCol = "Second", AgeCol = 35 });
data.Add(new DummyData() { IdCol = 3, NameCol = "Third", AgeCol = 30 });
data.Add(new DummyData() { IdCol = 4, NameCol = "Fourth", AgeCol = 25 });
data.Add(new DummyData() { IdCol = 5, NameCol = "Fifth", AgeCol = 35 });
data.Add(new DummyData() { IdCol = 6, NameCol = "Sixth", AgeCol = 30 });
if (!string.IsNullOrEmpty(filter) && filter != "*")
{
//data.RemoveAll(plant => !plant.Common.ToLower().StartsWith(filter.ToLower()));
}
if (!string.IsNullOrEmpty(sort))
{
data.Sort(delegate(DummyData x, DummyData y)
{
object a;
object b;
int direction = dir == SortDirection.DESC ? -1 : 1;
a = x.GetType().GetProperty(sort).GetValue(x, null);
b = y.GetType().GetProperty(sort).GetValue(y, null);
return CaseInsensitiveComparer.Default.Compare(a, b) * direction;
});
}
if ((start + limit) > data.Count)
{
limit = data.Count - start;
}
List<DummyData> rangePlants = (start < 0 || limit < 0) ? data : data.GetRange(start, limit);
return new Paging<DummyData>(rangePlants, data.Count);
}
and Following is my ViewModel
public class DummyData
{
public int IdCol { get; set; }
public string NameCol { get; set; }
public int AgeCol { get; set; }
}
