[CLOSED] Get ID value after save and rebind the grid when row selection

Page 2 of 2 FirstFirst 12
  1. #11

    Get ID value after save and rebind the grid when row selection.

    Hi Daniil,

    How to get ID value (or key field) after saving editable gridpanel?
    Actually we posted two issues,

    1) get ID value after saving.
    2) Double click to save item in IE 11 browser.

    You provided the solution for the second issue and you've not suggested anything for the first issue.

    Please provide the solution.


    It's better for us to get the list for the known issues (i.e) the features which are working in Ext 1.2 version but not directly working in Ext 2.5 version.
    That would help us to work efficiently!
  2. #12
    5. In the row selection event, idValue obtained is not correct . This is the issue.
    If I add this
    X.Msg.Alert("idValue", idValue).Show();
    at the end of the RowSelection server method, I see an alert box with "2" which appears to be correct.

    Please clarify what value do use see in the "idValue" variable and what value do you expect to see there?

    It's better for us to get the list for the known issues (i.e) the features which are working in Ext 1.2 version but not directly working in Ext 2.5 version.
    That would help us to work efficiently!
    Unfortunately, there is no such a list.

    Here is the best tips for migrating from v1 to v2 that I can do:
    http://forums.ext.net/showthread.php...ll=1#post79239

    You provided the solution for the second issue and you've not suggested anything for the first issue.
    Ideally, please keep the only issue per thread.
    Last edited by Daniil; Jul 18, 2014 at 3:09 PM.
  3. #13
    Hi Daniil,

    Please walk through this code and guide us to solve the issue.

    
    <%@ 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; }
        }
     
        private void BindData(List<Data> datalist)
        {
            //Actually data retrive from database only,  for this sample i used datalist
            storeGrid.DataSource = datalist;
            storeGrid.DataBind();
     
        }
     
        int maxID = 0;
     
        protected void storeGrid_BeforeChanged(object sender, BeforeStoreChangedEventArgs e)
        {
     
            List<Data> savedData = new List<Data>();
     
            string json = e.DataHandler.JsonData;
            StoreDataHandler dataHandler = new StoreDataHandler(json);
            List<Data> dataContainer = dataHandler.ObjectData<Data>();
            maxID = 1;
            foreach (Data data in dataContainer)
            {
                if (e.Action == StoreAction.Create)
                {
                    data.ID = maxID;
                    //Call Save Method to save the data
     
                    //For this sample i used a temporary list to add object to the list. This list is used to rebind the grid.
                    savedData.Add(data);
     
                    maxID++;
                }
            }
     
            //For this sample i passed temporary list 
            BindData(savedData);
            this.ResourceManager1.AddScript("editMode = false;");
     
        }
     
        protected void storeGrid_AfterRecordInserted(object sender, AfterRecordInsertedEventArgs e)
        {
            e.Keys.Add("ID", maxID);
        }
     
        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);
     
        }
         
     
    </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" />
                                    </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>
                        </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>
    Note: Proceed with the following steps:

    a) Click Add button and add multiple rows.
    b) Click on Save button.

    Issue found:
    After inserting the rows, each rows are saved with Same ID, so when row selection we are getting selected rowIndex wrong.
    Verify the attached screen shot.

    Clarification needed:
    How to insert the key values of multiple rows in "OnAfterRecordInserted" proprty of a store?

    Hope you'll provide us the code with all changes done.
    Attached Thumbnails Click image for larger version. 

Name:	RowIndex issue.jpg 
Views:	8 
Size:	41.4 KB 
ID:	13661  
  4. #14
    This code:
    int maxID = 0;
    It is executed on each request. So, maxID is zero always. You could make the maxId variable static or store it in a Session.

    Moreover you set it to 1 on each request.
    maxID = 1;
    I think it explains why you have the same ids.

    How to insert the key values of multiple rows in "OnAfterRecordInserted" proprty of a store?
    As far as I can understand you are doing that correctly.
  5. #15

    Get ID value after save and rebind the grid when row selection.

    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.
  6. #16
    I doubt all the data can be re-bound to a Store during a sync request. It deals with the records that being saved only.

    To get it behave similar to Ext.NET v1, I would recommend the following approach.

    1. Remove storeGrid_BeforeChanged and storeGrid_AfterRecordInsterted.

    2. Use this Button for saving.
    <ext:Button runat="server" Text="Save 2">
        <DirectEvents>
            <Click OnEvent="Store_Save">
                <ExtraParams>
                    <ext:Parameter Name="data" Value="Sample.storeGrid.getChangedData()" Mode="Raw" />
                </ExtraParams>
            </Click>
        </DirectEvents>
    </ext:Button>
    3. The Store_Save definition.
    protected void Store_Save(object sender, DirectEventArgs e)
    {
        StoreDataHandler dataHandler = new StoreDataHandler(e.ExtraParams["data"]);
        ChangeRecords<Data> dataContainer = dataHandler.BatchObjectData<Data>();
    
        foreach (Data data1 in dataContainer.Created)
        {
            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;");
    }
Page 2 of 2 FirstFirst 12

Similar Threads

  1. Replies: 10
    Last Post: Apr 19, 2013, 3:16 PM
  2. Replies: 0
    Last Post: Sep 13, 2011, 6:59 AM
  3. Replies: 1
    Last Post: Jul 27, 2011, 10:19 AM
  4. grid row select after rebind
    By [WP]joju in forum 1.x Help
    Replies: 3
    Last Post: Nov 24, 2009, 4:46 AM
  5. Cannot Rebind to Grid
    By simonmicheal in forum 1.x Help
    Replies: 4
    Last Post: Jul 24, 2009, 6:20 PM

Tags for this Thread

Posting Permissions