[CLOSED] updating a grid's cell not working

  1. #1

    [CLOSED] updating a grid's cell not working

    Hello,
    After updating a number field, I need to update a NumberField in a GridPanel called grdAllProducts with a value I get from grdProducts but it is not working. Can you please show me the right method/property?
    Currently I am using:

    gridAllProducts.getRowsValues()[a].DamageCount = gridSelectedProducts.getRowsValues()[s].DamageCount;

    Below is my code:
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <ext:XScript ID="XScript1" runat="server">
            <script type="text/javascript">
              var UpdateAllProductCounts = function() {
                 //update the all products screen to reflect new counts:
                   // debugger;
                   var gridSelectedProducts = #{grdProducts};
                     for (s = 0; s < gridSelectedProducts.getRowsValues().length; s++) 
                        {
                            var gridAllProducts = #{grdAllProducts};
                         
                             for (a = 0; a < gridAllProducts.getRowsValues().length; a++) 
                                {
                                    if (gridAllProducts.getRowsValues()[a].ProductId == gridSelectedProducts.getRowsValues()[s].ProductId)
                                    {
                                        gridAllProducts.getRowsValues()[a].DamageCount = gridSelectedProducts.getRowsValues()[s].DamageCount;
                                        gridAllProducts.getRowsValues()[a].WrappedCount = gridSelectedProducts.getRowsValues()[s].WrappedCount;
                                    }
                                }                 
                        } 
                        
                      gridAllProducts.getView().refresh();
                         //end update the all products screen to reflect new counts
               }
              </script>
    </ext:XScript>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.ProductRunStore.DataSource = new object[]
                {
                    new object[] { "3m Co", 71.72, 0.02},
                    new object[] { "Verizon Communications", 35.57, 0.39},
                    new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.72 }
                };
    
                this.ProductRunStore.DataBind();
    
                this.StoreAllProducts.DataSource = new object[]
                {
                    new object[] { "3m Co", 71.72, 0.02},
                    new object[] { "Verizon Communications", 35.57, 0.39},
                    new object[] { "American Express Company", 52.55, 0.01},
                    new object[] { "American International Group, Inc.", 64.13, 0.31},
                    new object[] { "AT&T Inc.", 31.61, -0.48},
                    new object[] { "Boeing Co.", 75.43, 0.53},
                    new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.72 }
                };
                this.StoreAllProducts.DataBind();
            }
        }
    </script>
    <!DOCTYPE html>
    <html>
    <head id="Head1" runat="server">
        <title>FormPanel - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" type="text/css" />
       
    </head>
    <body>
        <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:FormPanel ID="FormPanel1" runat="server" Title="Company data" Width="800" BodyPadding="5"
            Layout="ColumnLayout">
            <FieldDefaults LabelAlign="Left" MsgTarget="Side" />
            <Items>
                <ext:Container ID="Container1" runat="server" Layout="FitLayout">
                    <Items>
                        <ext:GridPanel ID="grdProducts" runat="server" Title="Products" StyleSpec="padding-left:5px;padding-bottom:5px;"
                            Icon="PackageGreen" Region="Center" Frame="true" Height="190" Width="500" ButtonAlign="Center">
                            <TopBar>
                                <ext:Toolbar ID="Toolbar1" runat="server">
                                    <Items>
                                        <ext:Button ID="Button1" runat="server" Icon="Add" Text="Add Products" OnClientClick="#{WindowProducts}.show();return false;"
                                            ToolTip="Shows a list of ALL Products related to the Dough selected" />
                                    </Items>
                                </ext:Toolbar>
                            </TopBar>
                            <Store>
                                <ext:Store ID="ProductRunStore" runat="server" AutoLoad="true" AutoDataBind="false">
                                    <Model>
                                        <ext:Model ID="Model1" runat="server" Name="Products" IDProperty="ProductId">
                                            <Fields>
                                                <ext:ModelField Name="UPCCode" Type="String" />
                                                <ext:ModelField Name="DamageCount" Type="Float" />
                                                <ext:ModelField Name="WrappedCount" Type="Float" />
                                                <ext:ModelField Name="ProductId" Type="Int" />
                                                <ext:ModelField Name="ProductName" Type="String" />
                                                <ext:ModelField Name="ProductDisplay" Type="String" />
                                                <ext:ModelField Name="ProductOracleCode" Type="Int" />
                                            </Fields>
                                        </ext:Model>
                                    </Model>
                                </ext:Store>
                            </Store>
                            <ColumnModel ID="ColumnModel1" runat="server">
                                <Columns>
                                    <ext:Column ID="Column1" runat="server" Header="Product - UPC" DataIndex="UPCCode"
                                        Flex="1" />
                                    <ext:Column ID="Column2" runat="server" Header="Damaged Units" DataIndex="DamageCount"
                                        Align="Center" Width="82">
                                        <Editor>
                                            <ext:NumberField ID="NumberField1" runat="server" AllowBlank="false" Editable="true"
                                                HideTrigger="true">
                                            </ext:NumberField>
                                        </Editor>
                                        <EditorOptions>
                                            <Listeners>
                                                <BeforeStateSave Fn="UpdateAllProductCounts">
                                                </BeforeStateSave>
                                            </Listeners>
                                        </EditorOptions>
                                    </ext:Column>
                                    <ext:Column ID="Column3" runat="server" Header="Wrapped Units" DataIndex="WrappedCount"
                                        Align="Center" Width="82">
                                        <Editor>
                                            <ext:NumberField ID="NumberField2" runat="server" AllowBlank="false" Editable="true"
                                                HideTrigger="true" />
                                        </Editor>
                                        <EditorOptions>
                                            <Listeners>
                                                <Complete Fn="UpdateAllProductCounts">
                                                </Complete>
                                            </Listeners>
                                        </EditorOptions>
                                    </ext:Column>
                                </Columns>
                            </ColumnModel>
                            <SelectionModel>
                                <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="false" />
                            </SelectionModel>
                            <Plugins>
                                <ext:CellEditing ID="CellEditing1" runat="server" ClicksToEdit="1" />
                            </Plugins>
                            <View>
                                <ext:GridView ID="GridView1" runat="server" StripeRows="true" TrackOver="true" />
                            </View>
                        </ext:GridPanel>
                    </Items>
                </ext:Container>
            </Items>
        </ext:FormPanel>
        <%-- Window Products --%>
        <ext:Window ID="WindowProducts" runat="server" Title="All Products for selected Dough"
            Icon="BasketEdit" Height="260" Width="500" BodyStyle="background-color: #fff;"
            BodyPadding="5" Modal="true" Hidden="true">
            <Content>
                <ext:GridPanel ID="grdAllProducts" runat="server" Title="Products <font size='1' face='tahoma,arial,helvetica,sans-serif;'>(Click on the cell for units to be edited)</font> "
                    Icon="PackageGreen" Region="Center" Frame="true" Height="198" Width="478" ButtonAlign="Center"
                    Padding="10">
                    <Store>
                        <ext:Store ID="StoreAllProducts" runat="server">
                            <Parameters>
                                <ext:StoreParameter Name="runID" Value="#{hfRunId}.getValue()" Mode="Raw" />
                                <ext:StoreParameter Name="doughID" Value="#{cbDoughName}.getValue()" Mode="Raw" />
                            </Parameters>
                            <Model>
                                <ext:Model ID="Model2" runat="server" IDProperty="ProductId">
                                    <Fields>
                                        <ext:ModelField Name="UPCCode" Type="String" />
                                        <ext:ModelField Name="DamageCount" Type="Float" />
                                        <ext:ModelField Name="WrappedCount" Type="Float" />
                                        <ext:ModelField Name="ProductId" Type="Int" />
                                        <ext:ModelField Name="ProductName" Type="String" />
                                        <ext:ModelField Name="ProductDisplay" Type="String" />
                                        <ext:ModelField Name="ProductOracleCode" Type="Int" />
                                    </Fields>
                                </ext:Model>
                            </Model>
                        </ext:Store>
                    </Store>
                    <ColumnModel ID="ColumnModel2" runat="server">
                        <Columns>
                            <ext:Column ID="Column4" runat="server" Hidden="true" DataIndex="UPCCode" />
                            <ext:Column ID="Column5" runat="server" Hidden="true" DataIndex="DamageCount" />
                            <ext:Column ID="Column6" runat="server" Hidden="true" DataIndex="WrappedCount" />
                            <ext:Column ID="Column7" runat="server" Header="Product ID" DataIndex="ProductOracleCode" />
                            <ext:Column ID="Column8" runat="server" Header="Product - UPC" DataIndex="UPCCode"
                                Flex="1" />
                            <ext:Column ID="Column9" runat="server" Header="Damaged Units" DataIndex="DamageCount"
                                Align="Center" Width="82">
                                <Editor>
                                    <ext:NumberField ID="NumberField3" runat="server" HideTrigger="true" AllowBlank="false"
                                        MaxLength="6" AllowDecimals="false" />
                                </Editor>
                            </ext:Column>
                            <ext:Column ID="Column10" runat="server" Header="Wrapped Units" DataIndex="WrappedCount"
                                Align="Center" Width="82">
                                <Editor>
                                    <ext:NumberField ID="NumberField4" runat="server" HideTrigger="true" AllowBlank="false"
                                        MaxLength="6" AllowDecimals="false" />
                                </Editor>
                            </ext:Column>
                        </Columns>
                    </ColumnModel>
                    <View>
                        <ext:GridView ID="GridView2" runat="server" StripeRows="true" TrackOver="true" />
                    </View>
                </ext:GridPanel>
            </Content>
        </ext:Window>
        </form>
    </body>
    </html>
    Last edited by Daniil; Jul 24, 2012 at 8:51 AM. Reason: [CLOSED]
  2. #2
    Hi,

    I think the BeforeStateSave event is not that you need. Here are more details about that event.
    http://docs.sencha.com/ext-js/4-1/#!...eforestatesave

    So, the BeforeStateSave is just not fired.

    Please use the CellEditing Edit event.
    http://docs.sencha.com/ext-js/4-1/#!...ing-event-edit

    Another issue is the fact that you match the records comparing its ProductId, but you don't bind any ProductIds, so, they are all undefined.

    You bind this object:
    new object[] { "3m Co", 71.72, 0.02}
    to this Model:
    <ext:Model 
        ID="Model1" 
        runat="server" 
        Name="Products" 
        IDProperty="ProductId">
        <Fields>
            <ext:ModelField Name="UPCCode" Type="String" />
            <ext:ModelField Name="DamageCount" Type="Float" />
            <ext:ModelField Name="WrappedCount" Type="Float" />
            <ext:ModelField Name="ProductId" Type="Int" />
            <ext:ModelField Name="ProductName" Type="String" />
            <ext:ModelField Name="ProductDisplay" Type="String" />
            <ext:ModelField Name="ProductOracleCode" Type="Int" />
        </Fields>
    </ext:Model>
    So, just three first ModelFields - UPCCode, DamageCount, WrappedCount - are populated.
  3. #3
    Hi,
    I modified my code to incorporate your suggestions but it is still not updating the "grdAllProducts" GridPanel control.
    I created the "edit" js function in attempt to update grdAllProducts once a cell value is changed in the grdProducts grid.
    I am able to capture the new value in the "edit" js function but the cell values are not being updated in "grdAlProducts". You can see the grdAllProducts
    by clicking on the "+" sign on the right corner of the popup window.

    Can you please show me what am I doing wrong?
    Below is my new code:
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" TagPrefix="ext" Namespace="Ext.Net" %>
    <script runat="server">   
     
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                ProductRunStore.DataSource = GetData1();
                ProductRunStore.DataBind();
    
                Store1.DataSource = GetData2();
                Store1.DataBind();
            }
        }
    
        private object GetData1()
        {
            var data = new object[]
                {
                    new object[] {1, 122},
                    new object[] {2, 526},
                    new object[] {3, 983}
                };
            return data;
        }
    
        private object GetData2()
        {
            var data = new object[]
                {
                    new object[] {1, 122},
                    new object[] {2, 526},
                    new object[] {3, 983}
                };
            return data;
        }
             
    </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>
        <title>Example of Issue </title>
        <ext:XScript ID="XScript1" runat="server">
        <script language="javascript" type="text/javascript">
    
            var edit = function (editor, e) {
            
                if (e.value !== e.originalValue) 
                {
                  var gridAllProducts =  #{grdAllProducts};
                  for (a = 0; a < gridAllProducts.getRowsValues().length; a++) 
                                {
                                    if (gridAllProducts.getRowsValues()[a].ProductId == e.record.data.ProductId)
                                    {
                                        switch(e.field)
                                        {
                                            case "DamageCount":
                                                gridAllProducts.getRowsValues()[a].DamageCount = e.record.data.DamageCount;
                                                break;
                                            default:
                                            break;
                                        }
                                    }
                                }      
                    gridAllProducts.getView().refresh();                
                 }   
            }
    
        </script>
    
        </ext:XScript>
    </head>
    <body>
        <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <br />
        <ext:GridPanel ID="grdProducts" runat="server" Title="Products" StyleSpec="padding-left:5px;padding-bottom:5px;"
            Icon="PackageGreen" Region="Center" Frame="true" Height="150" Width="200" ButtonAlign="Center">
            <Tools>
                <ext:Tool Type="Plus" ToolTipType="Qtip">
                    <TooltipConfig Text="Add Products" />
                    <Listeners>
                        <Click Handler="#{WindowProducts}.show();return false;" />
                    </Listeners>
                </ext:Tool>
            </Tools>
            <Store>
                <ext:Store ID="ProductRunStore" runat="server" AutoLoad="true" AutoDataBind="false">
                    <Model>
                        <ext:Model ID="Model1" runat="server" Name="Products" IDProperty="ProductId">
                            <Fields>
                                <ext:ModelField Name="ProductId" Type="Int" />
                                <ext:ModelField Name="DamageCount" Type="Int" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel ID="ColumnModel1" runat="server">
                <Columns>
                    <ext:Column ID="Column1" runat="server" Hidden="true" DataIndex="ProductId" />
                    <ext:Column ID="Column2" runat="server" Header="Damaged Units" DataIndex="DamageCount"
                        Align="Center" Width="82">
                        <Editor>
                            <ext:NumberField ID="NumberField3" runat="server" HideTrigger="true" AllowBlank="false"
                                MaxLength="6" AllowDecimals="false" />
                        </Editor>
                    </ext:Column>
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:CellSelectionModel ID="CellSelectionModel2" runat="server" SingleSelect="false" />
            </SelectionModel>
            <Plugins>
                <ext:CellEditing ID="CellEditing2" runat="server" ClicksToEdit="1">
                    <Listeners>
                        <Edit Fn="edit" />
                    </Listeners>
                </ext:CellEditing>
            </Plugins>
            <View>
                <ext:GridView ID="GridView1" runat="server" StripeRows="true" TrackOver="true" />
            </View>
        </ext:GridPanel>
        <%-- Window --%>
        <ext:Window ID="WindowProducts" runat="server" Title="All Products for selected Dough"
            Icon="BasketEdit" BodyStyle="background-color: #fff;" Height="200" Width="400"
            BodyPadding="5" Modal="true" Hidden="true">
            <Content>
                <ext:GridPanel ID="grdAllProducts" runat="server"
                    Icon="PackageGreen" Region="Center" Frame="true" Height="200" Width="400" ButtonAlign="Center"
                    Padding="10">
                    <Store>
                        <ext:Store ID="Store1" runat="server" AutoLoad="true" AutoDataBind="false">
                            <Model>
                                <ext:Model ID="Model2" runat="server" IDProperty="ProductId">
                                    <Fields>
                                        <ext:ModelField Name="ProductId" Type="Int" />
                                        <ext:ModelField Name="DamageCount" Type="Int" />
                                    </Fields>
                                </ext:Model>
                            </Model>
                        </ext:Store>
                    </Store>
                    <ColumnModel ID="ColumnModel2" runat="server">
                        <Columns>
                            <ext:Column ID="Column10" runat="server" Hidden="true" DataIndex="ProductId" />
                            <ext:Column ID="Column6" runat="server" Header="Damaged Units" DataIndex="DamageCount"
                                Align="Center" Width="82" />
                         
                      
                        </Columns>
                    </ColumnModel>
                    <SelectionModel>
                        <ext:CellSelectionModel ID="CellSelectionModel1" runat="server" SingleSelect="false" />
                    </SelectionModel>
                    <Plugins>
                        <ext:CellEditing ID="CellEditing1" runat="server" ClicksToEdit="1">
                            <Listeners>
                                <Edit Fn="edit" />
                            </Listeners>
                        </ext:CellEditing>
                    </Plugins>
                    <View>
                        <ext:GridView ID="GridView2" runat="server" StripeRows="true" TrackOver="true" />
                    </View>
                </ext:GridPanel>
            </Content>
        </ext:Window>
        </form>
    </body>
    </html>

    Quote Originally Posted by Daniil View Post
    Hi,

    I think the BeforeStateSave event is not that you need. Here are more details about that event.
    http://docs.sencha.com/ext-js/4-1/#!...eforestatesave

    So, the BeforeStateSave is just not fired.

    Please use the CellEditing Edit event.
    http://docs.sencha.com/ext-js/4-1/#!...ing-event-edit

    Another issue is the fact that you match the records comparing its ProductId, but you don't bind any ProductIds, so, they are all undefined.

    You bind this object:
    new object[] { "3m Co", 71.72, 0.02}
    to this Model:
    <ext:Model 
        ID="Model1" 
        runat="server" 
        Name="Products" 
        IDProperty="ProductId">
        <Fields>
            <ext:ModelField Name="UPCCode" Type="String" />
            <ext:ModelField Name="DamageCount" Type="Float" />
            <ext:ModelField Name="WrappedCount" Type="Float" />
            <ext:ModelField Name="ProductId" Type="Int" />
            <ext:ModelField Name="ProductName" Type="String" />
            <ext:ModelField Name="ProductDisplay" Type="String" />
            <ext:ModelField Name="ProductOracleCode" Type="Int" />
        </Fields>
    </ext:Model>
    So, just three first ModelFields - UPCCode, DamageCount, WrappedCount - are populated.
  4. #4
    You can find a record just by its id since you have set up the same IDProperty for the Models.

    Here is a working function.

    Example
    var edit = function (editingPlugin, e) {
        var destinationGrid = #{grdAllProducts},
            record;
    
        if (e.value !== e.originalValue) {
            record = destinationGrid.getStore().getById(e.record.getId());
            record.set(e.field, e.value);
        }
    };
  5. #5
    Thanks for all your help!!

    Quote Originally Posted by Daniil View Post
    You can find a record just by its id since you have set up the same IDProperty for the Models.

    Here is a working function.

    Example
    var edit = function (editingPlugin, e) {
        var destinationGrid = #{grdAllProducts},
            record;
    
        if (e.value !== e.originalValue) {
            record = destinationGrid.getStore().getById(e.record.getId());
            record.set(e.field, e.value);
        }
    };

Similar Threads

  1. [CLOSED] GridPanel Cell Tooltip is not working
    By supera in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Dec 27, 2017, 11:47 AM
  2. Grid Cell CSS Override not working in 2.0??
    By Tbaseflug in forum 2.x Help
    Replies: 0
    Last Post: May 17, 2012, 7:39 PM
  3. Replies: 4
    Last Post: Apr 28, 2011, 2:28 AM
  4. [CLOSED] Updating grid row values
    By Pablo_Azevedo in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Sep 24, 2010, 1:31 PM
  5. Example: Updating a Grid Cell programatically
    By Juls in forum Examples and Extras
    Replies: 1
    Last Post: Apr 08, 2009, 1:44 PM

Posting Permissions