Hi Daniil,
Thank you for the guidance.
We are posting another sample related to this same issue. Please go through the same and help us.
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html>
<script runat="server">
private class Data
{
private int _id = 0;
public int ID { get { return _id; } set { this._id = value; } }
public string Name { get; set; }
public string Description { get; set; }
public DateTime? DateCreated { get; set; }
}
private void BindData(List<Data> datalist)
{
//Actually data retrive from database only, for this sample i used datalist
storeGrid.DataSource = datalist;
storeGrid.DataBind();
}
static int maxID = 0;
static List<Data> dataStore = new List<Data>();
protected void storeGrid_BeforeChanged(object sender, BeforeStoreChangedEventArgs e)
{
string json = e.DataHandler.JsonData;
StoreDataHandler dataHandler = new StoreDataHandler(json);
List<Data> dataContainer = dataHandler.ObjectData<Data>();
foreach (Data data1 in dataContainer)
{
if (e.Action == StoreAction.Create)
{
maxID++;
var data = new Data();
data.ID = maxID;
data.DateCreated = DateTime.Now.AddDays(maxID);
data.Description = data1.Description;
data.Name = data1.Name;
dataStore.Add(data);
}
}
BindData(dataStore);
this.ResourceManager1.AddScript("editMode = false;");
}
protected void RowSelection(object sender, DirectEventArgs e)
{
string JSONValue = e.ExtraParams["Values"].ToString();
var dataObject = JSON.Deserialize<List<Data>>(JSONValue);
int idValue = 0;
if (dataObject != null && dataObject.Count > 0)
idValue = Convert.ToInt32(dataObject[0].ID);
}
protected void storeGrid_AfterRecordInserted(object sender, AfterRecordInsertedEventArgs e)
{
e.Keys.Add("ID", maxID);
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script>
Ext.view.Table.override({
refreshSize: function () {
var me = this,
grid = me.up('tablepanel');
if (grid.editingPlugin && grid.editingPlugin.editing) {
Ext.defer(this.refreshSize, 100, me);
return;
}
me.callParent();
}
});
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" Namespace="Sample" />
<div>
<ext:GridPanel ID="gridpanel" runat="server" Border="false"
Width="500" Height="400">
<Store>
<ext:Store ID="storeGrid" runat="server" IgnoreExtraFields="true"
OnBeforeStoreChanged="storeGrid_BeforeChanged" OnAfterRecordInserted="storeGrid_AfterRecordInserted">
<Model>
<ext:Model ID="Model1" runat="server" IDProperty="ID">
<Fields>
<ext:ModelField Name="ID" />
<ext:ModelField Name="Name" />
<ext:ModelField Name="Description" />
<ext:ModelField Name="DateCreated" Type="Date" />
</Fields>
</ext:Model>
</Model>
<Listeners>
<Write Handler="Ext.Msg.alert('Write', 'The data successfully saved');" />
</Listeners>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel2" runat="server">
<Columns>
<ext:Column ID="Name" ColumnID="Name" runat="server" DataIndex="Name" Text="Name" Width="150">
<PrepareCommand Args="grid,command,record,row,col,value" FormatHandler="False" Handler="" />
<Editor>
<ext:TextField ID="txtName" runat="server" StyleSpec="text-transform:uppercase;"
MaxLength="50" EnableKeyEvents="true">
<Listeners>
<Show Handler="this.focus.defer(50, this);" />
<KeyUp Handler="if (e.keyCode >= 65 && e.keyCode <= 90) this.setValue(this.getValue().toUpperCase());" />
</Listeners>
</ext:TextField>
</Editor>
</ext:Column>
<ext:Column ID="Description" ColumnID="Description" runat="server" DataIndex="Description" Text="Description" Width="250">
<PrepareCommand Args="grid,command,record,row,col,value" FormatHandler="False" Handler="" />
<Editor>
<ext:TextField ID="txtDesc" runat="server" StyleSpec="text-transform:uppercase;"
MaxLength="50" EnableKeyEvents="true">
<Listeners>
<Show Handler="this.focus.defer(50, this);" />
<KeyUp Handler="if (e.keyCode >= 65 && e.keyCode <= 90) this.setValue(this.getValue().toUpperCase());" />
</Listeners>
</ext:TextField>
</Editor>
</ext:Column>
<ext:Column ID="ID" ColumnID="ID" runat="server" DataIndex="ID" Text="ID">
</ext:Column>
<ext:Column ID="DateCreated" ColumnID="DateCreated" runat="server" DataIndex="DateCreated" Text="DateCreated">
</ext:Column>
</Columns>
</ColumnModel>
<Plugins>
<ext:CellEditing ID="CellEditing1" runat="server">
</ext:CellEditing>
</Plugins>
<SelectionModel>
<ext:CheckboxSelectionModel ID="CheckboxSelectionModel1" Mode="Single" runat="server">
<Listeners>
<BeforeSelect Fn="ValidRow">
</BeforeSelect>
</Listeners>
<DirectEvents>
<Select OnEvent="RowSelection" ShowWarningOnFailure="false" Timeout="120000" Single="false">
<ExtraParams>
<ext:Parameter Name="Values" Value="Ext.encode(#{gridpanel}.getRowsValues({selectedOnly: true, visibleOnly: false, dirtyRowsOnly: false, currentPageOnly: true}))"
Mode="Raw" />
</ExtraParams>
</Select>
</DirectEvents>
</ext:CheckboxSelectionModel>
</SelectionModel>
<Buttons>
<ext:Button ID="btn_add1" runat="server" AutoPostBack="false" Text="Add Row">
<Listeners>
<Click Delay="1" Handler="newRow();" />
</Listeners>
</ext:Button>
<ext:Button ID="btn_save1" runat="server" AutoPostBack="false" Text="Save">
<Listeners>
<Click Delay="1" Handler="#{storeGrid}.sync();" />
</Listeners>
</ext:Button>
<ext:Button ID="Btn_Delete1" runat="server" Text="Delete">
</ext:Button>
<ext:Button ID="Btn_Cancel1" runat="server" Text="Cancel">
</ext:Button>
</Buttons>
</ext:GridPanel>
</div>
</form>
<script>
var editMode = false;
var alert = '';
function ValidRow() {
return !editMode;
}
function newRow() {
editMode = true;
var rowIndex = Sample.gridpanel.store.getCount();
Sample.gridpanel.store.insert(rowIndex, {});
}
</script>
</body>
</html>
We still face an issue with store rebinding, when we rebind the store in storebeforechanged event. The data bound to the store is not displayed on client.
Steps,
1.Click add row
2.Enter necessary input
3.Click savebutton
*NOW STORE BEFORE CHANGED EVENT FIRES*
4. here we retrieve the data from the client request and do necessary process, e.g save in db/ call service etc..
5. Rebind the store, assign datasource and call databind
E.g. I add 10 rows in the client side, in the server event I save these 10 rows in a db.
at the same time another client has added 5 rows. So I rebind the grid.
NOW, The expected result is all rows are bound to grid and displayed but the actual result is data is not bound to grid
NOTE: In v 1.x this was working without any issues.