PDA

View Full Version : [CLOSED] Enabled CellEdit with listener in button click



osef
Oct 17, 2013, 6:30 AM
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

Daniil
Oct 17, 2013, 12:57 PM
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:
http://examples2.ext.net/#/GridPanel/ComponentColumn/Editor/

osef
Oct 17, 2013, 6:47 PM
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:
http://examples2.ext.net/#/GridPanel/ComponentColumn/Editor/

Daniil Here is a example with Image:

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

7067

In the next image I am selecting the row 5

7068

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

7069

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

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.

Baidaly
Oct 17, 2013, 7:44 PM
Hello!

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

Look at this sample: http://examples2.ext.net/#/GridPanel/Plugins/RowEditor/

This plugin has 2 useful methods for your case:
startEdit - http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.grid.plugin.RowEditing-method-startEdit
cancelEdit - http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.grid.plugin.RowEditing-method-cancelEdit