[CLOSED] Editing cell of gridPanel

  1. #1

    [CLOSED] Editing cell of gridPanel

    Hi

    I try follow the exemple http://examples2.ext.net/#/GridPanel..._DirectMethod/...

    If I double-click in cell of gridPanel, it works...
    If I press the ENTER key, a error occurs...

    Attachment 3763

    I have a listener in gridPanel
    <Listeners>
       <Render Handler="this.on('keydown', startEditing);" />
    </Listeners>
    and in the gridview (exactly as shown in the example http://examples2.ext.net/#/GridPanel..._DirectMethod/)
    <View>
       <ext:GridView ID="GridView1" runat="server">
           <Listeners>
                 <Render Handler="this.el.on('keydown', startEditing);" />
            </Listeners>
      </ext:GridView>
    </View>
    JavaScript codes to events is these:

    var startEditing = function (e) {
            if (e.getKey() === e.ENTER) {
                var grid = <%=grdCotacoesItemsSGCO.ClientID%>,
                    record = grid.getSelectionModel().getSelection()[0],
                    column = grid.columns[1];
                    <%=CellEditing1.ClientID%>.startEdit(record, column); //[0] é linha, [1] é coluna
            }
        };
    The only thing that might be different from the example is SelectionModel
    <SelectionModel>
         <ext:CellSelectionModel ID="csmCotacoesItemsSGCO" runat="server" Mode="Single" />
    </SelectionModel>
    And the Editor tag:

    <Editor>
         <ext:TextField ID="TextField2" runat="server" SelectOnFocus="true" />
    </Editor>
    any help? I'm forgetting something?

    Follow the entire code for ascx (usercontrol)...

    <%@ Control Language="vb" AutoEventWireup="false" CodeBehind="Cotacoes_Fornecedores_Confirma.ascx.vb" Inherits="SuperaWeb.Cotacoes_Fornecedores_Confirma" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <%--<%@ Register src="~/App/Tools/DataSearch.ascx" tagname="DataSearch" tagprefix="superaWebControl" %>--%>
    
    <script runat="server">
        
        Protected Sub ConfirmaCotacao(sender As Object, evt As Ext.Net.DirectEventArgs)
            If ValidaCampoCondicoes() Then
                Dim jsonValues As String = evt.ExtraParams("values")
                Dim records As ArrayList = SuperaWeb.Library.JSon.Deserializer(jsonValues)
                Dim record As Hashtable
            
                For Each record In records
                    Me.Confirm(Convert.ToInt64(record("IDCotacaoItem")), Convert.ToDecimal(SuperaWeb.Library.General.setDecimalSeparatorToComma(record("ValorUnitario"))), Convert.ToDecimal(SuperaWeb.Library.General.setDecimalSeparatorToComma(record("Desconto"))))
                Next
                
                If SaveCondicoes() Then
                    Me.CloseWindow()
                End If
            End If
        End Sub
        
        Protected Function ValidaCampoCondicoes() As Boolean
            Dim msg As Ext.Net.MessageBox
            Dim msgConf As Ext.Net.MessageBoxConfig
            
            If txtCondicoesFormaPagamento.Text = "" Then
                msg = New Ext.Net.MessageBox()
                msgConf = New Ext.Net.MessageBoxConfig
                msgConf.Icon = MessageBox.Icon.WARNING
                msgConf.Buttons = MessageBox.Button.OK
                msgConf.Title = "CAMPO REQUERIDO!"
                msgConf.Message = "o campo 'Condições de Pagamento' é um campo de informação obrigatória!<br>Informe um valor para o campo."
                msg.Show(msgConf)
                Return False
            End If
            
            If txtCondicoesPrazoEntrega.Text = "" Then
                msg = New Ext.Net.MessageBox()
                msgConf = New Ext.Net.MessageBoxConfig
                msgConf.Icon = MessageBox.Icon.WARNING
                msgConf.Buttons = MessageBox.Button.OK
                msgConf.Title = "CAMPO REQUERIDO!"
                msgConf.Message = "o campo 'Prazo de entrega' é um campo de informação obrigatória!<br>Informe um valor para o campo."
                msg.Show(msgConf)
                Return False
            End If
            
            If txtCondicoesValidadeProposta.Text = "" Then
                msg = New Ext.Net.MessageBox()
                msgConf = New Ext.Net.MessageBoxConfig
                msgConf.Icon = MessageBox.Icon.WARNING
                msgConf.Buttons = MessageBox.Button.OK
                msgConf.Title = "CAMPO REQUERIDO!"
                msgConf.Message = "o campo 'Validade da proposta' é um campo de informação obrigatória!<br>Informe um valor para o campo."
                msg.Show(msgConf)
                Return False
            End If
            
            If txtCondicoesValorFrete.Text = "" Then
                msg = New Ext.Net.MessageBox()
                msgConf = New Ext.Net.MessageBoxConfig
                msgConf.Icon = MessageBox.Icon.WARNING
                msgConf.Buttons = MessageBox.Button.OK
                msgConf.Title = "CAMPO REQUERIDO!"
                msgConf.Message = "o campo 'Valor do frete' é um campo de informação obrigatória!<br>Informe um valor para o campo."
                msg.Show(msgConf)
                Return False
            End If
            
            If Not IsNumeric(txtCondicoesValorFrete.Text) Then
                msg = New Ext.Net.MessageBox()
                msgConf = New Ext.Net.MessageBoxConfig
                msgConf.Icon = MessageBox.Icon.WARNING
                msgConf.Buttons = MessageBox.Button.OK
                msgConf.Title = "CAMPO REQUERIDO!"
                msgConf.Message = "o campo 'Valor do frete' necessita de um valor número válido!<br>Informe um valor númerico válido para o campo."
                msg.Show(msgConf)
                Return False
            End If
            Return True
        End Function
        
        Protected Sub Cancel_Click(sender As Object, evt As Ext.Net.DirectEventArgs)
            Me.CloseWindow(True)
        End Sub
       
    </script>
    
    <script type="text/javascript" >
        
        function getCotacoesItemsSGCOFilter() {
            var sFilter = "SuperaWeb=1";
            sFilter = "IDCotacao = " + <%=txtIDCotacao.ClientID%>.getValue() + " And IDFornecedor = " + <%=txtIDFornecedor.ClientID%>.getValue();
            return sFilter;
        }
    
        var valorTotalColumnRender = function (v, p, record, rowIndex) {
            var recordAux = <%=grdCotacoesItemsSGCO.ClientID%>.store.getAt(rowIndex);
            return Format_brMoney(recordAux.get('ValorUnitarioOriginal') * recordAux.get('Quantidade'));
        };
            
        var startEditing = function (e) {
            if (e.getKey() === e.ENTER) {
                var grid = <%=grdCotacoesItemsSGCO.ClientID%>,
                    record = grid.getSelectionModel().getSelection()[0],
                    column = grid.columns[1];
                    <%=CellEditing1.ClientID%>.startEdit(record, column); //[0] é linha, [1] é coluna
            }
        };
    
        var afterEdit = function (editor, e) {
            /*
            Properties of 'e' include:
                e.grid - This grid
                e.record - The record being edited
                e.field - The field name being edited
                e.value - The value being set
                e.originalValue - The original value for the field, before the edit.
                e.row - The grid row index
                e.column - The grid column index
            */
                
            // Call DirectMethod
            //CompanyX.AfterEdit(e.record.data.ID, e.field, e.originalValue, e.value, e.record.data);
        };
        
      function getRecords(v) {
            //o objetivo desta função é pegar o Records do grid, porém convertendo os campos Quantidade, ValorUnitario, ValorUnitarioOriginal e Desconto, que estão formatados com , (vírgula)
            //e precisam ser formatados com ., senão eles vão dar erro na hora de deserializar com o Json, pois, no Json, virgula é separador de campo.
        
            for (i = 0; i < v.length; i++) {
                v[i]['Quantidade'] = setDecimalSeparatorToDot(v[i]['Quantidade']); //quantidade
                v[i]['ValorUnitarioOriginal'] = setDecimalSeparatorToDot(v[i]['ValorUnitarioOriginal']); //valor unitário original
                v[i]['ValorUnitario'] = setDecimalSeparatorToDot(v[i]['ValorUnitario']); //valor unitário
                v[i]['Desconto'] = setDecimalSeparatorToDot(v[i]['Desconto']); //desconto
            }
            return v;
        }
    
        var KeyUpHandler_ValorFrete = function (f, e) {
            formatMoney(f, e);
            return false;
        };
    
    </script>
    
    <ext:Window 
        ID="wndCotacoesEmpresaConfirma" 
        runat="server"
        Icon="MoneyAdd"
        Title="Cotação WEB"
        Width="1000" 
        Height="600"
        AutoShow="false" 
        Modal="true" 
        Resizable="false"
        PaddingSummary="5px 5px 5px 5px"
        Hidden="true"
        ButtonAlign="Right"
        Layout="FitLayout">
        <Items>
            <ext:Panel ID="Panel1" runat="server" Border="true" BodyPadding="3" Layout="AbsoluteLayout" Header="false">
                <Items>
                    <ext:Panel runat="server" ID="panelCabecalho" Layout="AbsoluteLayout" Border="false" Header="false" X="5" Y="5" Height="75px">
                        <Items>
                            <ext:Image runat="server" ID="imgLogo" X="20" Y="5" Width="55" Height="60"  StyleSpec="border: 0px solid #99ccff" ImageUrl="~/dbproperties/logo.jpg" />
                            <ext:DisplayField runat="server" ID="txtRelatorioCabecalho" X="90" Y="10" Width="500" text="" />
                        </Items>
                    </ext:Panel>
                    <ext:FieldSet runat="server" ID="fsSolicitacao" Title="Solicitação de Cotação de Preços" Layout="AbsoluteLayout" X="10" Y="85" Height="85px" Width="470px">
                        <Items>
                            <ext:Label runat="server" ID="lblCotacaoRequisicaoNumero" Text="Requisição" X="5" Y="10" Width="70px" />
                            <ext:Label runat="server" ID="lblCotacaoDescricao" Text="Descrição" X="200" Y="10" Width="70px" />
                            <ext:Label runat="server" ID="lblCotacaoIDObra_Nome" Text="Obra" X="5" Y="25" Width="70px" />
                            <ext:Label runat="server" ID="lblCotacaoIDUsuarioResponsavel_Nome" Text="Responsável" X="5" Y="40" Width="70px" />
                            <ext:Label runat="server" ID="lblCotacaoIDUsuarioResponsavel_Email" Text="E-mail" X="200" Y="40" Width="70px" />
                            <ext:DisplayField runat="server" ID="txtCotacaoRequisicaoNumero" X="75" Y="10" Width="150px" text="" />
                            <ext:DisplayField runat="server" ID="txtCotacaoDescricao" X="260" Y="10" Width="350px" text="" />
                            <ext:DisplayField runat="server" ID="txtCotacaoIDObra_Nome" X="75" Y="25" Width="150px" text="" />
                            <ext:DisplayField runat="server" ID="txtCotacaoIDUsuarioResponsavel_Nome" X="75" Y="40" Width="150px" text="" />
                            <ext:DisplayField runat="server" ID="txtCotacaoIDUsuarioResponsavel_Email" X="260" Y="40" Width="150px" text="" />
                        </Items>
                    </ext:FieldSet>
                    <ext:FieldSet runat="server" ID="fsFornecedor" Title="Confirmação do Fornecedor" Layout="AbsoluteLayout" X="490" Y="85" Height="85px" Width="470px">
                        <Items>
                            <ext:Label runat="server" ID="lblFornecedorNome" Text="Fornecedor" X="5" Y="10" Width="70px" />
                            <ext:Label runat="server" ID="lblFornecedorTelefone" Text="Telefone" X="5" Y="25" Width="70px" />
                            <ext:Label runat="server" ID="lblFornecedorContato" Text="Contato" X="5" Y="40" Width="70px" />
                            <ext:Label runat="server" ID="lblFornecedorEmail" Text="E-mail" X="200" Y="40" Width="70px" />
                            <ext:DisplayField runat="server" ID="dsFornecedorNome" X="67" Y="10" Width="150px" text="" />
                            <ext:DisplayField runat="server" ID="dsFornecedorTelefone" X="67" Y="25" Width="150px" text="" />
                            <ext:DisplayField runat="server" ID="dsFornecedorContato" X="67" Y="40" Width="150px" text="" />
                            <ext:DisplayField runat="server" ID="dsFornecedorEmail" X="240" Y="40" Width="150px" text="" />
                        </Items>
                    </ext:FieldSet>
                    <ext:Panel runat="server" ID="panelGrid" Layout="FitLayout" BodyPadding="5" X="10" Y="175" Width="950" Height="200px" BodyStyle="background-color: #F9F9F9">
                        <Items>
                        <ext:GridPanel runat="server" ID="grdCotacoesItemsSGCO" Frame="true" Height="300px" ButtonAlign="Left">
                                <Store>
                                    <ext:Store ID="Store1" runat="server" RemoteSort="true">
                                        <Proxy>
                                            <ext:AjaxProxy Json="true" Url="~/App/JSonDataPaging.asmx/CotacoesItemsSGCO_Paging">
                                                <ActionMethods Read="POST" />
                                                <Reader>
                                                    <ext:JsonReader Root="d.Data" TotalProperty="d.TotalRecords" />
                                                </Reader>
                                            </ext:AjaxProxy>
                                        </Proxy>
                                        <AutoLoadParams>
                                            <ext:Parameter Name="start" Value="0" Mode="Raw" />
                                            <ext:Parameter Name="limit" Value="9999" Mode="Raw" />
                                        </AutoLoadParams>
                                        <Parameters>
                                            <ext:StoreParameter Name="filter" Value="getCotacoesItemsSGCOFilter()" Mode="Raw" />
                                        </Parameters>
                                        <Model>
                                            <ext:Model runat="server" IDProperty="IDCotacaoItem" >
                                                <Fields>
                                                    <ext:ModelField  Name="IDCotacaoItem" />
                                                    <ext:ModelField  Name="IDCotacao" />
                                                    <ext:ModelField  Name="IDInsumo" />
                                                    <ext:ModelField  Name="IDInsumo_Descricao" />
                                                    <ext:ModelField  Name="IDInsumo_Unidade" />
                                                    <ext:ModelField  Name="IDFornecedor" />
                                                    <ext:ModelField  Name="Quantidade" Type="Float" />
                                                    <ext:ModelField  Name="ValorUnitario" Type="Float" />
                                                    <ext:ModelField  Name="Desconto" Type="Float" />
                                                    <ext:ModelField  Name="ValorUnitarioOriginal" Type="Float" />
                                                    <ext:ModelField  Name="DataEntrega" Type="Date" DateFormat="M$" />
                                                </Fields>
                                            </ext:Model>
                                        </Model>
                                        <Sorters>
                                            <ext:DataSorter Property="IDCotacaoItem" Direction="ASC" />
                                        </Sorters>
                                    </ext:Store>
                                </Store>
                                <ColumnModel ID="ColumnModel1" runat="server">
                                    <Columns>
                                        <ext:Column runat="server" Text="Descrição" DataIndex="IDInsumo_Descricao" Width="330px"  Sortable="true"  />
                                        <ext:Column runat="server" Text="Unidade" DataIndex="IDInsumo_Unidade" Width="110px"  Sortable="true"  />
                                        <ext:Column runat="server" Text="Quantidade" DataIndex="Quantidade" Width="90px"  Sortable="true" Align="Right">
                                            <Renderer Fn="Format_brFloat" />
                                        </ext:Column>
                                        <ext:Column runat="server" Text="Valor unitário" DataIndex="ValorUnitarioOriginal" Width="90px"  Sortable="true" Align="Right">
                                            <Renderer Fn="Format_brMoney"  />
                                        </ext:Column>
                                        <ext:Column runat="server" Text="Valor total" DataIndex="" Width="90px"  Sortable="true"  Align="Right" >
                                            <Renderer Fn="valorTotalColumnRender"  />
                                        </ext:Column>
                                        <ext:Column runat="server" Text="Valor confirmado" DataIndex="ValorUnitario" Width="110px"  Sortable="true" Align="Right">
                                            <Renderer Fn="Format_brMoney"  />
                                            <Editor>
                                                <ext:TextField ID="TextField1" runat="server" SelectOnFocus="true"/>
                                            </Editor>
                                        </ext:Column>
                                        <ext:Column runat="server" Text="Desconto" DataIndex="Desconto" Width="80px" Sortable="true" Align="Right" >
                                            <Renderer Fn="Format_brMoney"  />
                                            <Editor>
                                                <ext:TextField ID="TextField2" runat="server" SelectOnFocus="true" />
                                            </Editor>
                                        </ext:Column>
                                    </Columns>
                                </ColumnModel>
                                <Listeners>
                                    <Render Handler="this.on('keydown', startEditing);" />
                                </Listeners>
                                <SelectionModel>
                                    <ext:CellSelectionModel ID="csmCotacoesItemsSGCO" runat="server" Mode="Single" />
                                </SelectionModel>
                                <View>
                                    <ext:GridView ID="GridView1" runat="server">
                                        <Listeners>
                                            <Render Handler="this.el.on('keydown', startEditing);" />
                                        </Listeners>
                                    </ext:GridView>
                                </View>
                                <Plugins>
                                    <ext:CellEditing ID="CellEditing1" runat="server">
                                        <Listeners>
                                            <Edit Fn="afterEdit" />
                                        </Listeners>
                                    </ext:CellEditing>
                                </Plugins>
                            </ext:GridPanel>
                        </Items>
                    </ext:Panel> 
                    <ext:FieldSet runat="server" ID="fsCondicoes" Title="Condições" Layout="AbsoluteLayout" X="10" Y="380" Height="140px" Width="470px">
                        <Items>
                            <ext:TextField runat="server" ID="txtCondicoesFormaPagamento" FieldLabel="Forma de pagamento" MaxLength="20" X="5" Y="5" LabelWidth="110" Width="210px" />
                            <ext:TextField runat="server" ID="txtCondicoesPrazoEntrega" FieldLabel="Prazo de entrega" MaxLength="20" X="5" Y="30" LabelWidth="110" Width="210px"  />
                            <ext:TextField runat="server" ID="txtCondicoesValidadeProposta" FieldLabel="Validade da proposta" MaxLength="20" X="225" Y="5" LabelWidth="110" Width="210px" />
                            <ext:TextField runat="server" ID="txtCondicoesValorFrete" FieldLabel="Valor do frete (R$)" MaxLength="20" X="225" Y="30" LabelWidth="110" Width="210px" EnableKeyEvents="true" StyleSpec="text-align:right" >
                                <Listeners>
                                    <KeyUp Fn="KeyUpHandler_ValorFrete" />
                                </Listeners>
                            </ext:TextField>
                            <ext:TextArea runat="server" ID="txtCondicoesObservacoes" LabelAlign="Top" FieldLabel="Observações do fornecedor" MaxLength="250" X="5" Y="60" Width="430px" Height="65px" />
                        </Items>
                    </ext:FieldSet>
                    <ext:FieldSet runat="server" ID="fsObservacoes" Title="Observações" Layout="AbsoluteLayout" X="490" Y="380" Height="140px" Width="470px">
                        <Items>
                            <ext:DisplayField runat="server" ID="dsCotacaoObservacoes" X="5" Y="10" Width="435px" Height="100px" StyleSpec="border:0px solid #99ccff"/>
                        </Items>
                    </ext:FieldSet>
                    <%--<ext:FieldSet runat="server" ID="fsEndereco" Title="Endereço" LabelAlign="Top" Layout="AbsoluteLayout" Height="115px" PaddingSummary="5px 5px 5px 5px">
                        <Items>
                            <ext:TextField runat="server" ID="txtUF" FieldLabel="UF" X="595" Y="50" Width="40px" />
                        </Items>
                    </ext:FieldSet>
                    <ext:FieldSet runat="server" ID="fsDocumentos" Title="Documentação" LabelAlign="Top" Layout="AbsoluteLayout" Height="70px" PaddingSummary="5px 5px 5px 5px">
                        <Items>
                            <ext:TextField runat="server" ID="txtCPF" FieldLabel="CPF" X="5" Y="5" Width="120px" />
                            <ext:TextField runat="server" ID="txtIdentidade" FieldLabel="Identidade" X="135" Y="5" Width="120px" />
                            <ext:DateField runat="server" ID="dtNascimento" FieldLabel="Data de Nascimento" X="265" Y="5" Width="120px" AltFormats="d/m/Y|j/n/Y|j/n/y|j/m/y|d/n/y|j/m/Y|d/m/Y|d-m-y|d-m-Y|d/m|d-m|dm|dmy|dmY|d|d-m-Y" Format="dd/MM/yyyy"/>
                        </Items>
                    </ext:FieldSet>--%>
                </Items>
            </ext:Panel>
        </Items>
        <Buttons>
            <ext:Button runat="server" id="btnOk" text="Ok" Width="80px" Icon="Tick">
                <DirectEvents>
                    <Click OnEvent="ConfirmaCotacao" Failure="Ext.MessageBox.alert('Saving failed', 'Error during ajax event');">
                        <EventMask ShowMask="true" Target="CustomTarget" CustomTarget="={#{wndCotacoesEmpresaConfirma}.body}" />
                        <ExtraParams>                    
                            <ext:Parameter Name="values" Value="Ext.encode(getRecords(#{grdCotacoesItemsSGCO}.getRowsValues()))" Mode="Raw" Encode="true" />
                        </ExtraParams>
                    </Click>
                </DirectEvents>
            </ext:Button>
            <ext:Button runat="server" id="btnCancel" text="Cancelar" Width="80px" Icon="Cancel">
                <DirectEvents>
                    <Click OnEvent="Cancel_Click" />
                </DirectEvents>
            </ext:Button>
        </Buttons>
    </ext:Window>
    <ext:Hidden runat="server" ID="txtIDEmpresa" Text="0" />
    <ext:Hidden runat="server" ID="txtIDCotacao" Text="0" />
    <ext:Hidden runat="server" ID="txtIDFornecedor" Text="0" />
    Last edited by Daniil; Jan 26, 2012 at 4:27 PM. Reason: [CLOSED]
  2. #2
    Hi,

    I'm getting the following errors when launching a user control you've posted.
    Error    1    'SuperaWeb' is not declared. It may be inaccessible due to its protection level.  
    Error    2    'Confirm' is not a member of 'ASP.testuc_ascx'.
    Error    5    'SaveCondicoes' is not declared. It may be inaccessible due to its protection level. 
    Error    6    'CloseWindow' is not a member of 'ASP.testuc_ascx'.
    Could you provide a runnable sample to reproduce the problem?
  3. #3
    Hi Daniil... Thanks for help...

    Sorry for the code posted above. It contains references to my own dlls and data access layers. I will take care of posting codes that run on their own, from now on.

    While I was doing a code to demonstrate my problem based on this example http://examples2.ext.net/#/GridPanel..._DirectMethod/, that the problem has resolved itself.

    startEditing javascript seems to be no longer needed.
    put it (startEditing) and references to it in comments and it worked the way I wanted.

    anyway, I'm posting the example prepared, but the problem is already solved. On our side, you can mark the thread as closed.

    <%@ Page Language="C#" %>
    
    <%@ Import Namespace="System.Collections.Generic" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        public class Company
        {
            public int ID { get; set; }
            public string Name { get; set; }
            public double Price { get; set; }
            public double Change { get; set; }
            public double PctChange { get; set; }
            public DateTime LastChange { get; set; }
        }
        
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.BindData();
            }
        }
    
        private void BindData()
        {
            this.GridPanel1.Store.Primary.DataSource = this.GetData();
            this.GridPanel1.Store.Primary.DataBind();
        }
    
        private List<Company> GetData()
        {
            return new List<Company> 
            {
                new Company { ID = 1, Name = "3m Co", Price = 71.72, Change = 0.02, PctChange = 0.03, LastChange = DateTime.Now },
                new Company { ID = 2, Name = "Alcoa Inc", Price = 29.01, Change = 0.42, PctChange = 1.47, LastChange = DateTime.Now },
                new Company { ID = 3, Name = "Altria Group Inc", Price = 83.81, Change = 0.28, PctChange = 0.34, LastChange = DateTime.Now },
                new Company { ID = 4, Name = "American Express Company", Price = 52.55, Change = 0.01, PctChange = 0.02, LastChange = DateTime.Now },
                new Company { ID = 5, Name = "American International Group, Inc.", Price = 64.13, Change = 0.31, PctChange = 0.49, LastChange = DateTime.Now },
                new Company { ID = 6, Name = "AT&T Inc.", Price = 31.61, Change = -0.48, PctChange = -1.54, LastChange = DateTime.Now },
                new Company { ID = 7, Name = "Boeing Co.", Price = 75.43, Change = 0.53, PctChange = 0.71, LastChange = DateTime.Now },
                new Company { ID = 8, Name = "Caterpillar Inc.", Price = 67.27, Change = 0.92, PctChange = 1.39, LastChange = DateTime.Now },
                new Company { ID = 9, Name = "Citigroup, Inc.", Price = 49.37, Change = 0.02, PctChange = 0.04, LastChange = DateTime.Now },
                new Company { ID = 10, Name = "E.I. du Pont de Nemours and Company", Price = 40.48, Change = 0.51, PctChange = 1.28, LastChange = DateTime.Now },
                new Company { ID = 11, Name = "Exxon Mobil Corp", Price = 68.1, Change = -0.43, PctChange = -0.64, LastChange = DateTime.Now },
                new Company { ID = 12, Name = "General Electric Company", Price = 34.14, Change = -0.08, PctChange = -0.23, LastChange = DateTime.Now },
                new Company { ID = 13, Name = "General Motors Corporation", Price = 30.27, Change = 1.09, PctChange = 3.74, LastChange = DateTime.Now },
                new Company { ID = 14, Name = "Hewlett-Packard Co.", Price = 36.53, Change = -0.03, PctChange = -0.08, LastChange = DateTime.Now },
                new Company { ID = 15, Name = "Honeywell Intl Inc", Price = 38.77, Change = 0.05, PctChange = 0.13, LastChange = DateTime.Now },
                new Company { ID = 16, Name = "Intel Corporation", Price = 19.88, Change = 0.31, PctChange = 1.58, LastChange = DateTime.Now },
                new Company { ID = 17, Name = "International Business Machines", Price = 81.41, Change = 0.44, PctChange = 0.54, LastChange = DateTime.Now },
                new Company { ID = 18, Name = "Johnson & Johnson", Price = 64.72, Change = 0.06, PctChange = 0.09, LastChange = DateTime.Now },
                new Company { ID = 19, Name = "JP Morgan & Chase & Co", Price = 45.73, Change = 0.07, PctChange = 0.15, LastChange = DateTime.Now },
                new Company { ID = 20, Name = "McDonald\"s Corporation", Price = 36.76, Change = 0.86, PctChange = 2.40, LastChange = DateTime.Now },
                new Company { ID = 21, Name = "Merck & Co., Inc.", Price = 40.96, Change = 0.41, PctChange = 1.01, LastChange = DateTime.Now },
                new Company { ID = 22, Name = "Microsoft Corporation", Price = 25.84, Change = 0.14, PctChange = 0.54, LastChange = DateTime.Now },
                new Company { ID = 23, Name = "Pfizer Inc", Price = 27.96, Change = 0.4, PctChange = 1.45, LastChange = DateTime.Now },
                new Company { ID = 24, Name = "The Coca-Cola Company", Price = 45.07, Change = 0.26, PctChange = 0.58, LastChange = DateTime.Now },
                new Company { ID = 25, Name = "The Home Depot, Inc.", Price = 34.64, Change = 0.35, PctChange = 1.02, LastChange = DateTime.Now },
                new Company { ID = 26, Name = "The Procter & Gamble Company", Price = 61.91, Change = 0.01, PctChange = 0.02, LastChange = DateTime.Now },
                new Company { ID = 27, Name = "United Technologies Corporation", Price = 63.26, Change = 0.55, PctChange = 0.88, LastChange = DateTime.Now },
                new Company { ID = 28, Name = "Verizon Communications", Price = 35.57, Change = 0.39, PctChange = 1.11, LastChange = DateTime.Now },
                new Company { ID = 29, Name = "Wal-Mart Stores, Inc.", Price = 45.45, Change = 0.73, PctChange = 1.63, LastChange = DateTime.Now }
            };
        }
    
        [DirectMethod(Namespace = "CompanyX")]
        public void AfterEdit(int id, string field, string oldValue, string newValue, object customer)
        {
            string message = "<b>Property:</b> {0}<br /><b>Field:</b> {1}<br /><b>Old Value:</b> {2}<br /><b>New Value:</b> {3}";
    
            // Send Message...
            X.Msg.Notify("Edit Record #" + id.ToString(), string.Format(message, id, field, oldValue, newValue)).Show();
    
            this.GridPanel1.GetStore().GetById(id).Commit();
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head id="Head1" runat="server">
        <title>Simple Array Grid - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" type="text/css" />    
    
        <script type="text/javascript">
            var template = '<span style="color:{0};">{1}</span>';
    
            var change = function (value) {
                return Ext.String.format(template, (value > 0) ? "green" : "red", value);
            };
    
            var pctChange = function (value) {
                return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
            };
    
    //        var startEditing = function (e) {
    //            if (e.getKey() === e.ENTER) {
    //                var grid = GridPanel1,
    //                    record = grid.getSelectionModel().getSelection()[0],
    //                    column = grid.columns[1];
    //                CellEditing1.startEdit(record, column);
    //            }
    //        };
    
            var afterEdit = function (editor, e) {
                /*
                Properties of 'e' include:
                e.grid - This grid
                e.record - The record being edited
                e.field - The field name being edited
                e.value - The value being set
                e.originalValue - The original value for the field, before the edit.
                e.row - The grid row index
                e.column - The grid column index
                */
    
                // Call DirectMethod
                if (e.value !== e.originalValue) {
                    CompanyX.AfterEdit(e.record.data.ID, e.field, e.originalValue, e.value, e.record.data);
                }
            };
        </script>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
        
            <h1>Editable GridPanel With Save To [DirectMethod]</h1>
        
            <ext:GridPanel 
                ID="GridPanel1"
                runat="server" 
                Title="Editable GridPanel"
                Width="600" 
                Height="350">
                <Store>
                    <ext:Store ID="Store1" runat="server">
                        <Model>
                            <ext:Model ID="Model1" runat="server" IDProperty="ID">
                                <Fields>
                                    <ext:ModelField Name="ID" Type="Int" />
                                    <ext:ModelField Name="Name" />
                                    <ext:ModelField Name="Price" Type="Float" />
                                    <ext:ModelField Name="Change" Type="Float" />
                                    <ext:ModelField Name="PctChange" Type="Float" />
                                    <ext:ModelField Name="LastChange" Type="Date" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
    <%--            <Listeners>
                    <Render Handler="this.on('keydown', startEditing);" />
                </Listeners>--%>
                <ColumnModel ID="ColumnModel1" runat="server">
                    <Columns>
                        <ext:Column ID="Column1" runat="server" Text="ID" DataIndex="ID" Width="35" />
                        <ext:Column ID="Column2" runat="server" Text="NAME" DataIndex="Name" Flex="1">
                            <Editor>
                                <ext:TextField ID="TextField1" runat="server" />
                            </Editor>
                        </ext:Column>
                        <ext:Column ID="Column3" runat="server" Text="Price" DataIndex="Price">
                            <Renderer Format="UsMoney" />
                            <Editor>
                                <ext:NumberField ID="NumberField1" runat="server" />
                            </Editor>
                        </ext:Column>
                        <ext:Column ID="Column4" runat="server" Text="Change" DataIndex="Change">
                            <Renderer Fn="change" />
                            <Editor>
                                <ext:NumberField ID="NumberField2" runat="server" />
                            </Editor>
                        </ext:Column>
                        <ext:Column ID="Column5" runat="server" Text="Change" DataIndex="PctChange">
                            <Renderer Fn="pctChange" />
                            <Editor>
                                <ext:NumberField ID="NumberField3" runat="server" />
                            </Editor>
                        </ext:Column>
                        <ext:DateColumn ID="DateColumn1" runat="server" Text="Last Updated" DataIndex="LastChange" Format="yyyy-MM-dd">
                            <Editor>
                                <ext:DateField ID="DateField1" runat="server" />
                            </Editor>
                        </ext:DateColumn>
                    </Columns>
                </ColumnModel>
                <SelectionModel>
                    <ext:CellSelectionModel ID="CellSelectionModel1" runat="server" Mode="Single" />
                </SelectionModel>
                <View>
                    <ext:GridView ID="GridView1" runat="server">
    <%--                    <Listeners>
                            <Render Handler="this.el.on('keydown', startEditing);" />
                        </Listeners>--%>
                    </ext:GridView>
                </View>
                <Plugins>
                    <ext:CellEditing ID="CellEditing1" runat="server">
                        <Listeners>
                            <Edit Fn="afterEdit" />
                        </Listeners>
                    </ext:CellEditing>
                </Plugins>
            </ext:GridPanel>  
         </form>
      </body>
    </html>
  4. #4
    <Render Handler="this.el.on('keydown', startEditing);" />
    This listener is needed to get a feature of starting editing of selected record on Enter key. If you don't need it, then, certainly, you can remove it:)

    Though we will leave this feature in our example.

    Just there was a bug regarding to the CHANGELOG item #90:
    http://examples2.ext.net/#/Getting_S...nts/CHANGELOG/
    and you've pointed it out, thanks for the report!
  5. #5
    I want the feature of start editing the cell press the enter key... but this feature is working without additional javascript code.

    I set de SelectionModel to CellSelectionModel...

    Thanks for your help, Daniil....
  6. #6
    Well, yes, you are right.

    I think we will replace RowSelectionModel with CellSelectionModel in that example.

    Done.
    Last edited by Daniil; Jan 26, 2012 at 5:57 PM.
  7. #7

    startEditing on 2.0

    Hi,
    I'm getting an error using method "startEditing" on Ext.NET 2.0.
    What should I use?
    M


    
                            <Commands>
                                <ext:GridCommand Icon="Bin" CommandName="Delete"  >
                                    <ToolTip Text="Elimina la riga" />
                                </ext:GridCommand>
                                <ext:CommandSeparator />
                                <ext:GridCommand Icon="Pencil" CommandName="Edit"   >
                                    <ToolTip Text="Modifca la riga" />
                                </ext:GridCommand>
                                <ext:CommandSeparator />
                                <ext:GridCommand Icon="NoteAdd" CommandName="AddNote">
                                    <ToolTip Text="Aggiungi una nota" />
                                </ext:GridCommand>
                            </Commands>
                            <Listeners>
                                <Command Handler="if (command === 'Edit') {
                                                      this.startEditing(recordIndex, 0);
                                                  }" />
                            </Listeners>
  8. #8
    Hi,

    You should call the startEdit method of the editing plugin that you use.

Similar Threads

  1. Replies: 4
    Last Post: Jul 10, 2012, 5:35 PM
  2. Replies: 1
    Last Post: Jul 10, 2012, 11:16 AM
  3. [CLOSED] GridPanel.start cell editing when key pressed
    By supera in forum 2.x Premium Help
    Replies: 10
    Last Post: Mar 01, 2012, 7:04 PM
  4. Replies: 0
    Last Post: Apr 14, 2011, 7:10 AM
  5. [CLOSED] ColumnTree cell editing
    By kenanhancer in forum 1.x Premium Help
    Replies: 2
    Last Post: Feb 04, 2011, 7:38 AM

Posting Permissions