[CLOSED] The panel will detail a button that performs the update with a server-side method.

Page 2 of 2 FirstFirst 12
  1. #11
    Quote Originally Posted by 78fede78 View Post
    Hello why you say that my code is unreadable?
    I used the code tags.
    [/ CODE] .
    How do I indent?
     
    I hope it is readable now
    Hi,

    Yes, thank you for using [CODE] tags.

    But there is an issue with 'space' character.
    For example,
    protectedvoid
    newobject
    Needing space character is absent between 'protected' and 'void', 'new' and 'object'.
    I think it happens when you copy code from your code editor (btw, what is it?) and paste it to the forum's editor.
    Also it can deal with a browser that you use (btw, what browser?)

    Please follow the recommendations that Geoffrey described, try to copy text to NotePad(for example) before posting it to the forum.
    The issue with space character should disappear.
  2. #12
    Before explorer 8
    Now Firefox


    
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e) 
        { 
            if (!X.IsAjaxRequest)
            { 
                this.BindData(); 
            } 
        }
        
        protected void MyData_Refresh(object sender, StoreRefreshDataEventArgs e)
        { 
            this.BindData();
        }
        
        private void BindData() 
        {         
            Store1.DataSource = this.Data;
            Store1.DataBind();
        }
        
        private object[] Data 
        { 
            get 
            { 
                DateTime now = DateTime.Now; 
                return new object[] 
                { 
                    new object[] { "3m Co", 71.72, 0.02, 0.03, now }, 
                    new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, now }, 
                    new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, now }, 
                    new object[] { "American Express Company", 52.55, 0.01, 0.02, now }, 
                    new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, now }, 
                    new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, now }, 
                    new object[] { "Boeing Co.", 75.43, 0.53, 0.71, now }, 
                    new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, now }, 
                    new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, now }, 
                    new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, now }, 
                    new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, now }, 
                    new object[] { "General Electric Company", 34.14, -0.08, -0.23, now }, 
                    new object[] { "General Motors Corporation", 30.27, 1.09, 3.74, now }, 
                    new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, now }, 
                    new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, now }, 
                    new object[] { "Intel Corporation", 19.88, 0.31, 1.58, now }, 
                    new object[] { "International Business Machines", 81.41, 0.44, 0.54, now }, 
                    new object[] { "Johnson & Johnson", 64.72, 0.06, 0.09, now }, 
                    new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, now }, 
                    new object[] { "McDonald\"s Corporation", 36.76, 0.86, 2.40, now }, 
                    new object[] { "Merck & Co., Inc.", 40.96, 0.41, 1.01, now }, 
                    new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, now }, 
                    new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, now }, 
                    new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58, now }, 
                    new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02, now }, 
                    new object[] { "The Procter & Gamble Company", 61.91, 0.01, 0.02, now }, 
                    new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, now }, 
                    new object[] { "Verizon Communications", 35.57, 0.39, 1.11, now }, 
                    new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, now } }; } } 
                    
        </script>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Ext.NET Example</title>
    </head>
    <body>
        <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:GridPanel ID="GridPanel1" runat="server" StripeRows="true" Title="Array Grid"
            Width="600" Height="290" AutoExpandColumn="Company" SelectionMemory="Enabled">
            <Store>
                <ext:Store ID="Store1" runat="server" OnRefreshData="MyData_Refresh">
                    <Reader>
                        <ext:ArrayReader IDProperty="company">
                            <Fields>
                                <ext:RecordField Name="company" />
                                <ext:RecordField Name="price" Type="Float" />
                                <ext:RecordField Name="change" Type="Float" />
                                <ext:RecordField Name="pctChange" Type="Float" />
                                <ext:RecordField Name="lastChange" Type="Date" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel ID="ColumnModel1" runat="server">
                <Columns>
                    <ext:RowNumbererColumn />
                    <ext:Column ColumnID="Company" Header="Company" Width="160" DataIndex="company" />
                    <ext:Column Header="Price" Width="75" DataIndex="price" />
                    <ext:Column Header="Change" Width="75" DataIndex="change" />
                    <ext:Column Header="Change" Width="75" DataIndex="pctChange" />
                    <ext:DateColumn Header="Last Updated" Width="85" DataIndex="lastChange" Format="H:mm:ss" />
                </Columns>
            </ColumnModel>
           <SelectionModel>
                        <ext:RowSelectionModel ID="RowSelectionModel" runat="server" SingleSelect="true">                     
                                                
                         </ext:RowSelectionModel>
                     </SelectionModel>     
            <LoadMask ShowMask="true" />
            <BottomBar>
                <ext:PagingToolbar ID="PagingToolbar1" runat="server" />
            </BottomBar>
        </ext:GridPanel>
        
            <ext:Button ID="Button1" runat="server" Text="Delete the fifth record">
                    <Listeners>
                        <Click Handler="Store1.removeAt(5);" />
                    </Listeners>
                </ext:Button>
                
                 <ext:Button ID="Button2" runat="server" Text="Update the fifth record">
                    <Listeners>
                        <Click Handler="??" />
                    </Listeners>
                </ext:Button>
                
                
                 <ext:Button ID="Button3" runat="server" Text="Insert new  record">
                    <Listeners>
                        <Click Handler="??" />
                    </Listeners>
                </ext:Button>
                </form>
    </body>
    </html>
  3. #13
    Hi,

    Thank you for the good sample code.

    Please look at the following code that demonstrates how you could achieve this behavior without a repopulating a store.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store1.DataSource = this.Data;
                Store1.DataBind();
            }
        }
    
        private object[] Data
        {
            get
            {
                DateTime now = DateTime.Now;
                return new object[]
                {
                    new object[] { "3m Co", 71.72, 0.02, 0.03, now },
                    new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, now },
                    new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, now },
                    new object[] { "American Express Company", 52.55, 0.01, 0.02, now },
                    new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, now },
                    new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, now },
                    new object[] { "Boeing Co.", 75.43, 0.53, 0.71, now },
                    new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, now },
                    new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, now },
                    new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, now },
                    new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, now },
                    new object[] { "General Electric Company", 34.14, -0.08, -0.23, now },
                    new object[] { "General Motors Corporation", 30.27, 1.09, 3.74, now },
                    new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, now },
                    new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, now },
                    new object[] { "Intel Corporation", 19.88, 0.31, 1.58, now },
                    new object[] { "International Business Machines", 81.41, 0.44, 0.54, now },
                    new object[] { "Johnson & Johnson", 64.72, 0.06, 0.09, now },
                    new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, now },
                    new object[] { "McDonald\"s Corporation", 36.76, 0.86, 2.40, now },
                    new object[] { "Merck & Co., Inc.", 40.96, 0.41, 1.01, now },
                    new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, now },
                    new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, now },
                    new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58, now },
                    new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02, now },
                    new object[] { "The Procter & Gamble Company", 61.91, 0.01, 0.02, now },
                    new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, now },
                    new object[] { "Verizon Communications", 35.57, 0.39, 1.11, now },
                    new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, now } };
            }
        }
                     
    </script>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.NET Example</title>
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:GridPanel 
            ID="GridPanel1" 
            runat="server" 
            StripeRows="true" 
            Title="Array Grid"
            Width="600" 
            Height="290" 
            AutoExpandColumn="Company">
            <Store>
                <ext:Store ID="Store1" runat="server">
                    <Reader>
                        <ext:ArrayReader>
                            <Fields>
                                <ext:RecordField Name="company" />
                                <ext:RecordField Name="price" Type="Float" />
                                <ext:RecordField Name="change" Type="Float" />
                                <ext:RecordField Name="pctChange" Type="Float" />
                                <ext:RecordField Name="lastChange" Type="Date" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:RowNumbererColumn />
                    <ext:Column 
                        ColumnID="Company" 
                        Header="Company" 
                        Width="160" 
                        DataIndex="company" />
                    <ext:Column Header="Price" Width="75" DataIndex="price" />
                    <ext:Column Header="Change" Width="75" DataIndex="change" />
                    <ext:Column Header="Change" Width="75" DataIndex="pctChange" />
                    <ext:DateColumn 
                        Header="Last Updated" 
                        Width="85" 
                        DataIndex="lastChange" 
                        Format="H:mm:ss" />
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:RowSelectionModel runat="server" SingleSelect="true" />
            </SelectionModel>
            <BottomBar>
                <ext:PagingToolbar runat="server" />
            </BottomBar>
        </ext:GridPanel>
        <ext:Button runat="server" Text="Delete the fifth record">
            <Listeners>
                <Click Handler="Store1.removeAt(4);
                                GridPanel1.getView().refresh()" />
            </Listeners>
        </ext:Button>
        <ext:Button runat="server" Text="Update the fifth record">
            <Listeners>
                <Click Handler="var record = Store1.getAt(4);
                                record.set('company', 'The New Company');
                                record.set('price', 500);
                                record.commit();
                                GridPanel1.getView().refresh();" />
            </Listeners>
        </ext:Button>
        <ext:Button runat="server" Text="Insert new  record">
            <Listeners>
                <Click Handler="var newRecord = new Ext.data.Record();
                                newRecord.set('company', 'The Newest Company');
                                newRecord.set('price', 100);
                                Store1.insert(0, [newRecord]);
                                GridPanel1.getView().refresh()" />
            </Listeners>
        </ext:Button>
        </form>
    </body>
    </html>

    See also


    http://dev.sencha.com/deploy/dev/doc...xt.data.Record
    http://dev.sencha.com/deploy/dev/doc...Ext.data.Store
    http://dev.sencha.com/deploy/dev/doc...grid.GridPanel
    http://dev.sencha.com/deploy/dev/doc....grid.GridView
  4. #14
    Perfect that was what I wanted.
    Thanks!!!!!!!!!!!

    You can mark records updated / inserted?

    There is a markdirty properties?
  5. #15
    It's nice to help you.

    In the future please follow the recommendations for view of posts on the forum.

    The commit method that I used clears dirty flag when a record is changed.

    Here is an example how to mark records.
    https://examples1.ext.net/#/GridPane...rking_Records/
  6. #16
    I have one last problem
    the grid is inside a viewport.
    The height dela grid and its layout are calculated dynamically so as to avoid the scrollbar.
    When I insert a new record I must draw this script that changes dynamically paging.
    The record before was in first position after it last position.
    How can I do to remain in first place?

    Here's the code:




    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e) 
        { 
            if (!X.IsAjaxRequest)
            { 
                this.BindData(); 
            } 
        }
        
        protected void MyData_Refresh(object sender, StoreRefreshDataEventArgs e)
        { 
            this.BindData();
        }
        
        private void BindData() 
        {         
            Store1.DataSource = this.Data;
            Store1.DataBind();
        }
        
        private object[] Data 
        { 
            get 
            { 
                DateTime now = DateTime.Now; 
                return new object[] 
                { 
                    new object[] { "3m Co", 71.72, 0.02, 0.03, now }, 
                    new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, now }, 
                    new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, now }, 
                    new object[] { "American Express Company", 52.55, 0.01, 0.02, now }, 
                    new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, now }, 
                    new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, now }, 
                    new object[] { "Boeing Co.", 75.43, 0.53, 0.71, now }, 
                    new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, now }, 
                    new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, now }, 
                    new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, now }, 
                    new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, now }, 
                    new object[] { "General Electric Company", 34.14, -0.08, -0.23, now }, 
                    new object[] { "General Motors Corporation", 30.27, 1.09, 3.74, now }, 
                    new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, now }, 
                    new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, now }, 
                    new object[] { "Intel Corporation", 19.88, 0.31, 1.58, now }, 
                    new object[] { "International Business Machines", 81.41, 0.44, 0.54, now }, 
                    new object[] { "Johnson & Johnson", 64.72, 0.06, 0.09, now }, 
                    new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, now }, 
                    new object[] { "McDonald\"s Corporation", 36.76, 0.86, 2.40, now }, 
                    new object[] { "Merck & Co., Inc.", 40.96, 0.41, 1.01, now }, 
                    new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, now }, 
                    new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, now }, 
                    new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58, now }, 
                    new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02, now }, 
                    new object[] { "The Procter & Gamble Company", 61.91, 0.01, 0.02, now }, 
                    new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, now }, 
                    new object[] { "Verizon Communications", 35.57, 0.39, 1.11, now }, 
                    new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, now } }; } } 
                    
        </script>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Ext.NET Example</title>
    </head>
    <body>
        <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:GridPanel ID="GridPanel1" runat="server" StripeRows="true" Title="Array Grid"
            Width="600" Height="290" AutoExpandColumn="Company" SelectionMemory="Enabled">
            <Store>
                <ext:Store ID="Store1" runat="server" OnRefreshData="MyData_Refresh">
                    <Reader>
                        <ext:ArrayReader IDProperty="company">
                            <Fields>
                                <ext:RecordField Name="company" />
                                <ext:RecordField Name="price" Type="Float" />
                                <ext:RecordField Name="change" Type="Float" />
                                <ext:RecordField Name="pctChange" Type="Float" />
                                <ext:RecordField Name="lastChange" Type="Date" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel ID="ColumnModel1" runat="server">
                <Columns>
                    <ext:RowNumbererColumn />
                    <ext:Column ColumnID="Company" Header="Company" Width="160" DataIndex="company" />
                    <ext:Column Header="Price" Width="75" DataIndex="price" />
                    <ext:Column Header="Change" Width="75" DataIndex="change" />
                    <ext:Column Header="Change" Width="75" DataIndex="pctChange" />
                    <ext:DateColumn Header="Last Updated" Width="85" DataIndex="lastChange" Format="H:mm:ss" />
                </Columns>
            </ColumnModel>
           <SelectionModel>
                        <ext:RowSelectionModel ID="RowSelectionModel" runat="server" SingleSelect="true">                     
                                                
                         </ext:RowSelectionModel>
                     </SelectionModel>     
            <LoadMask ShowMask="true" />
            <BottomBar>
                <ext:PagingToolbar ID="PagingToolbar1" runat="server" PageSize="6" StoreID="Store1"  />
            </BottomBar>
        </ext:GridPanel>
        
        <ext:Button ID="Button1" runat="server" Text="Delete the fifth record">
             <Listeners>
                    <Click Handler="Store1.removeAt(4);GridPanel1.getView().refresh()" />
              </Listeners>     
        </ext:Button>
        
        <ext:Button ID="Button2" runat="server" Text="Update the fifth record">         
            <Listeners>             
                <Click Handler="var record = Store1.getAt(4);
                                record.set('company', 'The New Company');
                                record.set('price', 500);
                                record.commit(); 
                                GridPanel1.getView().refresh();
                                GridPanel1.getSelectionModel().selectRow(4);" />         
             </Listeners>
        </ext:Button>
        
        <ext:Button ID="Button3" runat="server" Text="Insert new  record">
            <Listeners>
                <Click Handler="var newRecord = new Ext.data.Record();
                                newRecord.set('company', 'The Newest Company');
                                newRecord.set('price', 100);
                                Store1.insert(0, [newRecord]);
                                GridPanel1.getView().refresh();
                                GridPanel1.getSelectionModel().selectRow(0);
                                PagingToolbar1.PageSize=4;
                                GridPanel1.setHeight(600);
                                PagingToolbar1.doLoad(0);" />         
             </Listeners>     
             </ext:Button>     
             </form>
             </body> 
     </html>
  7. #17
    Hi,

    1. Inserting records if you use local paging doesn't maintain index in the whole data (record always adding to the end)
    You can manually move the record to the end
    Store1.insert(0, [newRecord]);                            
    var lastItem = Store1.allData.last();
    Store1.allData.remove(lastItem);
    Store1.allData.insert(0, lastItem);
    2. If you want to change page size then need use 'pageSize' instead 'PageSize'
    PagingToolbar1.pageSize=4;
    3. I am not sure why do you call view's refresh after deleting or updating a record. Store automatically refresh view after that operations therefore manually calling is not required
  8. #18
    perfect! You are very resourceful!
    To delete the selected row
    GridPanel1. GetSelectionModel. () Delete ()???
  9. #19
    Hi,

    Please use DeleteSelected server side method (or 'deleteSelected' javascript method) of GridPanel
Page 2 of 2 FirstFirst 12

Similar Threads

  1. Replies: 1
    Last Post: Sep 21, 2011, 11:56 AM
  2. Server side method to save Gridpanel
    By cpvaishya in forum 1.x Help
    Replies: 0
    Last Post: Jan 27, 2010, 1:09 AM
  3. Update grid from Server Side
    By Maia in forum 1.x Help
    Replies: 3
    Last Post: Jun 03, 2009, 2:21 PM
  4. Invoking Server side method
    By bobs in forum 1.x Help
    Replies: 2
    Last Post: May 08, 2009, 3:12 AM
  5. Update Store on Server Side
    By Tbaseflug in forum 1.x Help
    Replies: 2
    Last Post: Jan 14, 2009, 5:59 PM

Posting Permissions