Capture Grid Cell Changed Event

  1. #1

    Capture Grid Cell Changed Event

    I'd like to use an ajax event for capturing when a cell is changed in a grid so that I can update other cells which are calculated in codebehind. I'd like to do this without the user having to click a save button. So as soon as the cell loses focus / the value has changed I'd like to call a codebehind method that can change other values for the row.

    For example:

    3 columns: (1) Value 1; (2) Value 2; (3) Calculated as Value 1 + Value 2 and set from codebehind

    Can you advise the best practice for handling this pattern? Thanks, Chris
  2. #2

    RE: Capture Grid Cell Changed Event

    Hi,

    Please see the following sample:
    <%@ Page Language="C#" %>
    <%@ Import Namespace="System.Collections.Generic"%>
    
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Ext.IsAjaxRequest)
            {
                this.Store1.DataSource = new object[]
                {
                    new object[] {1,2,3},
                    new object[] {1,2,3},
                    new object[] {1,2,3}
                };
    
                this.Store1.DataBind();
            }
        }
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title></title>
        <script runat="server">
            protected void PerformSum(object sender, AjaxEventArgs e)
            {
                string id = e.ExtraParams["recordId"];
                Dictionary<string, string> record = JSON.Deserialize<Dictionary<string, string>>(e.ExtraParams["record"]);
    
                int sum = int.Parse(record["x"]) + int.Parse(record["y"]);
    
                ScriptManager1.AddScript("{0}.getById({1}).set('sum', {2})", this.Store1.ClientID, JSON.Serialize(id), sum);
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ScriptManager ID="ScriptManager1" runat="server" />
            
            <ext:Store ID="Store1" runat="server">
                <Reader>
                    <ext:ArrayReader>
                        <Fields>
                            <ext:RecordField Name="x" Type="Int" />
                            <ext:RecordField Name="y" Type="Int" />
                            <ext:RecordField Name="sum" Type="Int" />
                        </Fields>
                    </ext:ArrayReader>
                </Reader>
            </ext:Store>
            
            <ext:GridPanel 
                ID="GridPanel1" 
                runat="server" 
                StoreID="Store1"            
                Title="Grid" 
                Width="600" 
                Height="350">
                <ColumnModel ID="ColumnModel1" runat="server">
                    <Columns>
                        <ext:Column DataIndex="x" Header="X">
                            <Editor>
                                <ext:TextField runat="server"></ext:TextField>
                            </Editor>
                        </ext:Column>
                        <ext:Column DataIndex="y" Header="Y">
                            <Editor>
                                <ext:TextField runat="server"></ext:TextField>
                            </Editor>
                        </ext:Column>
                        <ext:Column DataIndex="sum" Header="Sum"></ext:Column>
                    </Columns>
                </ColumnModel>     
                <AjaxEvents>
                    <AfterEdit OnEvent="PerformSum">
                        <ExtraParams>
                            <ext:Parameter Name="recordId" Value="e.record.id" Mode="Raw" />
                            <ext:Parameter Name="record" Value="Ext.encode(e.record.data)" Mode="Raw" />
                        </ExtraParams>
                    </AfterEdit>
                </AjaxEvents>     
            </ext:GridPanel>  
        </form>
    </body>
    </html>

  3. #3

    RE: Capture Grid Cell Changed Event

    Excellent. Thank you Vladimir. C

Similar Threads

  1. Replies: 0
    Last Post: May 16, 2012, 4:35 PM
  2. Replies: 0
    Last Post: May 12, 2012, 11:24 AM
  3. Replies: 1
    Last Post: Mar 02, 2010, 10:53 AM
  4. Capture GRID Group Click
    By Cr@iG in forum 1.x Help
    Replies: 0
    Last Post: Feb 19, 2010, 7:04 AM
  5. Replies: 1
    Last Post: Sep 11, 2009, 11:41 AM

Posting Permissions