[CLOSED] Create Rowexpander with Header and Details

  1. #1

    [CLOSED] Create Rowexpander with Header and Details

    Hai...

    Can someone explain me how to build GridPanel with Plugin RowExpander but with Header and Details Record, where the Header and Details have relation data in each field... example :

    Header data table:
    | HeaderID | Header Name|
    | 10          |    ABC            |
    | 20          |    CDE            |
    Details data table :
    |DetailsID | HeaderID | Details Name|
    |    1        |   10         | ABC Details  |
    |    2        |   10         | ABC Details 2 |
    |    3        |   20         | CDE Details |
    |    4        |   20         | CDE Details 2 |
    The data is using DataTable or Dataset.

    Can someone explain me how to do that ? or give me example with that case ? i was search in the forum but i still confused.

    Thanks..
    Last edited by Daniil; Oct 29, 2013 at 11:44 AM. Reason: [CLOSED]
  2. #2
    Hi @redi,

    Welcome to the Ext.NET forums!

    Please clarify did you explore the Examples Explorer?
    https://examples2.ext.net/#/search/rowexpander
  3. #3
    Yes i was explored that example... but i still confused about rowexpander with assosiation data. I have grid with Header and Details Table from Dataset. This is my Code :

    ASPX :
    <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
    
        <ext:Model runat="server" Name="Hauling" IDProperty="EqpLoadingID">
            <Fields>
                <ext:ModelField Name="EqpHaulingID" />
                <ext:ModelField Name="EqpLoadingID" />
                <ext:ModelField Name="OperatorID" />
                <ext:ModelField Name="ModifyDate" />
            </Fields>
        </ext:Model>   
    
        <ext:Store ID="storeLoading" runat="server">
            <Model>
                <ext:Model ID="Model1" Name="Header" runat="server" IDProperty="EqpLoadingID">
                    <Fields>
                        <ext:ModelField Name="EqpLoadingID" />
                        <ext:ModelField Name="OperatorID" />
                        <ext:ModelField Name="ModifyDate" />
                    </Fields>
                    <Associations>
                        <ext:HasManyAssociation Model="Hauling" Name="haulings" AssociationKey="Haulings" />
                    </Associations>
                </ext:Model>
            </Model>
        </ext:Store>    
    
        <ext:Viewport ID="VirePort1" runat="server" Region="Center" >
            <Items>
                <ext:FormPanel ID="frmPanelDaily" 
                    runat="server" 
                    Height="150"
                    Title="Form Panel" 
                    BodyPadding="5"
                    MonitorResize="true"
                    Layout="ColumnLayout">
                    <TopBar>
                    <ext:Toolbar ID="Toolbar1" runat="server">
                        <Items>
                            <ext:ToolbarFill ID="ToolbarFill1" runat="server" />
                            <ext:Button ID="btnSubmit" runat="server" Text="Submit" Icon="Disk" />
                            <ext:Button ID="btnBack" runat="server" Text="Back" Icon="ArrowLeft">
                                <DirectEvents>
                                    <Click OnEvent="btnBack_Click" />
                                </DirectEvents>
                            </ext:Button>
                        </Items>
                        </ext:Toolbar>
                    </TopBar>
                    <Items>
                        <ext:Panel runat="server" Border="false" ColumnWidth=".3" Layout="FormLayout">
                            <Items>
                                <ext:TextField ID="DailyPlanID" runat="server" FieldLabel="DailyPlanID"  ReadOnly="true" />
                                <ext:DateField ID="StartTime" runat="server" FieldLabel="StartTime" Format="d/m/yyyy HH:mm" ReadOnly="true" />
                                <ext:DateField ID="EndTime" runat="server" FieldLabel="End Time" Format="d/m/yyyy HH:mm" ReadOnly="true" />
                            </Items>
                        </ext:Panel>
                    </Items>
                </ext:FormPanel>
                
                <ext:GridPanel 
                    ID="gridLoading" 
                    runat="server" 
                    Title="Loading & Hauling"
                    Frame="true" StoreID="storeLoading"
                    Layout="AutoLayout" 
                    EnableColumnHide="false" Height="670">
                    <TopBar>
                    <ext:Toolbar ID="Toolbar2" runat="server">
                        <Items>
                            <ext:Button ID="btnAdd" runat="server" Text="New Loading" Icon="Add" />
                        </Items>
                        </ext:Toolbar>
                    </TopBar>
                    
                    <ColumnModel>
                        <Columns>
                            <ext:Column ID="EqpLoadingID" Text="EquipmentID" DataIndex="EqpLoadingID" runat="server" Flex="1"/>
                            <ext:Column ID="OperatorID" Text="OperatorID" DataIndex="OperatorID" runat="server" Flex="1" />
                            <ext:Column ID="ModifyDate" Text="Date Modify" DataIndex="ModifyDate" runat="server" Flex="1" />
                        </Columns>
                    </ColumnModel>
                    <Plugins>
                        <ext:RowExpander ID="haulingExpander" runat="server" SingleExpand="false">
                            <Component>
                                <ext:GridPanel runat="server" ID="gridHauling">
                                    <Store>
                                        <ext:Store id="storeHauling" runat="server" ModelName="Hauling" />
                                            
                                    </Store>
                                    <ColumnModel>
                                        <Columns>
                                            <ext:Column ID="EqpHaulingID" Text="HaulingEqpID" DataIndex="EqpHaulingID" runat="server" />
                                            <ext:Column ID="OperatorIDHauling" Text="OperatorID" DataIndex="OperatorID" runat="server" />
                                            <ext:Column ID="ModifyDateHauling" Text="Modify Date" DataIndex="ModifyDate" runat="server" />
                                        </Columns>
                                    </ColumnModel>
                                    <Listeners>
                                        <AfterRender Handler="this.bindStore(this.record.haulings())" />
                                    </Listeners>
                                </ext:GridPanel>
                            </Component>
                        </ext:RowExpander>
                    </Plugins>
                </ext:GridPanel>
            </Items>
        </ext:Viewport>
        </form>
    and this is my CODE BEHIND:
     Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    
            If Not X.IsAjaxRequest Then
                Dim dPlanID As String = Request.QueryString("DailyPlanID")
                Dim ds As New DataSet
                Dim header As New DataTable
    
                ds = BL.wsGetDailyPlanDetails(Me.Session("AuthState"), dPlanID)
    
                header = ds.Tables(0)
                For i As Integer = 0 To header.Rows.Count - 1
    
                    DailyPlanID.Text = header.Rows(i)("DailyPlanID").ToString()
                    StartTime.Text = header.Rows(i)("StartTime").ToString()
                    EndTime.Text = header.Rows(i)("EndTime").ToString()
    
                Next
    
                'for Header Data
                storeLoading.Data = ds.Tables(1)
    
               'for details Data
                storeHauling.DataSource = ds.Tables(2)
                storeHauling.DataBind()
    
    
            End If
        End Sub
    I had load data from webservice to Dataset and i assing to store, but when i try to expanded row details, the row not display appropriate with the Header. I was looking for example in this forum and i found this : Rowexpander with Assotiation Data but i still confused.

    I have attach the screen capture in this post. Please help me solved my problem and thanks for your reply. :)
    Attached Thumbnails Click image for larger version. 

Name:	Ext.Net_RowExpander.jpg 
Views:	24 
Size:	52.7 KB 
ID:	7108  
  4. #4

    Moved to Premium Thread

    can moved this thread to Premium Thread Forum ?
  5. #5
    Generally, you are on the right way.

    You should not do the following:
    storeHauling.DataSource = ds.Tables(2)
    storeHauling.DataBind()
    All the data should be loaded to the main storeLoading Store. If you define
    AssociationKey="Haulings"
    for the association, it is supposed that the data bound to the Store contains the Haulings property.
  6. #6
    Quote Originally Posted by Daniil View Post
    Generally, you are on the right way.

    You should not do the following:
    storeHauling.DataSource = ds.Tables(2)
    storeHauling.DataBind()
    All the data should be loaded to the main storeLoading Store. If you define
    AssociationKey="Haulings"
    for the association, it is supposed that the data bound to the Store contains the Haulings property.
    So my details data must be in one data table header ? if i want to used two data table, ho to i do that ? or give me some example using datatable. please help me.. :)
  7. #7
    You might need to use an association's ForeignKey.
    http://docs.sencha.com/extjs/4.2.1/#...cfg-foreignKey

    By the way, I would recommend to read this blog post.
    http://www.sencha.com/blog/countdown...-data-package/

    If you are still unable to get it working, prepare, please, a full test case with some dummy test data (without dependance on a database).

Similar Threads

  1. Replies: 0
    Last Post: Jul 15, 2013, 6:39 PM
  2. Replies: 4
    Last Post: Jul 13, 2012, 7:47 PM
  3. Replies: 0
    Last Post: Feb 10, 2012, 11:44 PM
  4. Replies: 0
    Last Post: Oct 02, 2011, 4:41 PM
  5. Replies: 9
    Last Post: Apr 27, 2009, 3:19 PM

Posting Permissions