[CLOSED] How I save the records insert in GridPanel in Javascript (client side)?

  1. #1

    [CLOSED] How I save the records insert in GridPanel in Javascript (client side)?

    Hi!

    I'm following this example https://examples2.ext.net/#/GridPane...rking_Records/...

    I wish save the records added in GridPanel... but, my Save method is in CodeBehind... and I wish this method continue in codebehind.

    There are any property of gridPanel or Store that reflects this inserted records in cliente side in server side?

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            this.GridPanel1.Store.Primary.DataSource = new object[]
            {
                new object[] { "Sample 1" },
                new object[] { "Sample 2" },
                new object[] { "Sample 3" },
                new object[] { "Sample 4" },
                new object[] { "Sample 5" },
                new object[] { "Sample 6" },
                new object[] { "Sample 7" },
                new object[] { "Sample 8" },
                new object[] { "Sample 9" },
                new object[] { "Sample 10" },
                new object[] { "Sample 11" },
                new object[] { "Sample 12" },
                new object[] { "Sample 13" },
                new object[] { "Sample 14" },
                new object[] { "Sample 15" }
            };
    
            this.GridPanel1.Store.Primary.DataBind();
        }
    </script>
    
    <html>
    <head id="Head1" runat="server">
        <title>Marking Changed GridPanel - Ext.NET Examples</title>
        
        <style type="text/css">
            .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 id="Form1" runat="server">
            
            <script type="text/javascript">
                var getRowClass = function (record) {
                    if (record.phantom) {
                        return "new-row";
                    }
                    
                    if (record.dirty) {
                        return "dirty-row";
                    }
                }
    
                var insertRecord = function () {
                    var grid = <%= GridPanel1.ClientID %>;
                    
                    grid.store.insert(0, {});
                    grid.getView().focusRow(0);
                    grid.editingPlugin.startEdit(grid.store.getAt(0), grid.columns[0]);
                }
            </script>  
            
            <ext:ResourceManager ID="ResourceManager1" 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 ID="Store1" runat="server">
                        <Model>
                            <ext:Model ID="Model1" runat="server" IDProperty="TestCell">
                                <Fields>
                                    <ext:ModelField Name="TestCell" />                       
                                </Fields>
                            </ext:Model>
                        </Model>
    
                    </ext:Store>
                </Store>
                <ColumnModel ID="ColumnModel1" runat="server">
                    <Columns>
                        <ext:Column ID="Column1" runat="server" Text="TestCell" DataIndex="TestCell" Flex="1">
                            <Editor>
                                <ext:TextField ID="TextField1" runat="server" />
                            </Editor>
                        </ext:Column>                    
                    </Columns>
                </ColumnModel>
                <View>
                    <ext:GridView ID="GridView1" runat="server" StripeRows="true">
                        <GetRowClass Fn="getRowClass" />                       
                    </ext:GridView>
                </View>
                <Plugins>
                    <ext:CellEditing ID="CellEditing1" runat="server" ClicksToEdit="1" />
                </Plugins>
                <Buttons>
                    <ext:Button ID="Button1" runat="server" Text="Insert record" Icon="Add">
                        <Listeners>
                            <Click Fn="insertRecord" />
                        </Listeners>
                    </ext:Button>
                </Buttons>
            </ext:GridPanel>  
        </form>
    </body>
    </html>
    Last edited by Daniil; Apr 11, 2012 at 8:36 PM. Reason: [CLOSED]
  2. #2
    Hi,

    my Save method is in CodeBehind
    Well, I can't see that method in your example.

    Here is some example how to save new records.
    https://examples2.ext.net/#/GridPanel/Update/Batch/

    Try to create some record and click the Sync button.
  3. #3
    Hi Daniil!

    I think that this example that you suggested is exactly what I need!

    Thanks a lot! (if you want you can close this thread).

Similar Threads

  1. Replies: 1
    Last Post: May 11, 2012, 12:57 PM
  2. [CLOSED] Cancel insert on store's save after server side validation.
    By SouthDeveloper in forum 1.x Legacy Premium Help
    Replies: 10
    Last Post: Nov 23, 2011, 1:16 AM
  3. Save as dialog on client side for image
    By vishal.jhala@gmail.com in forum 1.x Help
    Replies: 0
    Last Post: Aug 06, 2011, 8:02 PM
  4. records to the client side does not
    By relativ in forum 1.x Help
    Replies: 2
    Last Post: Oct 21, 2009, 5:58 AM
  5. Replies: 0
    Last Post: Sep 17, 2009, 8:04 AM

Posting Permissions