PDA

View Full Version : [CLOSED] Adding new record with GridPanel and FormPanel



ermanni.info
Apr 17, 2014, 1:46 AM
Hi !

I am having trouble implementing a routine using GridPanel and FormPanel. The basis for my routine is the Form / FormPanel / Basic ( http://examples2.ext.net/#/Form/FormPanel/Basic/) example.

On my page I created a button to add new records in GridPanel. The code is as follows :



protected void AddClick(object sender, DirectEventArgs e)
{
Clientes.Add(NovoCliente());
Id = Clientes[Clientes.Count - 1].Id;

StoreClientes.DataSource = Clientes;
StoreClientes.Reload();

var sm = gridClientes.SelectionModel.Primary as RowSelectionModel;
if (sm != null)
{
sm.ClearSelection();
sm.SelectedRows.Add(new SelectedRow(Id));
sm.UpdateSelection();
gridClientes.GetView().FocusRow(Id);
}

FormClientes.LoadRecord(StoreClientes.GetById(Id)) ;
}


Add new item to the List Reloading Store. Then clean the selection in the grid and I select the new added record that has the fields blank. Update the selection of the grid and perform the method to give focus on the GridPanel line.

When the grid is not the FormPanel records shows the edit fields blank. After recording the first record , when invoked new addition , the new record is displayed in GridPanel only focus to the new record does not occur . FormPanel remains positioned in the previous record . If I click with the mouse manually in the FormPanel grid is updated normally.

I can not understand where is the error.

Could you help me?

Thanks !

Ermanni

Daniil
Apr 17, 2014, 5:29 PM
Hi @ermanni.info,

We would be happy to help, but it is really hard to understand what is going wrong with a test case to reproduce the problem. Please provide.

ermanni.info
Apr 18, 2014, 1:57 PM
Hi!

Below is an example, very close to the real application. It turns out that in the example below is experiencing an error that I could not identify the reason: a.getData is not a function.



<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">

public class Cliente
{
public string Id { get; set; }
public string Ref { get; set; }
public string Nome { get; set; }
public string Endereco { get; set; }
public string Bairro { get; set; }
public string Cidade { get; set; }
public string Estado { get; set; }
}

public List<Cliente> Clientes
{
set
{
Session["x"] = value;
}
get
{
if (Session["x"] == null)
Session["x"] = new List<Cliente>();
return (List<Cliente>) Session["x"];
}
}

public string ClienteSelecionadoRef
{
get { return (string)Session["y"]; }
set { Session["y"] = value; }
}

protected void Page_Load(object sender, EventArgs e)
{
}

private Cliente GetByID(string id)
{
return Clientes.FirstOrDefault(data => data.Ref == id);
}

protected void FetchRecord(object sender, StoreReadDataEventArgs e)
{
StoreCliente.DataSource = Clientes;
StoreCliente.DataBind();

if (string.IsNullOrEmpty(ClienteSelecionadoRef) && Clientes.Count > 0)
{
ClienteSelecionadoRef = Clientes[e.Start].Ref;
}

e.Total = Clientes.Count;
}

protected void DeleteClick(object sender, DirectEventArgs e)
{
string id = e.ExtraParams["recordId"];
Cliente data = GetByID(id);

int index = Clientes.IndexOf(data);
Clientes.Remove(data);

if (index == Clientes.Count)
{
index--;
}

if (index >= 0)
{
StoreCliente.LoadPage(index + 1);
}
else if (Clientes.Count == 0)
{
AddClick(sender, e);
}
}

protected void AddClick(object sender, DirectEventArgs e)
{
Clientes.Add(new Cliente
{
Id = Guid.NewGuid().ToString(),
Ref = Guid.NewGuid().ToString()
});
ClienteSelecionadoRef = Clientes[Clientes.Count - 1].Ref;
StoreCliente.DataSource = Clientes;
StoreCliente.Reload();

var sm = gridClientes.SelectionModel.Primary as RowSelectionModel;
if (sm != null)
{
sm.ClearSelection();
sm.SelectedRows.Add(new SelectedRow(ClienteSelecionadoRef));
sm.UpdateSelection();
gridClientes.GetView().FocusRow(ClienteSelecionado Ref);
}
}

protected void SaveClick(object sender, DirectEventArgs e)
{
string id = "";

var sm = gridClientes.SelectionModel.Primary as RowSelectionModel;
id = (sm != null && sm.SelectedRow != null) ? sm.SelectedRow.RecordID : ClienteSelecionadoRef;

Cliente data = GetByID(id);
if (data == null)
{
(new MessageBox()).Alert("Ermanni", "Problemas ao salvar dados do cliente.").Show();
return;
}

data.Nome = NomeField.Text;
data.Endereco = EnderecoField.Text;
data.Bairro = BairroField.Text;
data.Cidade = CidadeField.Text;
data.Estado = EstadoField.Text;

StoreCliente.Reload();
sm.Select(data.Ref);
sm.UpdateSelection();
}
</script>

<!DOCTYPE html>

<html>
<head id="Head1" runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" Locale="pt-BR"/>
<ext:Store
ID="StoreCliente"
runat="server"
OnReadData="FetchRecord"
PageSize="1"
AutoDataBind="True"
>
<Proxy>
<ext:PageProxy />
</Proxy>
<Model>
<ext:Model ID="ModelCliente" runat="server">
<Fields>
<ext:ModelField Name="Id" />
<ext:ModelField Name="Ref" />
<ext:ModelField Name="Nome" />
<ext:ModelField Name="Endereco" />
<ext:ModelField Name="Bairro" />
<ext:ModelField Name="Cidade" />
<ext:ModelField Name="Estado" />
</Fields>
</ext:Model>
</Model>
<Listeners>
<DataChanged Handler="var record = this.getAt(0) || {};#{FormCliente}.getForm().loadRecord(record);#{F ormCliente}.clearInvalid();" />
</Listeners>
</ext:Store>
<ext:Panel ID="pnlCliente"
runat="server"
Title="Clientes"
Layout="BorderLayout"
Border="false"
BodyPadding="0"
Disabled="False">
<Listeners>
<Activate Handler="#{gridClientes}.focus(false,400);"></Activate>
</Listeners>
<Items>
<ext:FormPanel
ID="FormCliente"
runat="server"
Border="false"
Region="Center"
StyleSpec="background-color:white;"
Layout="FitLayout"
BodyPadding="5"
>
<Items>
<ext:Panel
runat="server"
ID="pnlCampos"
Border="false"
AutoScroll="True"
Layout="VBoxLayout">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Stretch" ReserveScrollbar="True"/>
</LayoutConfig>
<Items>
<ext:GridPanel ID="gridClientes"
runat="server"
ColumnWidth="0.6"
Height="80"
StoreID="StoreCliente"
Layout="VBoxLayout"
>
<ColumnModel ID="ColumnModelCliente" runat="server">
<Columns>
<ext:Column ID="colClienteNome" runat="server" Text="Cliente" DataIndex="Nome" Flex="1" />
</Columns>
</ColumnModel>
<Listeners>
<SelectionChange Handler="if (selected[0]) { this.up('form').getForm().loadRecord(selected[0]);}" />
</Listeners>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
</SelectionModel>
</ext:GridPanel>
<ext:FieldSet ID="FieldSet3"
runat="server"
Title="Dados do Cliente"
Layout="VBoxLayout"
MarginSpec="0 15 7 0"
Collapsed="False"
Collapsible="False"
Height="150">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Stretch" ReserveScrollbar="True"/>
</LayoutConfig>
<Items>
<ext:TextField
ID="NomeField"
runat="server"
Name="Nome"
MsgTarget="Side"
AllowBlank="false"
FieldLabel="Nome"
LabelWidth="90"
AnchorHorizontal="98%"
Margins="0 5 0 0"
Flex="1"
/>
<ext:TextField
ID="EnderecoField"
runat="server"
Name="Endereco"
MsgTarget="Side"
AllowBlank="false"
FieldLabel="Endere?o"
LabelWidth="90"
AnchorHorizontal="98%"
Margins="0 5 0 0"
Flex="1"
/>
<ext:TextField
ID="BairroField"
runat="server"
Name="Bairro"
MsgTarget="Side"
AllowBlank="false"
FieldLabel="Bairro"
LabelWidth="90"
AnchorHorizontal="98%"
Margins="0 5 0 0"
Flex="1"
/>
<ext:TextField
ID="CidadeField"
runat="server"
Name="Cidade"
MsgTarget="Side"
AllowBlank="false"
FieldLabel="Cidade"
LabelWidth="90"
AnchorHorizontal="98%"
Margins="0 5 0 0"
Flex="1"
/>
<ext:TextField
ID="EstadoField"
runat="server"
Name="Estado"
MsgTarget="Side"
AllowBlank="false"
FieldLabel="Estado"
LabelWidth="90"
AnchorHorizontal="98%"
Margins="0 5 0 0"
Flex="1"
/>
</Items>
</ext:FieldSet>
</Items>
</ext:Panel>
</Items>
<Listeners>
<ValidityChange Handler="#{btnSaveRecord}.setDisabled(!valid);" />
</Listeners>
</ext:FormPanel>
</Items>
<TopBar>
<ext:Toolbar ID="barCliente" runat="server">
<Items>
<ext:Button ID="btnRefresh" runat="server" Icon="ArrowRefresh" Text="Atualizar">
<Listeners>
<Click Handler="#{StoreCliente}.reload()"></Click>
</Listeners>
</ext:Button>
<ext:Button ID="btnAddCliente" runat="server" Icon="Add" Text="Incluir">
<DirectEvents>
<Click OnEvent="AddClick" />
</DirectEvents>
</ext:Button>
<ext:Button ID="btnDeleteCliente" runat="server" Icon="Delete" Text="Excluir">
<DirectEvents>
<Click OnEvent="DeleteClick" Success="Ext.Msg.alert('Ermanni', 'Cliente exclu?do.');">
<ExtraParams>
<ext:Parameter Name="recordId" Value="#{StoreCliente}.getAt(0).data.Ref" Mode="Raw" />
</ExtraParams>
</Click>
</DirectEvents>
</ext:Button>
<ext:ToolbarSeparator ID="ToolbarSeparator1" runat="server"/>
<ext:Button
ID="btnSaveRecord"
runat="server"
Icon="Disk"
Text="Gravar"
Disabled="true">
<DirectEvents>
<Click
OnEvent="SaveClick"
Before="return #{FormCliente}.getForm().isValid();"
Success="Ext.Msg.alert('Ermanni', 'Dados do Cliente gravados com sucesso.');">
<ExtraParams>
<ext:Parameter Name="recordId" Value="#{StoreCliente}.getAt(0).data.Ref" Mode="Raw" />
</ExtraParams>
</Click>
</DirectEvents>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
</ext:Panel>
</form>
</body>
</html>


Thanks!

Ermanni

ermanni.info
Apr 19, 2014, 1:13 PM
Hello!

Any suggestions for this case?

Thanks!

Ermanni

Daniil
Apr 19, 2014, 8:00 PM
There is a layout error.

Please set up some height for the pnlCliente Panel.

Height="400"

ermanni.info
Apr 19, 2014, 9:46 PM
Hello Daniil,

That my blunder! Associated the blank screen with the javascript error and not noticed this. Thank you!

Under the new code set. I believe the way I'm doing with GridPanel and FormPanel is not the best. Now it's two things going on: the grid gets the message "Loading ..." and when I click Add gives an error when I get gridClientes.GetView().



<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">

public class Cliente
{
public string Id { get; set; }
public string Ref { get; set; }
public string Nome { get; set; }
public string Endereco { get; set; }
public string Bairro { get; set; }
public string Cidade { get; set; }
public string Estado { get; set; }
}

public List<Cliente> Clientes
{
set
{
Session["x"] = value;
}
get
{
if (Session["x"] == null)
Session["x"] = new List<Cliente>();
return (List<Cliente>) Session["x"];
}
}

public string ClienteSelecionadoRef
{
get
{
if (Session["y"] == null)
Session["y"] = "";
return (string)Session["y"];
}
set { Session["y"] = value; }
}

protected void Page_Load(object sender, EventArgs e)
{
}

private Cliente GetByID(string id)
{
return Clientes.FirstOrDefault(data => data.Ref == id);
}

protected void FetchRecord(object sender, StoreReadDataEventArgs e)
{
StoreCliente.DataSource = Clientes;
StoreCliente.DataBind();

if (string.IsNullOrEmpty(ClienteSelecionadoRef) && Clientes.Count > 0)
{
ClienteSelecionadoRef = Clientes[e.Start].Ref;
}

e.Total = Clientes.Count;
}

protected void DeleteClick(object sender, DirectEventArgs e)
{
string id = e.ExtraParams["recordId"];
Cliente data = GetByID(id);

int index = Clientes.IndexOf(data);
Clientes.Remove(data);

if (index == Clientes.Count)
{
index--;
}

if (index >= 0)
{
StoreCliente.LoadPage(index + 1);
}
else if (Clientes.Count == 0)
{
AddClick(sender, e);
}
}

protected void AddClick(object sender, DirectEventArgs e)
{
Clientes.Add(new Cliente
{
Id = Guid.NewGuid().ToString(),
Ref = Guid.NewGuid().ToString()
});
ClienteSelecionadoRef = Clientes[Clientes.Count - 1].Ref;
StoreCliente.DataSource = Clientes;
StoreCliente.Reload();

var sm = gridClientes.SelectionModel.Primary as RowSelectionModel;
if (sm != null)
{
sm.ClearSelection();
sm.SelectedRows.Add(new SelectedRow(ClienteSelecionadoRef));
sm.UpdateSelection();
gridClientes.GetView().FocusRow(ClienteSelecionado Ref);
}
}

protected void SaveClick(object sender, DirectEventArgs e)
{
string id = "";

var sm = gridClientes.SelectionModel.Primary as RowSelectionModel;
id = (sm != null && sm.SelectedRow != null) ? sm.SelectedRow.RecordID : ClienteSelecionadoRef;

Cliente data = GetByID(id);
if (data == null)
{
(new MessageBox()).Alert("Ermanni", "Problemas ao salvar dados do cliente.").Show();
return;
}

data.Nome = NomeField.Text;
data.Endereco = EnderecoField.Text;
data.Bairro = BairroField.Text;
data.Cidade = CidadeField.Text;
data.Estado = EstadoField.Text;

StoreCliente.Reload();
sm.Select(data.Ref);
sm.UpdateSelection();
}
</script>

<!DOCTYPE html>

<html>
<head id="Head1" runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" Locale="pt-BR"/>
<ext:Store
ID="StoreCliente"
runat="server"
OnReadData="FetchRecord"
PageSize="1"
AutoDataBind="True"
>
<Proxy>
<ext:PageProxy />
</Proxy>
<Model>
<ext:Model ID="ModelCliente" runat="server">
<Fields>
<ext:ModelField Name="Id" />
<ext:ModelField Name="Ref" />
<ext:ModelField Name="Nome" />
<ext:ModelField Name="Endereco" />
<ext:ModelField Name="Bairro" />
<ext:ModelField Name="Cidade" />
<ext:ModelField Name="Estado" />
</Fields>
</ext:Model>
</Model>
<Listeners>
<DataChanged Handler="var record = this.getAt(0) || {};#{FormCliente}.getForm().loadRecord(record);#{F ormCliente}.clearInvalid();" />
</Listeners>
</ext:Store>
<ext:Panel ID="pnlCliente"
runat="server"
Title="Clientes"
Layout="BorderLayout"
Border="false"
BodyPadding="0"
Disabled="False"
Height="600">
<Listeners>
<Activate Handler="#{gridClientes}.focus(false,400);"></Activate>
</Listeners>
<Items>
<ext:FormPanel
ID="FormCliente"
runat="server"
Border="false"
Region="Center"
StyleSpec="background-color:white;"
Layout="FitLayout"
BodyPadding="5"
>
<Items>
<ext:Panel
runat="server"
ID="pnlCampos"
Border="false"
AutoScroll="True"
Layout="VBoxLayout">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Stretch" ReserveScrollbar="True"/>
</LayoutConfig>
<Items>
<ext:GridPanel ID="gridClientes"
runat="server"
ColumnWidth="0.6"
Height="80"
StoreID="StoreCliente"
Layout="VBoxLayout"
>
<ColumnModel ID="ColumnModelCliente" runat="server">
<Columns>
<ext:Column ID="colClienteNome" runat="server" Text="Cliente" DataIndex="Nome" Flex="1" />
</Columns>
</ColumnModel>
<Listeners>
<SelectionChange Handler="if (selected[0]) { this.up('form').getForm().loadRecord(selected[0]);}" />
</Listeners>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
</SelectionModel>
</ext:GridPanel>
<ext:FieldSet ID="FieldSet3"
runat="server"
Title="Dados do Cliente"
Layout="VBoxLayout"
MarginSpec="0 15 7 0"
Collapsed="False"
Collapsible="False"
Height="150">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Stretch" ReserveScrollbar="True"/>
</LayoutConfig>
<Items>
<ext:TextField
ID="NomeField"
runat="server"
Name="Nome"
MsgTarget="Side"
AllowBlank="false"
FieldLabel="Nome"
LabelWidth="90"
AnchorHorizontal="98%"
Margins="0 5 0 0"
Flex="1"
/>
<ext:TextField
ID="EnderecoField"
runat="server"
Name="Endereco"
MsgTarget="Side"
AllowBlank="false"
FieldLabel="Endere?o"
LabelWidth="90"
AnchorHorizontal="98%"
Margins="0 5 0 0"
Flex="1"
/>
<ext:TextField
ID="BairroField"
runat="server"
Name="Bairro"
MsgTarget="Side"
AllowBlank="false"
FieldLabel="Bairro"
LabelWidth="90"
AnchorHorizontal="98%"
Margins="0 5 0 0"
Flex="1"
/>
<ext:TextField
ID="CidadeField"
runat="server"
Name="Cidade"
MsgTarget="Side"
AllowBlank="false"
FieldLabel="Cidade"
LabelWidth="90"
AnchorHorizontal="98%"
Margins="0 5 0 0"
Flex="1"
/>
<ext:TextField
ID="EstadoField"
runat="server"
Name="Estado"
MsgTarget="Side"
AllowBlank="false"
FieldLabel="Estado"
LabelWidth="90"
AnchorHorizontal="98%"
Margins="0 5 0 0"
Flex="1"
/>
</Items>
</ext:FieldSet>
</Items>
</ext:Panel>
</Items>
<Listeners>
<ValidityChange Handler="#{btnSaveRecord}.setDisabled(!valid);" />
</Listeners>
</ext:FormPanel>
</Items>
<TopBar>
<ext:Toolbar ID="barCliente" runat="server">
<Items>
<ext:Button ID="btnRefresh" runat="server" Icon="ArrowRefresh" Text="Atualizar">
<Listeners>
<Click Handler="#{StoreCliente}.reload()"></Click>
</Listeners>
</ext:Button>
<ext:Button ID="btnAddCliente" runat="server" Icon="Add" Text="Incluir">
<DirectEvents>
<Click OnEvent="AddClick" />
</DirectEvents>
</ext:Button>
<ext:Button ID="btnDeleteCliente" runat="server" Icon="Delete" Text="Excluir">
<DirectEvents>
<Click OnEvent="DeleteClick" Success="Ext.Msg.alert('Ermanni', 'Cliente exclu?do.');">
<ExtraParams>
<ext:Parameter Name="recordId" Value="#{StoreCliente}.getAt(0).data.Ref" Mode="Raw" />
</ExtraParams>
</Click>
</DirectEvents>
</ext:Button>
<ext:ToolbarSeparator ID="ToolbarSeparator1" runat="server"/>
<ext:Button
ID="btnSaveRecord"
runat="server"
Icon="Disk"
Text="Gravar"
Disabled="true">
<DirectEvents>
<Click
OnEvent="SaveClick"
Before="return #{FormCliente}.getForm().isValid();"
Success="Ext.Msg.alert('Ermanni', 'Dados do Cliente gravados com sucesso.');">
<ExtraParams>
<ext:Parameter Name="recordId" Value="#{StoreCliente}.getAt(0).data.Ref" Mode="Raw" />
</ExtraParams>
</Click>
</DirectEvents>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
</ext:Panel>
</form>
</body>
</html>


Thanks!

Ermanni

geoffrey.mcgill
Apr 19, 2014, 9:52 PM
Any chance you could simplify your code sample down to only the minimum required to reproduce the problem?

Please review the following Guidelines for posting in the forums:

http://forums.ext.net/showthread.php?3440-Forum-Guidelines-For-Posting-New-Topics

http://forums.ext.net/showthread.php?10205-More-Information-Required

ermanni.info
Apr 19, 2014, 11:39 PM
Hello Geoffrey!

The example I posted is already a simplified code. Basically it is an attempt to CRUD using GridPanel and FormPanel. I do not see the complexity in this case. Simplify the problem has already been done. In real application I do creating the grid via code. This crud is just a flap of my maintenance page. On the same page I have several tabs controlling other various information.

The sample GridPanel and FormPanel in the Ext.Net site is good, just that it's an incomplete example. Demonstrates just how to edit between GridPanel and FormPanel. If the example is actually a CRUD it were, would not have opened the thread here in the forum.

Sure your understanding, anticipate my thanks.

Ermanni

ermanni.info
Apr 21, 2014, 3:20 PM
Hi!

Any suggestions? How do CRUD using GridPanel and FormPanel?

Thanks!

Ermanni

Vladimir
Apr 21, 2014, 3:33 PM
Hi

Regarding your sample from post #6 (http://forums.ext.net/showthread.php?32531-Adding-new-record-with-GridPanel-and-FormPanel&p=146981&viewfull=1#post146981)

1. The code from DataChanged listener is not correct. I suggest the following code


<DataChanged Handler="var record = this.getAt(0); if (record) {#{FormCliente}.getForm().loadRecord(record);#{For mCliente}.clearInvalid();}else{#{FormCliente}.getF orm().reset();};" />


2. You have no GridView server instance therefore 'gridClientes.GetView()' return null and you will get NullReferenceException in AddClick handler, therefore add view to the grid if you need to call view methods (like FocusRow)


<View>
<ext:GridView ID="GridView1" runat="server" />
</View>


3. Please note that 'StoreCliente.Reload()' just generates new ajax request to reload data (if proxy is used), I guess that it is better to add new record instead whole grid reloading (in seperate request)


//StoreCliente.DataSource = Clientes;
//StoreCliente.Reload();
StoreCliente.Add(Clientes[Clientes.Count - 1]);


4. You have a problem with selecting record because you try to select record by id but your Model has no IDProperty. So, you need to define IDProperty in Model of Store. If you use Ref to make selection then Ref should be id. Just, in this case what means Id field in your model?

Vladimir
Apr 21, 2014, 3:36 PM
Any suggestions? How do CRUD using GridPanel and FormPanel?

It is very common question. What exactly problems do you have?
You can investigate the following samples
http://examples2.ext.net/#/GridPanel/Update/AutoSave/
http://examples2.ext.net/#/GridPanel/Update/Batch/
http://examples2.ext.net/#/GridPanel/Restful/Overview/

ermanni.info
Apr 27, 2014, 10:58 PM
Hi Vladimir!

Thanks for the help. Realized the corrections in my code and it worked.

Show the ball!

Thanks!

Ermanni