[CLOSED] Nested data in nested grids

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] Nested data in nested grids

    Hi.

    I am trying to achieve a screen to manage a travelers insurance selling page.
    Data will come with each record having other recrords related (as I will bind a collection of objects, each one will have an aggregation inside I want to show).

    I have essentially two clases (aggregated with others). Simplified they would look like:

    Class Package
    - Product [name, price...]
    - DateFrom
    - DateTo
    - DestinationCountry
    - Travellers[]

    Class Traveler
    - Name
    - BirthDate

    I need to show them all in nested grids, as I show in the example screen imagined attached here:

    Click image for larger version. 

Name:	NestedGrids_NewSale.jpg 
Views:	201 
Size:	66.0 KB 
ID:	4100

    As you can see, each package is shown with its data (in different color backgorund, not necessarily as a multiheader as it looks like) with all travellers below each one.

    I tried with RowExpander, but it is not what I expect, althought I could solve it somehow that way. Rowexpander shows an opening template with HTML in which I would have to hardcode some Table/Tr/Td I guess to show travellers.

    I saw the multilevel grid example also. That would be nice if it where possible to code it in aspx tagging. The example is created programatically what is a bit confusing for me to adapt and customize.

    Which would be the best approach to get this working?

    Is it possible to do something linke:

    <ext:GridPanel ID="grdCoberturas" runat="server" Height="450" Width="1000">
                        <Store>
                            <ext:Store ID="Store1" runat="server" OnRefreshData="ActualizarCoberturas" SerializationMode="Complex">
                                <Reader>
                                    <ext:JsonReader  IDProperty ="IndiceColeccion">
                                        <Fields>
                                            <ext:RecordField Name="Producto" />
                                            <ext:RecordField Name="FechaDesde" Type="Date" />
                                            <ext:RecordField Name="FechaHasta"  Type="Date" />
                                            <ext:RecordField Name="PaisOrigen"   IsComplex="true"/>
                                            <ext:RecordField Name="PaisOrigenNombre"   Mapping="PaisOrigen.Nombre"/>
                                            <ext:RecordField Name="Vouchers" />
                                            <ext:RecordField Name="IndiceColeccion" />
                                        </Fields>
                                    </ext:JsonReader>
                                </Reader>
                            </ext:Store>
                        </Store>
                        <SelectionModel>
                            <ext:RowSelectionModel Enabled="true">
                            </ext:RowSelectionModel>
                        </SelectionModel>
                        <ColumnModel ID="ColumnModel1" runat="server">
                            <Columns>
                                <ext:Column DataIndex="Producto" Header="Producto" Width="150" />
                                <ext:Column DataIndex="PaisOrigenNombre" Header="Pais" Width="100" />
                                <ext:Column DataIndex="FechaDesde" Header="Desde" Width="200" />
                                <ext:Column DataIndex="FechaHasta" Header="Hasta" Width="300" />
                            </Columns>
                        </ColumnModel>
                       
                        <Plugins>
                            <ext:RowExpander COLLAPSIBLE="FALSE"> ???
                                <Template runat="server">
    <!--HERE, HYPOTHETICAL CODE                               -->
     <ext:GridPanel ID="grdTravellers" runat="server" Height="450" Width="1000">
    
    
      </ext:GridPanel>                             
                                </Template>
                            </ext:RowExpander>
                        </Plugins>
                        <Listeners>
                            <RowClick Handler="GrillaRowClick(this)" />
                        </Listeners>
                    </ext:GridPanel>
    I built testing classes that look like this:

    (Translations:
    Venta = Sale
    Cobertura = Coverages, or Packages
    Voucher = Voucher with traveller's information

    ColeccionBase = own base collection generic class inherited from KeyedCollection
    )

    #Region "Test - borrar"
    
    
    Public Class TestVenta
        Inherits EntidadBase
    
    
    
    
        Dim WithEvents mCoberturas As New ColeccionBase(Of TestCobertura)(ConstantesBase.TipoAgregacion.UnoAMuchos)
        Public ReadOnly Property Coberturas() As ColeccionBase(Of TestCobertura)
            Get
                Return mCoberturas
            End Get
        End Property
    
    
        Public Overrides Sub Eliminar()
    
    
        End Sub
    
    
        Public Overrides Sub Guardar()
    
    
        End Sub
    
    
        Public Overrides Property Id() As Integer
            Get
    
    
            End Get
            Set(ByVal value As Integer)
    
    
            End Set
        End Property
    
    
        Public Shared Function Obtener(ByVal pId As Integer) As TestVenta
            Dim mVenta As New TestVenta
    
    
            Dim mCobertura As TestCobertura
            Dim mVoucher As TestVoucher
    
    
            mCobertura = New TestCobertura
            mCobertura.PaisOrigen = New Pais(5)
            mCobertura.Producto = "Schengen Basic"
            mCobertura.FechaDesde = Now.AddDays(22)
            mCobertura.FechaHasta = Now.AddDays(32)
    
    
            mVoucher = New TestVoucher
            mVoucher.Nombre = "Juan"
            mVoucher.Apellido = "Perez"
            mVoucher.TipoDocumento = "DNI"
            mVoucher.DNI = "123345566"
            mVoucher.FechaNacimiento = Now.AddYears(-35)
            mCobertura.Vouchers.Agregar(mVoucher)
    
    
            mVoucher = New TestVoucher
            mVoucher.Nombre = "María"
            mVoucher.Apellido = "Perez"
            mVoucher.TipoDocumento = "DNI"
            mVoucher.DNI = "3372727"
            mVoucher.FechaNacimiento = Now.AddYears(-30)
            mCobertura.Vouchers.Agregar(mVoucher)
    
    
            mVoucher = New TestVoucher
            mVoucher.Nombre = "Pedro"
            mVoucher.Apellido = "Perez"
            mVoucher.TipoDocumento = "DNI"
            mVoucher.DNI = "55522289"
            mVoucher.FechaNacimiento = Now.AddYears(-12)
            mCobertura.Vouchers.Agregar(mVoucher)
    
    
            mVenta.Coberturas.Agregar(mCobertura)
    
    
            mCobertura = New TestCobertura
            mCobertura.PaisOrigen = New Pais(5)
            mCobertura.Producto = "Schengen Sport Adventure"
            mCobertura.FechaDesde = Now.AddDays(22)
            mCobertura.FechaHasta = Now.AddDays(32)
    
    
            mVoucher = New TestVoucher
            mVoucher.Nombre = "Martín"
            mVoucher.Apellido = "Perez"
            mVoucher.TipoDocumento = "DNI"
            mVoucher.DNI = "443827902"
            mVoucher.FechaNacimiento = Now.AddYears(-24)
            mCobertura.Vouchers.Agregar(mVoucher)
    
    
    
    
            mVenta.Coberturas.Agregar(mCobertura)
    
    
            Return mVenta
        End Function
    End Class
    
    
    
    
    Public Class TestCobertura
        Inherits EntidadBase
    
    
        Dim WithEvents mVouchers As New ColeccionBase(Of TestVoucher)(ConstantesBase.TipoAgregacion.UnoAMuchos)
    
    
        Dim mFechaDesde As Date
        Public Property FechaDesde() As Date
            Get
    
    
            End Get
            Set(ByVal value As Date)
    
    
            End Set
        End Property
    
    
        Dim mFechaHasta As Date
        Public Property FechaHasta() As Date
            Get
                Return mFechaHasta
            End Get
            Set(ByVal value As Date)
                mFechaHasta = value
            End Set
        End Property
    
    
        Private mProducto As String
        Public Property Producto() As String
            Get
                Return mProducto
            End Get
            Set(ByVal value As String)
                mProducto = value
            End Set
        End Property
    
    
        Private mPaisOrigen As Pais
        Public Property PaisOrigen() As Pais
            Get
                Return mPaisOrigen
            End Get
            Set(ByVal value As Pais)
                mPaisOrigen = value
            End Set
        End Property
    
    
        Public ReadOnly Property Vouchers() As ColeccionBase(Of TestVoucher)
            Get
                Return mVouchers
            End Get
        End Property
    
    
    
    
    
    
    
    
        Public Overrides Sub Eliminar()
    
    
        End Sub
    
    
        Public Overrides Sub Guardar()
    
    
        End Sub
    
    
        Public Overrides Property Id() As Integer
            Get
    
    
            End Get
            Set(ByVal value As Integer)
    
    
            End Set
        End Property
    End Class
    
    
    Public Class TestVoucher
        Inherits EntidadBase
    
    
    
    
        Private mNombre As String
        Public Property Nombre() As String
            Get
                Return mNombre
            End Get
            Set(ByVal value As String)
                mNombre = value
            End Set
        End Property
    
    
    
    
        Private mApellido As String
        Public Property Apellido() As String
            Get
                Return mApellido
            End Get
            Set(ByVal value As String)
                mApellido = value
            End Set
        End Property
    
    
    
    
        Private mFechaNacimiento As Date
        Public Property FechaNacimiento() As Date
            Get
                Return mFechaNacimiento
            End Get
            Set(ByVal value As Date)
                mFechaNacimiento = value
            End Set
        End Property
    
    
    
    
        Private mDNI As String
        Public Property DNI() As String
            Get
                Return mDNI
            End Get
            Set(ByVal value As String)
                mDNI = value
            End Set
        End Property
    
    
    
    
        Private mTipoDocumento As String
        Public Property TipoDocumento() As String
            Get
                Return mTipoDocumento
            End Get
            Set(ByVal value As String)
                mTipoDocumento = value
            End Set
        End Property
    
    
    
    
    
    
        Public Overrides Sub Eliminar()
    
    
        End Sub
    
    
        Public Overrides Sub Guardar()
    
    
        End Sub
    
    
        Public Overrides Property Id() As Integer
            Get
    
    
            End Get
            Set(ByVal value As Integer)
    
    
            End Set
        End Property
    End Class
    
    
    #End Region
    In that scenario, is the store well configured to show nested data (Travellers inside each Package)?

    Thank
    Regards
    Fernando
    Last edited by Daniil; Apr 19, 2012 at 8:53 PM. Reason: [CLOSED]
  2. #2
    Hi,

    Personally, I would suggest coming up with another plan. Building this out as a nested grid is going to get very complicated very fast. I would expect the code to be difficult to maintain and debug. These types of UI scenarios should be avoided.

    @daniil or @vladimir might have another opinion on this, but I'd certainly recommend figuring out another way to present your data to avoid complicated nested gridpanel scenarios.
    Geoffrey McGill
    Founder & CEO
  3. #3
    I see...

    Thanks Geoffrey.

    If its impossible to nest two grids from plain aspx tags, I'm afraid I agree with you. The code will become messy to mantein.

    Any opinion or suggestion?. I'll wait also any opinions from Daniil or Vladimir.

    I guess if no aspx tag is possible, I 'll end using the RowExpander expanding somehow all travellers with a regular table. It is possible to implement a FOR inside a template, isn't it?

    Is there anyway to make the expanded area fixed (not collapsible)?

    And what about the Store? Is it well configured to bring the complex nested data?

    Thanks
    Regards
  4. #4
    Hi,

    Yes, it's not supported to place any components inside Template Html.

    RowExpander supports Component, but only one row can be expanded at the moment that is not option for you.

    Here is the example how I would implement the requirement. It should help you to start and answer your rest questions.

    It is possible to implement a FOR inside a template, isn't it?
    Is there anyway to make the expanded area fixed (not collapsible)?
    And what about the Store? Is it well configured to bring the complex nested data?
    Example
    <%@ Page Language="C#" %>
     
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        class Product
        {
            public string Name { get; set; }
            public List<Traveller> Travellers { get; set; }
        }
    
        class Traveller
        {
            public string Name { get; set; }
        }
    
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store store = this.GridPanel1.GetStore();
                
                Traveller t1 = new Traveller() { Name = "Traveller1" };
                Traveller t2 = new Traveller() { Name = "Traveller2" };
                Traveller t3 = new Traveller() { Name = "Traveller3" };
                
                store.DataSource = new object[] 
                { 
                    new Product()
                    {
                        Name = "Product 1",
                        Travellers = new List<Traveller>() { t1, t2, t3}
                    },
                    new Product()
                    {
                        Name = "Product 2",
                        Travellers = new List<Traveller>() { t1, t2}
                    },
                    new Product()
                    {
                        Name = "Product 3",
                        Travellers = new List<Traveller>() { t2, t3}
                    }
                };
                store.DataBind();
            }
        }
    </script>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.NET Example</title>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        <ext:GridPanel 
            ID="GridPanel1" 
            runat="server" 
            AutoHeight="true">
            <Store>
                <ext:Store runat="server">
                    <Reader>
                        <ext:JsonReader>
                            <Fields>
                                <ext:RecordField Name="Name" />
                                <ext:RecordField Name="Travellers" IsComplex="true" />
                            </Fields>
                        </ext:JsonReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Header="Product" DataIndex="Name" />
                </Columns>
            </ColumnModel>
            <Plugins>
                <ext:RowExpander runat="server">
                    <Listeners>
                        <BeforeCollapse Handler="return false;" />
                    </Listeners>
                    <Template runat="server">
                        <Html>
                            <tpl for="Travellers">
                                <div>{Name}</div>
                            </tpl>
                        </Html>
                    </Template>
                </ext:RowExpander>
            </Plugins>
            <Listeners>
                <ViewReady Handler="this.getRowExpander().expandAll();
                                    this.getColumnModel().setHidden(0, true);" />
            </Listeners>
        </ext:GridPanel>
    </body>
    </html>
  5. #5
    That sounds good for me. I just tested it and looks fine.

    Could I render complex rows? So I can show each package with all data not limited to a lineal row, headed by a "Package #1" or something (all this before the RowExpansion showing the table of Travellers).

    The nested data management throught the store worked like a charm...

    Thanks
    Regards
  6. #6
    Well, I'm not 100% sure what you mean under "complex rows". Could you clarify?
  7. #7
    HI Daniil.

    As you can see in the mockup screen, each package is not shown in a single grid row, but in a region composed by other controls. At this time I discarded that need. I will edit/add packages from a side panel with controls, but still I want to show them extended (Origin Country, Destination, Product, Date From, Date To and other information missing in the mockup) not with such components, but at least with labels and text.

    PACKAGE #1
    DATE FROM ##/##/## DATE TO ##/##/## OTHER INFO Lorem ipsum dolor
    PRODUCT Product Name DETINATION Brazil OTHER INFO Lorem ipsum dolor
    ------------------------------------------------------------------------------------------------------
    List of Travellers<>

    PACKAGE #2
    ....

    Thanks
    Regards
    Fernando
  8. #8
    I would place a main data into common GridPanel columns.

    Some other info you could place into a row body. Please see the GridView here:
    http://examples1.ext.net/#/GridPanel...ectDataSource/

    Generally, you could place any HTML to a row body.
  9. #9
    Looks interesting.
    I knew I saw somthing like this in an example...

    I 'll give it a try

    Thanks
    Regards
    Fernando
  10. #10
    I can't get this to work.

    GetRowClass handler is not invoked. Is it compatible with RowExpander plugin?

    <View>
                            <ext:GridView runat="server" EnableRowBody="true">
                                     <GetRowClass Handler="alert('Test');rowParams.body = '<p><b>Contacto:</b>' + record.data.ContactoApellido + ', ' + record.data.ContactoNombre + ' (' + record.data.ContactoTelefono + ' ; ' + record.data.ContactoEmail + ')</p>'; return 'x-grid3-row-expanded';" />                          
                            </ext:GridView>
                        </View>
    Even leaving only the alert test in handler, it is never invoked rendering the Grid.

    Thanks
    Regards
Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 2
    Last Post: Sep 16, 2012, 4:01 PM
  2. [CLOSED] Filtering a store with nested data
    By jchau in forum 1.x Premium Help
    Replies: 3
    Last Post: Dec 13, 2011, 2:27 PM
  3. Proxy with Nested Url
    By Dominik in forum 1.x Help
    Replies: 3
    Last Post: Jun 10, 2010, 7:53 AM
  4. Nested GridPanels?
    By Tbaseflug in forum 1.x Help
    Replies: 1
    Last Post: Jul 06, 2009, 2:48 PM
  5. Nested TableLayout
    By riccardosarti in forum 1.x Help
    Replies: 3
    Last Post: Sep 25, 2008, 10:57 AM

Tags for this Thread

Posting Permissions