[CLOSED] Grid in tab panel dynamic.

**stoque** · Jul 27, 2011, 1:54 PM

Hi,

I create tab panels dynamic. In tab panel I add an grid. In the second call, my grid not render the PagingToolbar of the grid.

Images:

Click image for larger version.

Name: GridError.png
Views: 198
Size: 10.3 KB
ID: 3022

Click image for larger version.

Name: GridNormal.png
Views: 209
Size: 13.1 KB
ID: 3023

My code to create tab panel:

[DirectMethod]
        public void PesquisarDocumento(string tipoDocumentoNome, List<documento> documentos)
        {
            if (documentos.Count() > 0)
            {                 

                this.MontaColunasGrid(documentos);
                this.GridPanelDocumento.Visible = true;

                Ext.Net.Panel tabPanel = Componentes.CriarTabPanel(DateTime.Now.Millisecond, tipoDocumentoNome);
                tabPanel.ToolTip = tipoDocumentoNome;
                TabPanelGeral.Add(tabPanel);
                tabPanel.Add(this.GridPanelDocumento);
                tabPanel.Render();
                TabPanelGeral.SetActiveTab(tabPanel);
                
            }
            else
                Aplicacao.Mensagem(MessageBox.Icon.INFO, "Atenção", "Nenhum documento encontrado!");
        }

Any suggestion.

Thanks.

**Daniil** · Jul 27, 2011, 2:05 PM

Hi,

Please set up LayoutOnTabChange="true" for the TabPanel or HideMode="Offsets" for the tabs.

**stoque** · Jul 27, 2011, 2:23 PM

Hi Daniil,

It almost worked, but first tab is duplicate.

Image:

Click image for larger version.

Name: GridError.png
Views: 164
Size: 18.3 KB
ID: 3024

My code:

 <ext:TabPanel ID="TabPanelGeral" runat="server" Region="Center" Margins="0 4 4 0" LayoutOnTabChange="true" EnableTabScroll="true" MinTabWidth="85">                                   
                    <Plugins>
                        <ext:TabCloseMenu ID="TabCloseMenu1" runat="server" />
                    </Plugins>
                </ext:TabPanel>

Thanks.

**Daniil** · Jul 27, 2011, 2:25 PM

Please ensure that you render a grid once.

If the issue persist, please provide a sample to reproduce.

**stoque** · Jul 27, 2011, 4:46 PM

Sample to reproduce, please.

<%@ Page Language="C#" AutoEventWireup="true" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext"  %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head id="HeadID" runat="server">
        <title></title>

        <script runat="server">
            
            public class Documento
            {
                public string nome { get; set; }
                public int id { get; set; }
                public System.Collections.Generic.List<DocIndice> valor = new System.Collections.Generic.List<DocIndice>();
            };

            public class DocIndice
            {
                public string valor { get; set; }
                public string nome { get; set; }
            }


            public System.Collections.Generic.List<Documento> Documentos()
            {
                return new System.Collections.Generic.List<Documento>()
                {
                    new Documento{ id=1, nome="Teste1", valor = new System.Collections.Generic.List<DocIndice>() { new DocIndice { valor="1", nome = "nome1" } }}
                    ,
                    new Documento{ id=2, nome="Teste2", valor = new System.Collections.Generic.List<DocIndice>() { new DocIndice { valor="2", nome = "nome2" } }}
                    ,
                    new Documento{ id=3, nome="Teste3", valor = new System.Collections.Generic.List<DocIndice>() { new DocIndice { valor="3", nome = "nome3" } }}
                };
            }

            public static Ext.Net.Panel CriarTabPanel(int controleID, string titulo)
            {
                Ext.Net.Panel tabPanel = new Ext.Net.Panel();
                tabPanel.ID = string.Concat(controleID.ToString(), titulo);
                tabPanel.Title = titulo;
                tabPanel.Icon = Icon.Application;
                tabPanel.Closable = true;
                return tabPanel;
            }
            
            
           
            public void btnteste_Clique(object sender, DirectEventArgs e )
            {

                if (Documentos().Count > 0)
                {

                    this.MontaColunasGrid(Documentos());
                    Ext.Net.Panel tabPanel = CriarTabPanel(DateTime.Now.Millisecond, "teste");
                    tabPanel.ToolTip = "teste";
                    TabPanelGeral.Add(tabPanel);
                    tabPanel.Add(this.GridPanelDocumento);
                    this.GridPanelDocumento.Visible = true;
                    tabPanel.Render();
                    TabPanelGeral.SetActiveTab(tabPanel);
                }
            }

            public void AdicionarField(RecordField field)
            {
                if (X.IsAjaxRequest)
                {
                    this.Store1.AddField(field, false);
                }
                else
                {
                    this.Store1.Reader.Reader.Fields.Add(field);
                }
            }

            public void MontaColunasGrid(System.Collections.Generic.List<Documento> Docs)
            {
                System.Data.DataTable dtDocumentos = new System.Data.DataTable();

                dtDocumentos.Columns.Add("id");
                AdicionarField(new RecordField("id"));

                dtDocumentos.Columns.Add("nome");
                AdicionarField(new RecordField("nome"));


                foreach (var doc in Docs)
                {
                    foreach (var documentoIndice in doc.valor)
                    {

                        if (!dtDocumentos.Columns.Contains(documentoIndice.nome))
                        {
                            this.AdicionarField(new RecordField(documentoIndice.nome));

                            dtDocumentos.Columns.Add(new System.Data.DataColumn(documentoIndice.nome) { ColumnName = documentoIndice.nome });

                            this.GridPanelDocumento.ColumnModel.Columns.Add(new Column { DataIndex = documentoIndice.nome, Header = documentoIndice.nome });
                        }
                    }
                }


                this.Store1.ClearMeta();

                foreach (var doc in Docs)
                {
                    int i = 2;
                    System.Data.DataRow row = dtDocumentos.NewRow();

                    row[0] = doc.id;
                    row[1] = doc.nome;
                    foreach (var item in doc.valor)
                    {
                        row[i] = item.valor;
                        i++;
                    }
                    dtDocumentos.Rows.Add(row);
                }

                this.Store1.DataSource = dtDocumentos;
                this.Store1.DataBind();

                if (X.IsAjaxRequest)
                {
                    this.Store1.Set("sortInfo", null);
                    this.Store1.Set("multiSortInfo", null);
                    this.GridPanelDocumento.Reconfigure();
                    this.GridPanelDocumento.AddScript("{0}.store = {1};{0}.view.refresh(true);", this.GridPanelDocumento.ClientID, this.Store1.ClientID);

                }
            }
            </script>       
     
    </head>
    <body>
     
    <form id="formInicial" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" Theme="Gray" />       
        
        <%--Utilizado para recuperar o formato de exportação dos arquivos--%>
        <ext:Hidden ID="FormatType" runat="server" />           

        <ext:Store ID="Store1" 
                    runat="server" 
                    RemotePaging="true" 
                    IgnoreExtraFields="false"                   
                    >
            <DirectEventConfig IsUpload="true" />
            <Reader>
                <ext:JsonReader TotalProperty="total"  />                                                                   
            </Reader>           
            
            <Listeners> 
                <LoadException Handler="Ext.MessageBox.alert('Erro', response.statusText);" />                            
            </Listeners>
        </ext:Store>

        <ext:Viewport ID="Viewport1" runat="server" Layout="border">
            <Items>  
                <ext:TabPanel ID="TabPanelGeral" runat="server" Region="Center" Margins="0 4 4 0" LayoutOnTabChange="true" EnableTabScroll="true" MinTabWidth="85">                                   
                    <Plugins>
                        <ext:TabCloseMenu ID="TabCloseMenu1" runat="server" />
                    </Plugins>
                </ext:TabPanel>     
                <ext:Button ID="BtnSave" runat="server" Icon="DiskBlack" Text="Enviar" >
                   <DirectEvents>
                        <Click OnEvent="btnteste_Clique" />
                   </DirectEvents>               
                </ext:Button>
             
            </Items>
        </ext:Viewport> 
          <ext:GridPanel ID="GridPanelDocumento" runat="server" Height="350" StripeRows="true" Visible="false" StoreID="Store1" Title="Documento" TrackMouseOver="true" Width="750">                                                                                                  
            <SelectionModel>
                <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
            </SelectionModel>
            <BottomBar>        
                    <ext:PagingToolbar ID="PagingToolbar1" runat="server" PageSize="5">
                        <Items>
                            <ext:Label ID="Label1" runat="server" Text="Documentos por página: " />
                            <ext:ToolbarSpacer ID="ToolbarSpacer1" runat="server" Width="10" />
                            <ext:ComboBox ID="ComboBox1" runat="server" Width="80">
                                <Items>   
                                    <ext:ListItem Text="1" />                                                        
                                    <ext:ListItem Text="5" />
                                    <ext:ListItem Text="10" />
                                    <ext:ListItem Text="20" />
                                    <ext:ListItem Text="40" />
                                </Items>
                                <SelectedItem Value="5" />
                                <Listeners>
                                    <Select Handler="#{PagingToolbar1}.pageSize = parseInt(this.getValue()); #{PagingToolbar1}.doLoad();" />
                                </Listeners>
                            </ext:ComboBox>
                        </Items>
                    </ext:PagingToolbar>
                </BottomBar>
            <View>
                <ext:GridView ID="GridView1" runat="server" ScrollOffset="2" />
            </View>
        </ext:GridPanel>
        <%--  Menu de contexto (botão direito do mouse)--%>    
        </form>          
    </body>
    </html>

**Daniil** · Jul 27, 2011, 6:52 PM

Well, this code

this.GridPanelDocumento.Visible = true;

causes rendering of the grid which is defined in the markup.

I would suggest you to create a grid dynamically in code behind.

Here is some example.
http://forums.ext.net/showthread.php...l=1#post59347I think you can leave the Store in the markup and just set up .StoreID of a GridPanel.

**stoque** · Jul 27, 2011, 8:12 PM

Ok.

More question please. My context menu has dynamic too?

Thanks for your help.

**Daniil** · Jul 28, 2011, 1:43 AM

I think yes, if you don't need that menu on initial page load.

**stoque** · Jul 28, 2011, 12:16 PM

Understand.

I created the dynamic grid , but not work.

Error: Uncaught SyntaxError:

Unexpected token ILLEGAL
executeScriptext.axd:266
executeScriptext.axd:266

This way it works :

 //gridPanel.SelectionModel.Add(rowSelectionModel);
            gridPanel.BottomBar.Add(pagingToolbar);
            //gridPanel.View.Add(gridView);

Bus this don't work:

 gridPanel.SelectionModel.Add(rowSelectionModel);
            gridPanel.BottomBar.Add(pagingToolbar);
            gridPanel.View.Add(gridView);

I can not add the SelectionModel and View to the grid.

 public static Ext.Net.GridPanel CriarGridPanel(Ext.Net.Store store, int controleID, string titulo, int largura = 750, int altura = 350)
        {

            Ext.Net.GridPanel gridPanel = new GridPanel();
            gridPanel.ID = string.Concat(controleID.ToString(), "GridPanel");
            gridPanel.Title = titulo;
            gridPanel.Width = largura;
            gridPanel.Height = altura;
            gridPanel.TrackMouseOver = true;
            gridPanel.StripeRows = true;
            
            gridPanel.Store.Add(store);

            Ext.Net.GridView gridView = new Ext.Net.GridView();
            gridView.ID = string.Concat(controleID.ToString(), "GridView");
            gridView.ScrollOffset = 2;

            Ext.Net.RowSelectionModel rowSelectionModel = new RowSelectionModel();
            rowSelectionModel.ID = string.Concat(controleID.ToString(), "RowSelectionModel");

            Ext.Net.ToolbarSpacer toolbarSpacer = new ToolbarSpacer();
            toolbarSpacer.ID = string.Concat(controleID.ToString(), "ToolbarSpacer");
            toolbarSpacer.Width = 10;

            Ext.Net.Label label = CriarLabel(controleID,"Label");

            Ext.Net.PagingToolbar pagingToolbar = new PagingToolbar();
            pagingToolbar.ID = string.Concat(controleID.ToString(), "PagingToolbar");
           

            Ext.Net.ComboBox comboBox = Componentes.CriarComboBox(controleID, "comboBox", 100);
           
            comboBox.Items.Add(new Ext.Net.ListItem { Text = "1", Value = "1" });
            comboBox.Items.Add(new Ext.Net.ListItem { Text = "5", Value = "5" });
            comboBox.Items.Add(new Ext.Net.ListItem { Text = "10", Value = "10" });
            comboBox.Items.Add(new Ext.Net.ListItem { Text = "20", Value = "20" });
            comboBox.Items.Add(new Ext.Net.ListItem { Text = "40", Value = "40" });        

            comboBox.SelectedItem.Value = "5";
           

            //comboBox.Listeners.Select.Handler = "#{"+pagingToolbar.ID.ToString()+"}.pageSize = parseInt(this.getValue()); #{"+pagingToolbar.ID.ToString()+"}.doLoad();";

            pagingToolbar.Items.Add(label);
            pagingToolbar.Items.Add(toolbarSpacer);
            pagingToolbar.Items.Add(comboBox);          
           
            
            //gridPanel.SelectionModel.Add(rowSelectionModel);
            gridPanel.BottomBar.Add(pagingToolbar);
            gridPanel.View.Add(gridView);
                       
            return gridPanel;
        }

Any suggestion?

Thanks!!!

**Daniil** · Jul 28, 2011, 1:09 PM

ID should start from a letter, not a number.

So, please replace

gridPanel.ID = string.Concat(controleID.ToString(), "GridPanel");

with

gridPanel.ID = string.Concat("GridPanel", controleID.ToString());

Please apply that change for the GridView and the RowSelectionModel as well.

Thread: [CLOSED] Grid in tab panel dynamic.

Thread Tools

Search Thread

Display

[CLOSED] Grid in tab panel dynamic.

Similar Threads

Dynamic Panel on Grid Row Click

[CLOSED] Javascript: Adding Dynamic Field to the Store and Creating Dynamic Column for the grid

Dynamic Grid Panel

Dynamic grid does not render in a dynamic panel

[CLOSED] Problem with dynamic editors in Grid panel (SetEditor)

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] Grid in tab panel dynamic.

[CLOSED] Grid in tab panel dynamic.

Similar Threads

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us