Hello @idrissb!
What you can do is build a list of added entries (with their IDs, for example) as they are added. Then send them as a parameter in postback.
Here is an example, adapted from the
Marking Records (the same I pointed you in the
other post):
View
@model Ext.Net.MVC.Examples.Areas.GridPanel_Miscellaneous.Models.Marking_RecordsModel
@{
ViewBag.Title = "Marking Records - Ext.NET MVC Examples";
Layout = "~/Views/Shared/_BaseLayout.cshtml";
var X = Html.X();
}
@section headtag
{
<style>
.dirty-row .x-grid-cell, .dirty-row .x-grid-rowwrap-div {
background-color: #FFFDD8 !important;
}
.new-row .x-grid-cell, .new-row .x-grid-rowwrap-div {
background: #c8ffc8 !important;
}
</style>
<script>
var getRowClass = function (record) {
if (record.phantom) {
return "new-row";
}
if (record.dirty) {
return "dirty-row";
}
};
var added_items = [];
var insertRecord = function() {
var grid = App.GridPanel1;
grid.store.insert(0, {});
grid.getView().focusRow(0);
var inserted_item = grid.store.getAt(0);
grid.editingPlugin.startEdit(inserted_item, grid.columns[0]);
added_items[added_items.length]=inserted_item;
};
var showAddedItems = function() {
var addstring = ""
for (var i in added_items) {
addstring += "[" + added_items[i].id + "]";
}
alert("Will add items with Ext IDs: " + addstring);
}
</script>
}
@section example
{
<h1>Marking Records</h1>
<p>Demonstrates how to mark rows with custom colors. Edit any cell or insert new record.</p>
@(X.GridPanel()
.ID("GridPanel1")
.Title("Test Grid")
.Width(600)
.Height(350)
.Store(X.Store()
.Model(X.Model()
.IDProperty("ID")
.Fields(fld => fld.AddRange(new ModelField[]
{
new ModelField("ID"),
new ModelField("Data")
})))
.DataSource(Model.TestData)
)
.ColumnModel(
X.Column()
.Text("Column Desc Text")
.DataIndex("Data")
.Flex(1)
.Editor(X.TextField())
)
.View(X.GridView()
.StripeRows(true)
.GetRowClass(grc => grc.Fn = "getRowClass")
)
.Plugins(
X.CellEditing().ClicksToEdit(1).Listeners(events => events.Edit.Handler = "e.grid.getView().refresh();")
)
.Buttons(
X.Button()
.Text("Insert record")
.Icon(Icon.Add)
.Handler("insertRecord"),
X.Button()
.Text("Update server")
.Icon(Icon.DatabaseSave)
.OnClientClick("showAddedItems();")
)
)
}
Model
public class Marking_RecordsModel
{
public IEnumerable TestData
{
get
{
return new object[]
{
new object[] { 1, "Sample 1" },
new object[] { 2, "Sample 2" },
new object[] { 3, "Sample 3" },
new object[] { 4, "Sample 4" },
new object[] { 5, "Sample 5" },
new object[] { 6, "Sample 6" },
new object[] { 7, "Sample 7" },
new object[] { 8, "Sample 8" },
new object[] { 9, "Sample 9" },
new object[] { 10, "Sample 10" },
new object[] { 11, "Sample 11" },
new object[] { 12, "Sample 12" },
new object[] { 13, "Sample 13" },
new object[] { 14, "Sample 14" },
new object[] { 15, "Sample 15" }
};
}
}
}
Controller
public class Marking_RecordsController : Controller
{
public ActionResult Index()
{
return View(new Marking_RecordsModel());
}
}
And, for convenience, a one-file WebForms example if you have trouble with the above.
<%@ Page Language="C#" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
this.GridPanel1.GetStore().DataSource = new object[]
{
new object[] { 1, "Sample 1" },
new object[] { 2, "Sample 2" },
new object[] { 3, "Sample 3" },
new object[] { 4, "Sample 4" },
new object[] { 5, "Sample 5" },
new object[] { 6, "Sample 6" },
new object[] { 7, "Sample 7" },
new object[] { 8, "Sample 8" },
new object[] { 9, "Sample 9" },
new object[] { 10, "Sample 10" },
new object[] { 11, "Sample 11" },
new object[] { 12, "Sample 12" },
new object[] { 13, "Sample 13" },
new object[] { 14, "Sample 14" },
new object[] { 15, "Sample 15" }
};
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Marking Records - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />
<style>
.dirty-row .x-grid-cell, .dirty-row .x-grid-rowwrap-div {
background-color: #FFFDD8 !important;
}
.new-row .x-grid-cell, .new-row .x-grid-rowwrap-div {
background: #c8ffc8 !important;
}
</style>
</head>
<body>
<form runat="server">
<script>
var getRowClass = function(record) {
if (record.phantom) {
return "new-row";
}
if (record.dirty) {
return "dirty-row";
}
};
var added_items = [];
var insertRecord = function() {
var grid = <%= GridPanel1.ClientID %>;
grid.store.insert(0, {});
grid.getView().focusRow(0);
var inserted_item = grid.store.getAt(0);
grid.editingPlugin.startEdit(inserted_item, grid.columns[0]);
added_items[added_items.length]=inserted_item;
};
var showAddedItems = function() {
var addstring = ""
for (var i in added_items) {
addstring += "[" + added_items[i].id + "]";
}
alert("Will add items with Ext IDs: " + addstring);
}
</script>
<ext:ResourceManager runat="server" />
<h1>Marking Records</h1>
<p>Demonstrates how to mark rows with custom colors. Edit any cell or insert new record.</p>
<ext:GridPanel
ID="GridPanel1"
runat="server"
Title="Test Grid"
Width="600"
Height="350">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server" IDProperty="ID">
<Fields>
<ext:ModelField Name="ID" />
<ext:ModelField Name="Data" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Column Text" DataIndex="Data" Flex="1">
<Editor>
<ext:TextField runat="server" />
</Editor>
</ext:Column>
</Columns>
</ColumnModel>
<View>
<ext:GridView runat="server" StripeRows="true">
<GetRowClass Fn="getRowClass" />
</ext:GridView>
</View>
<Plugins>
<ext:CellEditing runat="server" ClicksToEdit="1">
<Listeners>
<Edit Handler="e.grid.getView().refresh();" />
</Listeners>
</ext:CellEditing>
</Plugins>
<Buttons>
<ext:Button runat="server" Text="Insert record" Icon="Add">
<Listeners>
<Click Fn="insertRecord" />
</Listeners>
</ext:Button>
<ext:Button runat="server" Text="Update server" Icon="DatabaseSave" OnClientClick="showAddedItems();" />
</Buttons>
</ext:GridPanel>
</form>
</body>
</html>
I hope this helps!
