[CLOSED] Enabled CellEdit with listener in button click

  1. #1

    [CLOSED] Enabled CellEdit with listener in button click

    Hi How Can I do to enable the columns with editor in Listener click of button and cancel edit whit other button.

            <ext:Button ID="Button1" runat="server" Text="Editor Enable">
                <Listeners>
                    <Click Handler="here is the code" />
                </Listeners>
            </ext:Button>
    
            <ext:Button ID="Button2" runat="server" Text="Editor Cancel">
                <Listeners>
                    <Click Handler="here is the code" />
                </Listeners>
            </ext:Button>
    
            <ext:GridPanel
                ID="GridPanel1"
                runat="server"
                Title="Editable GridPanel"
                Width="600"
                Height="350">
                <Store>
                    <ext:Store ID="Store1" runat="server">
                        <Model>
                            <ext:Model 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>
                <ColumnModel>
                    <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 runat="server" />
                            </Editor>
                        </ext:Column>
                        <ext:Column ID="Column3" runat="server" Text="Price" DataIndex="Price">
                            <Renderer Format="UsMoney" />
                            <Editor>
                                <ext:NumberField runat="server" />
                            </Editor>
                        </ext:Column>
                        <ext:Column ID="Column4" runat="server" Text="Change" DataIndex="Change">
                            <Renderer Fn="change" />
                            <Editor>
                                <ext:NumberField runat="server" />
                            </Editor>
                        </ext:Column>
                        <ext:Column ID="Column5" runat="server" Text="Change" DataIndex="PctChange">
                            <Renderer Fn="pctChange" />
                            <Editor>
                                <ext:NumberField runat="server" />
                            </Editor>
                        </ext:Column>
                        <ext:DateColumn
                            runat="server"
                            Text="Last Updated"
                            DataIndex="LastChange"
                            Format="yyyy-MM-dd">
                            <Editor>
                                <ext:DateField runat="server" Format="yyyy-MM-dd" />
                            </Editor>
                        </ext:DateColumn>
                    </Columns>
                </ColumnModel>
                <SelectionModel>
                    <ext:CellSelectionModel runat="server" />
                </SelectionModel>
            </ext:GridPanel>
    I want that the button click is the only way tu enable the editor and the other button to cancel editor
    Last edited by Daniil; Oct 22, 2013 at 2:43 PM. Reason: [CLOSED]
  2. #2
    Hi @osef,

    Please clarify what do you mean under "enable the columns with editor"?

    Columns' Editors are only used by a GridPanel's plugin - CellEditing or RowEditing? You don't configure any of them, so, I am not sure what exactly you mean.

    Do you want all the editors (in all rows in all cells) to be appeared on a Button click? Like this:
    https://examples2.ext.net/#/GridPane...Column/Editor/
  3. #3
    Quote Originally Posted by Daniil View Post
    Hi @osef,

    Please clarify what do you mean under "enable the columns with editor"?

    Columns' Editors are only used by a GridPanel's plugin - CellEditing or RowEditing? You don't configure any of them, so, I am not sure what exactly you mean.

    Do you want all the editors (in all rows in all cells) to be appeared on a Button click? Like this:
    https://examples2.ext.net/#/GridPane...Column/Editor/
    Daniil Here is a example with Image:

    I have the next GridPanel, in TopBar I have two buttons (Edit and Cancel)

    Click image for larger version. 

Name:	CellEditing01.png 
Views:	7 
Size:	11.3 KB 
ID:	7067

    In the next image I am selecting the row 5

    Click image for larger version. 

Name:	CellEditing02.png 
Views:	7 
Size:	11.4 KB 
ID:	7068

    In the next, I click in the button "Edit" and the columns with editor are enabled (Only in the row 5)

    Click image for larger version. 

Name:	CellEditing03.png 
Views:	8 
Size:	15.1 KB 
ID:	7069

    And, I click in the button "Cancel" and the columns with editor are disabled (Only in the row 5 with the data changes)

    Click image for larger version. 

Name:	CellEditing04.png 
Views:	8 
Size:	12.2 KB 
ID:	7070

    Here is my code

            <ext:GridPanel
                ID="gpAlimentos"
                runat="server"
                Height="300"
                Width="802"
                Title="Alimentos">
                <TopBar>
                    <ext:Toolbar ID="tbTopAlimentos" runat="server">
                        <Items>
                            <ext:Button ID="btnEditar" runat="server" Text="Edit">
                                <Listeners>
                                    <Click Handler="I want the code here" />
                                </Listeners>
                            </ext:Button>
                            <ext:Button ID="btnCancelar" runat="server" Text="Cancel">
                                <Listeners>
                                    <Click Handler="I want the code here" />
                                </Listeners>
                            </ext:Button>
                        </Items>
                    </ext:Toolbar>
                </TopBar>
                <Store>
                    <ext:Store ID="sAlimentos" runat="server">
                        <Model>
                            <ext:Model ID="mAlimentos" runat="server">
                                <Fields>
                                    <ext:ModelField Name="ID" Type="Int" />
                                    <ext:ModelField Name="Grupo" Type="String" />
                                    <ext:ModelField Name="Nombre" Type="String" />
                                    <ext:ModelField Name="Marca" Type="String" />
                                    <ext:ModelField Name="Cantidad" Type="Int" />
                                    <ext:ModelField Name="UnidadMedida" Type="String" />
                                    <ext:ModelField Name="Precio" Type="Float" />
                                    <ext:ModelField Name="Lugar" Type="String" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <ColumnModel>
                    <Columns>
                        <ext:NumberColumn ID="ncID" runat="server" DataIndex="ID" Text="ID" />
                        <ext:Column ID="cGrupo" runat="server" DataIndex="Grupo" Text="Grupo">
                            <Editor>
                                <ext:TextField ID="txtfGrupo" runat="server" />
                            </Editor>
                        </ext:Column>
                        <ext:Column ID="cNombre" runat="server" DataIndex="Nombre" Text="Nombre">
                            <Editor>
                                <ext:TextField ID="txtfNombre" runat="server" />
                            </Editor>
                        </ext:Column>
                        <ext:Column ID="cMarca" runat="server" DataIndex="Marca" Text="Marca">
                            <Editor>
                                <ext:TextField ID="txtfMarca" runat="server" />
                            </Editor>
                        </ext:Column>
                        <ext:NumberColumn ID="ncCantidad" runat="server" DataIndex="Cantidad" Text="Cantidad">
                            <Editor>
                                <ext:NumberField ID="nfCantidad" runat="server" />
                            </Editor>
                        </ext:NumberColumn>
                        <ext:Column ID="cUnidadMedida" runat="server" DataIndex="UnidadMedida" Text="Unidad de medida" />
                        <ext:NumberColumn ID="ncPrecio" runat="server" DataIndex="Precio" Text="Precio" />
                        <ext:Column ID="cLugar" runat="server" DataIndex="Lugar" Text="Lugar" />
                    </Columns>
                </ColumnModel>
                <SelectionModel>
                    <ext:CellSelectionModel ID="csmAliemntos" runat="server" />
                </SelectionModel>
                <Plugins>
                    <ext:CellEditing ID="ceAlimentos" runat="server">
                    </ext:CellEditing>
                </Plugins>
            </ext:GridPanel>
            protected void Page_Load(object sender, EventArgs e)
            {
                List<Alimentos> list = new List<Alimentos>(5);
    
                for (int i = 1; i <= 5; i++)
                {
                    Alimentos alimentos = new Alimentos
                    {
                        ID = i,
                        Grupo = ("Grupo" + i),
                        Nombre = ("Nombre" + i),
                        Marca = ("Marca" + i),
                        Cantidad = i,
                        UnidadMedida = ("UnidadMedida" + i),
                        Precio = Convert.ToDecimal(i * 85.12),
                        Lugar = ("Lugar" + i)
                    };
    
                    list.Add(alimentos);
                }
    
                sAlimentos.DataSource = list;
                sAlimentos.DataBind();
            }
    
            public class Alimentos
            {
                public int ID { get; set; }
                public string Grupo { get; set; }
                public string Nombre { get; set; }
                public string Marca { get; set; }
                public int Cantidad { get; set; }
                public string UnidadMedida { get; set; }
                public decimal Precio { get; set; }
                public string Lugar { get; set; }
            }
    I want the code in the click listener of buttons (Edit and Cancel).

    I hope you understand me, thank you.
  4. #4
    Hello!

    Thank you for your clarification. In your case, I would use RowEditor.

    Look at this sample: https://examples2.ext.net/#/GridPane...ins/RowEditor/

    This plugin has 2 useful methods for your case:
    startEdit - http://docs.sencha.com/extjs/4.2.1/#...thod-startEdit
    cancelEdit - http://docs.sencha.com/extjs/4.2.1/#...hod-cancelEdit

Similar Threads

  1. [CLOSED] ext:Button: Adding listener to a click event
    By supera in forum 2.x Legacy Premium Help
    Replies: 6
    Last Post: Apr 05, 2012, 12:04 PM
  2. Click Listener to Button from Code-Behind
    By Alexx in forum 1.x Help
    Replies: 7
    Last Post: Jul 26, 2011, 11:26 AM
  3. [CLOSED] Button CLICK directevent & listener timeout
    By webclouder in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Apr 05, 2011, 10:10 PM
  4. Replies: 10
    Last Post: Aug 18, 2010, 2:22 AM
  5. [CLOSED] Button Click Listener bug
    By methode in forum 1.x Legacy Premium Help
    Replies: 0
    Last Post: Apr 26, 2010, 11:40 AM

Tags for this Thread

Posting Permissions