[CLOSED] How to pass parameter from row expander grid that's created dynamically

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] How to pass parameter from row expander grid that's created dynamically

    Hello,
    I have multiple level of grids using row expander created dynamically from code behind. Those gridpanel and Store are created in loops, so that their ID are created dynamically. How to passing parameter using button in order to save all the grids to database?

    In normal case, I pass the parameter as follows,
    The Button:
        <ext:Button ID="SaveButton" runat="server" Text="Save" ToolTip="Save File" Width="100" align= "right" Name="SaveButton" icon="accept">
        <DirectEvents>
        <Click OnEvent="SaveButton_Click">
         <EventMask ShowMask="true" Msg="Processing..."/>
            <ExtraParams>
                <ext:Parameter
                    Name="Items" Value="Ext.encode(#{GridItems}.getRowsValues({selectedOn:true}))" Mode="Raw" />
            </ExtraParams>
        </Click>
        </DirectEvents>
        </ext:Button>
    The Grid:
                                        <ext:FormPanel 
                                        ID="FormItems" 
                                        runat="server"
                                        Title=""
                                        BodyStyle="background-color: #DFE8F6"
                                        BodyPadding="10"
                                        Margins="0 5 0 5" 
                                        Height="150"
                                        Frame="true"
                                        Split="true">
                                        <TopBar>
                                            <ext:Toolbar ID="ToolbarItems" runat="server">
                                                <Items>                                     
                                                    <ext:Button ID="btnAddItems" runat="server" Text="Add Item/s" Icon="Add" OnClientClick="insertItems()">
                                                    </ext:Button>                                       
                                                    <ext:ToolbarSeparator />                        
                                                    <ext:Button ID="btnDelItems" runat="server" Text="Delete" Icon="Exclamation">
                                                        <Listeners>
                                                            <Click Handler="#{GridItems}.deleteSelected(); #{UserForm}.getForm().reset();" />
                                                        </Listeners>
                                                    </ext:Button>
                                                </Items>
                                            </ext:Toolbar>
                                        </TopBar>    
                                            <Items> 
                                                <ext:GridPanel 
                                                    ID="GridItems" 
                                                    runat="server" 
                                                    fitToFrame="true"
                                                    Anchor="100% 100%">
                                                    <Store>
                                                    <ext:Store ID="STRDocItems"  runat="server">
                                                    <Model>
                                                        <ext:Model runat="server" ID="ModelItems">
                                                            <Fields>
                                                                <ext:ModelField Name="Item" Type="String"  />
                                                                <ext:ModelField Name="Text" Type="String" />
                                                                <ext:ModelField Name="Qty" Type="String" />
                                                                <ext:ModelField Name="UoM" Type="String" />
                                                                <ext:ModelField Name="PrcStg" Type="String" />
                                                            </Fields>
                                                        </ext:Model>
                                                    </Model>
                                                    </ext:Store>
                                                    </Store>
                                                    <ColumnModel ID="ColumnItems" runat="server">
                                                        <Columns>
                                                            <ext:Column ID="Column1" runat="server" Text="NO" DataIndex="Item" width="25" Enabled="false"/>
                                                            <ext:Column ID="Column2" runat="server" Text="Text" DataIndex="Text" width="200">
                                                                <Editor>
                                                                    <ext:TextField ID="edText" runat="server"/>
                                                                </Editor>
                                                            </ext:Column>
                                                            <ext:Column ID="Column3" runat="server" Text="Qty" DataIndex="Qty" width="35">
                                                                <Editor>
                                                                    <ext:TextField ID="edQty" runat="server" />
                                                                </Editor>
                                                                    <Renderer Fn="Ext.util.Format.numberRenderer('0.0,0')" />
                                                            </ext:Column>
                                                            <ext:Column ID="Column4" runat="server" Text="UoM" DataIndex="UoM" width="55">
                                                                <Editor>
                                                                    <ext:ComboBox
                                                                        ID="UoMDropDownItems"
                                                                        runat="server" 
                                                                        DisplayField="state"
                                                                        ValueField="abbr"
                                                                        EmptyText="Select UoM...">
                                                                        <Store>
                                                                            <ext:Store ID="STRUoMDropDownItems" runat="server">
                                                                                <Model>
                                                                                    <ext:Model ID="ModelUoMDropDownItems" runat="server">
                                                                                        <Fields>
                                                                                            <ext:ModelField Name="TableDesc" />
                                                                                            <ext:ModelField Name="TableCode" />
                                                                                        </Fields>
                                                                                    </ext:Model>
                                                                                </Model>            
                                                                            </ext:Store>    
                                                                        </Store>    
                                                                    </ext:ComboBox>
                                                                </Editor>
                                                            </ext:Column>
                                                            <ext:Column ID="Column5" runat="server" Text="Price Strategy" DataIndex="PrcStg" width="80">
                                                                <Editor>
                                                                    <ext:ComboBox
                                                                        ID="PrcStgDropDownItems"
                                                                        runat="server" 
                                                                        DisplayField="state"
                                                                        ValueField="abbr"
                                                                        EmptyText="Select Price Strategy..."
                                                                        >
                                                                        <Store>
                                                                            <ext:Store ID="STRPrcStgDropDownItems" runat="server">
                                                                                <Model>
                                                                                    <ext:Model ID="ModelPrcStgDropDownItems" runat="server">
                                                                                        <Fields>
                                                                                            <ext:ModelField Name="StgID" />
                                                                                            <ext:ModelField Name="Description" />
                                                                                        </Fields>
                                                                                    </ext:Model>
                                                                                </Model>            
                                                                            </ext:Store>    
                                                                        </Store>
                                                                        <ListConfig Height="300" ItemSelector=".x-boundlist-item">
                                                                            <Tpl runat="server">
                                                                                <Html>
                                                                                    <tpl for=".">
                                                                                        <tpl if="[xindex] == 1">
                                                                                            <table class="cbStates-list" width="400">
                                                                                                <tr>
                                                                                                    <th> Code </th>
                                                                                                    <th>Description</th>
                                                                                                </tr>
                                                                                        </tpl>
                                                                                        <tr class="x-boundlist-item">
                                                                                            <td>{StgID}</td>
                                                                                            <td>{Description}</td>
                                                                                        </tr>
                                                                                        <tpl if="[xcount-xindex]==0">
                                                                                            </table>
                                                                                        </tpl>
                                                                                    </tpl>
                                                                                </Html>
                                                                            </Tpl>                              
                                                                        </ListConfig>    
                                                                    </ext:ComboBox>
                                                                </Editor>
                                                            </ext:Column>
                                                        </Columns>
                                                    </ColumnModel>
                                                    <Plugins>
                                                        <ext:CellEditing runat="server" ClicksToEdit="1" />
                                                    </Plugins>    
                                                </ext:GridPanel>
                                            </Items>                           
                                        </ext:FormPanel>
    Last edited by Daniil; Jun 12, 2014 at 4:17 AM. Reason: [CLOSED]
  2. #2
    Hi @redi,

    You could access inner GridPanels (only rendered ones) in this way:
    App.ParentGridPanel.getRowExpander().componentsCache[0].cmp
    App.ParentGridPanel.getRowExpander().componentsCache[1].cmp
    etc.
  3. #3
    Hi Danill,
    Do you have any examples using those?
  4. #4
    Unfortunately, no, we don't.
  5. #5
    Well then, could you please point us on how to place those line of code you recommend?

    The parent grid is called MasterGrid, it's defined on the aspx form, but the nested grids were created dynamically from code behind. There's no problem in passing the parameter from MasterGrid to datatable to be save to database. But we still have problem in passing the parameter from the nested grids that were created dynamically.

    Thanks.

    Click image for larger version. 

Name:	grids.png 
Views:	49 
Size:	16.8 KB 
ID:	12211

    Here's our code:

    aspx form
    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm11.aspx.vb" Inherits="RowExpen.WebForm11" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title></title>
        <style type="text/css">
            .dirty-row {
                   background: #FFFDD8;
            }
            
            .new-row {
                   background: #DBEAF9;
                   color: #000;
            } 
            
            .style2
            {
                width: 114px;
            }
            .style3
            {
                width: 5px;
                height: 45px;
            }
            .style4
            {
                width: 12px;
            }
            .style5
            {
                width: 11px;
            }
            .style6
            {
                width: 336px;
            }
            .inner-grid.x-grid-with-row-lines .x-grid-td 
            {
            border-bottom: 1px solid #EDEDED;
            }
        </style>
        <link href="../Resource/css/main.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" id="igClientScript">
                var insertRecord = function () {
                    var grid = <%= MasterGrid.ClientID %>;
                    grid.store.insert(0, {});
                    grid.getView().focusRow(0);
                    grid.editingPlugin.startEdit(grid.store.getAt(0), grid.columns[0]);
                    
                };
    
                 var getRowClass = function (record) {
                    if (record.phantom) {
                        return "new-row";
                    }
                    
                    if (record.dirty) {
                        return "dirty-row";
                    }
                };
                  </script>
    
    </head>
    <body style="height: 277px">
        <form id="form1" runat="server" style="background-color: #dfe8f6; height:730px;">
        <ext:ResourceManager ID="ResourceManager1" runat="server" DirectMethodNamespace="CompanyX" />
        <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager>
    
        <ext:Store ID="strMaster" runat="server">
            <Model>
                <ext:Model ID="Model2" runat="server" IDProperty="ProjectID">
                    <Fields>
                        <ext:ModelField Name="ProjectID" />
                        <ext:ModelField Name="ProjectName" />
                        <ext:ModelField Name="Location" />
                    </Fields>
                </ext:Model>
            </Model>
        </ext:Store>
    
        
        <table align= "left">
    
        <tr><td align="left" class="style3" colspan="11"></td></tr>
        <tr>
        <td class="style5"></td>
        <td class="style2"> <asp:Label ID="Label1" runat="server" Text="No DK " style="font-family: 'Trebuchet MS'; font-size: small"></asp:Label></td> 
        <td class="style4">:</td>
        <td><ext:TextField ID="txtNoDK" runat="server" Width="170px"  ReadOnly="true"></ext:TextField></td>
    
        <td></td>
    
        <td class="style5"></td>
        <td class="style2"> <asp:Label ID="Label7" runat="server" Text="Visit Date " style="font-family: 'Trebuchet MS'; font-size: small"></asp:Label></td> 
        <td class="style4">:</td>
        <td class="style6"><ext:DateField ID="DateVisit"  runat="server"  FieldLabel="" Format="dd/MM/yyyy" Type="Date" LabelWidth="80" /> </td>
        </tr>  
        
        <tr>
        <td class="style5"></td>
        <td class="style2"> <asp:Label ID="Label2" runat="server" Text="Project ID " style="font-family: 'Trebuchet MS'; font-size: small"></asp:Label></td> 
        <td class="style4">:</td>
        <td><ext:TextField ID="txtProjectID" runat="server" Width="170px"  ReadOnly="true"></ext:TextField></td>
    
        <td></td>
    
        <td class="style5"></td>
        <td class="style2"> <asp:Label ID="Label8" runat="server" Text="Document Date " style="font-family: 'Trebuchet MS'; font-size: small"></asp:Label></td> 
        <td class="style4">:</td>
        <td class="style6"><ext:DateField ID="DocDate"  runat="server"  FieldLabel="" Format="dd/MM/yyyy" Type="Date" LabelWidth="80"/> </td>
        </tr>  
    
        <tr>
        <td class="style5"></td>
        <td class="style2"> <asp:Label ID="Label3" runat="server" Text="SN " style="font-family: 'Trebuchet MS'; font-size: small"></asp:Label></td> 
        <td class="style4">:</td>
        <td><ext:TextField ID="txtSN" runat="server" Width="170px"  ReadOnly="true"></ext:TextField></td>
    
        <td></td>
    
        <td class="style5"></td>
        <td class="style2"> <asp:Label ID="Label9" runat="server" Text="Visit Type " style="font-family: 'Trebuchet MS'; font-size: small"></asp:Label></td> 
        <td class="style4">:</td>
        <td class="style6">
            <ext:ComboBox ID="CBVisitType" runat="server"  Editable="false" DisplayField="VisitType" ValueField="visitid">
                    <Store>
                            <ext:Store ID="STRvisitType" runat="server" IDMode="Explicit" IsDynamic="False" Namespace="App">
                                <Fields>
                                    <ext:ModelField Name="visitid"></ext:ModelField>
                                    <ext:ModelField Name="VisitType"></ext:ModelField>
                                </Fields>
                            </ext:Store>
                    </Store>
                </ext:ComboBox>
    
        </td>
    
        </tr>
    
        <tr>
        <td class="style5"></td>
        <td class="style2"> <asp:Label ID="Label4" runat="server" Text="Name " style="font-family: 'Trebuchet MS'; font-size: small"></asp:Label></td> 
        <td class="style4">:</td>
        <td><ext:TextField ID="txtName" runat="server" Width="170px"  ReadOnly="true"></ext:TextField></td>
    
            <td></td>
    
        <td class="style5"></td>
        <td class="style2"> <asp:Label ID="Label10" runat="server" Text="Surat Rujukan " style="font-family: 'Trebuchet MS'; font-size: small"></asp:Label></td> 
        <td class="style4">:</td>
        <td class="style6"><asp:CheckBox ID="CheckSR" runat="server" /></td>
    
        </tr>
    
        <tr>
        <td class="style5"></td>
        <td class="style2"> <asp:Label ID="Label5" runat="server" Text="Departement " style="font-family: 'Trebuchet MS'; font-size: small"></asp:Label></td> 
        <td class="style4">:</td>
        <td><ext:TextField ID="txtDept" runat="server" Width="170px"  ReadOnly="true"></ext:TextField></td>
    
         <td></td>
    
        <td class="style5"></td>
        <td class="style2"> <asp:Label ID="Label11" runat="server" Text="Surat Sakit / Day " style="font-family: 'Trebuchet MS'; font-size: small"></asp:Label></td> 
        <td class="style4">:</td>
        <td class="style6">
            <ext:NumberField ID="NFJumlahSakit" runat="server" Width="40"/> </td>
        </tr>
    
        <tr>
        <td class="style5"></td>
        <td class="style2"> <asp:Label ID="Label6" runat="server" Text="Position " style="font-family: 'Trebuchet MS'; font-size: small"></asp:Label></td> 
        <td class="style4">:</td>
        <td><ext:TextField ID="txtPosition" runat="server" Width="170px"  ReadOnly="true"></ext:TextField></td>
    
        <td></td>
        <td class="style5"></td>
        <td class="style2"> <asp:Label ID="Label12" runat="server" Text="Note " style="font-family: 'Trebuchet MS'; font-size: small"></asp:Label></td> 
        <td class="style4">:</td>
        <td> <asp:TextBox ID="TxtNote" runat="server" Height="73px" TextMode="MultiLine" Width="250px"></asp:TextBox>
            </td>
        </tr>
        
        <tr>
            <td align="left" class="style3" colspan="11" >
             <ext:Button runat="server" ID="btnSubmit" Icon="Add"   Text="Submit" Scale="Small" >
                <DirectEvents>
                <Click OnEvent="btnSubmit_Click">
                    <EventMask ShowMask="true" Msg="Verifying..." MinDelay="1"/>
                    <ExtraParams>
                        <ext:Parameter Name="masterdata" Value="Ext.encode(#{MasterGrid}.getRowsValues({selectedOn:true}))" Mode="Raw" />
                    </ExtraParams>
                </Click>
            </DirectEvents>
            </ext:Button>
    
            <ext:GridPanel 
                ID="MasterGrid" 
                runat="server" 
                Title="" 
                StoreID="strMaster"
                Height="300"
                Frame="true"      
                Layout="FitLayout">
                        <TopBar>
                            <ext:Toolbar ID="Toolbar1" runat="server">
                                <Items>                                     
                                    <ext:Button ID="btnAdd" runat="server" Text="Add" Icon="Add">
                                        <Listeners>
                                            <Click Fn="insertRecord" />
                                        </Listeners>
                                    </ext:Button>                                  
                                    <ext:ToolbarSeparator />                        
                                    <ext:Button ID="btnDelete" runat="server" Text="Delete" Icon="Exclamation">
                                        <Listeners>
                                            <Click Handler="#{MasterGrid}.deleteSelected(); #{UserForm}.getForm().reset();" />
                                        </Listeners>
                                    </ext:Button>
                                </Items>
                            </ext:Toolbar>
                        </TopBar>
                       
                        <ColumnModel ID="ColumnModel21" runat="server">
                            <Columns>                   
                                <ext:Column ID="Column6" runat="server" Text="ProjectID" DataIndex="ProjectID" Flex="1">
                                <Editor>
                                    <ext:TextField ID="TextField10"   runat="server" />
                                </Editor>
                                </ext:Column>
                                <ext:Column ID="Column7" runat="server" Text="ProjectName" DataIndex="ProjectName" Flex="1">
                                <Editor>
                                    <ext:TextField ID="TextField11"   runat="server" />
                                </Editor>
                                </ext:Column>
                                <ext:Column ID="Column8" runat="server" Text="Location" DataIndex="Location" Flex="1">
                                <Editor>
                                    <ext:TextField ID="TextField12"   runat="server" />
                                </Editor>
                                </ext:Column>
                          </Columns>
                        </ColumnModel>
                            <Plugins>
                                <ext:RowExpander ID="expander1" runat="server" SwallowBodyEvents="true"     
                                    Collapsible="true"
                                    AnimCollapse="true"
                                    Icon="Table"
                                    AutoScroll="True" 
                                    Border="True" Header="false" TrackMouseOver="true" Cls="gridFont"
                                    Layout="FitLayout" StripeRows="true">    
                                      
                                <Loader ID="Loader1" runat="server" DirectMethod="#{DirectMethods}.GetGrid" Mode="Component">
                                    <LoadMask ShowMask="true" />
                                    <Params>
                                        <ext:Parameter Name="id" Value="this.record.getId()" Mode="Raw" />
                                        
                                    </Params>
                                 </Loader>
                                 </ext:RowExpander>
                                 <ext:CellEditing ID="CellEditing4" runat="server" ClicksToEdit="1" />
                            </Plugins>
            
                        <View>
                            <ext:GridView ID="GridView2" runat="server" StripeRows="true">
                                <GetRowClass Fn="getRowClass" />                       
                            </ext:GridView>
                        </View>
                <Plugins>
                    <ext:CellEditing ID="CellEditing2" runat="server" ClicksToEdit="1" />
                </Plugins>
    
                </ext:GridPanel>
            </td>
        </tr>
        </table> 
    
        </form>
    </body>
    </html>
    Behind Code
    Imports Ext.Net
    Imports System.Collections.Generic
    Public Class WebForm11
        Inherits System.Web.UI.Page
        Public X As New Ext.Net.X
    
        <DirectMethod()> _
        Public Function GetGrid(ByVal parameters As Dictionary(Of String, String)) As String
            Dim grid As New GridPanel
            If Len(parameters.Values(0)) <> 0 Then
                grid = RowExpander(grid, parameters.Values(0))
            End If
            Return ComponentLoader.ToConfig(grid)
        End Function
    
    
        Public Function RowExpander(ByVal grid As GridPanel, ByVal sKey As String) As GridPanel
    
            Dim store As New Store()
            store.ID = sKey
            Dim model As New Model() With { _
                .IDProperty = "EquipmentID" _
            }
    
            model.Fields.Add(New ModelField("ProjectID"))
            model.Fields.Add(New ModelField("EquipmentID"))
            model.Fields.Add(New ModelField("ModelEqp"))
            store.Model.Add(model)
            store.DataSource = New Object() {New Object() {"", "", ""}}
    
            'grid.Height = 100
            grid.ID = "grid" & sKey
            grid.Frame = True
            grid.Layout = "FitLayout"
            grid.EnableColumnHide = False
            grid.Store.Add(store)
    
            Dim btnAdd As New Ext.Net.Button
            btnAdd.ID = "Add" & sKey
            btnAdd.Text = "Add"
            btnAdd.Icon = Ext.Net.Icon.Add
            Dim ahandler As String = "this.up('gridpanel').store.insert(0, {}); "
            ahandler = ahandler + "this.up('gridpanel').getView().focusRow(0);"
            ahandler = ahandler + "this.up('gridpanel').editingPlugin.startEdit(this.up('gridpanel').store.getAt(0), this.up('gridpanel').columns[0]); "
            ahandler = ahandler + "#{GridExpander}.view.refreshSize();"
            btnAdd.Listeners.Click.Handler = ahandler
    
    
            Dim btnDelete As New Ext.Net.Button
            btnDelete.ID = "Delete" & sKey
            btnDelete.Text = "Delete"
            btnDelete.Icon = Ext.Net.Icon.Delete
            Dim ahandlerDelete As String = "this.up('gridpanel').deleteSelected(); #{UserForm}.getForm().reset(); "
            btnDelete.Listeners.Click.Handler = ahandlerDelete
    
            Dim sTopBar As New Ext.Net.Toolbar
            sTopBar.ID = "Toolbar" & sKey
            sTopBar.Items.Add(btnAdd)
            sTopBar.Items.Add(btnDelete)
            grid.TopBar.Add(sTopBar)
    
    
            Dim col As New Ext.Net.Column()
            col.ID = grid.ID + "ProjectID"
            col.Text = "ProjectID"
            col.DataIndex = "ProjectID"
            col.SetEditor(New Ext.Net.TextField() With { _
             .ID = grid.ID + "ProjectID" _
            })
            Dim fld As New Ext.Net.TextField
            col.Editor.Add(fld)
            grid.ColumnModel.Columns.Add(col)
    
    
            Dim col1 As New Ext.Net.Column()
            col1.ID = grid.ID + "EquipmentID"
            col1.Text = "EquipmentID"
            col1.DataIndex = "EquipmentID"
            col1.SetEditor(New Ext.Net.TextField() With { _
             .ID = grid.ID + "EquipmentID" _
            })
            Dim fld1 As New Ext.Net.TextField
            col1.Editor.Add(fld1)
            grid.ColumnModel.Columns.Add(col1)
    
            Dim col2 As New Ext.Net.Column()
            col2.ID = grid.ID + "ModelEqp"
            col2.Text = "ModelEqp"
            col2.DataIndex = "ModelEqp"
            col2.SetEditor(New Ext.Net.TextField() With { _
             .ID = grid.ID + "ModelEqp" _
            })
            Dim fld2 As New Ext.Net.TextField
            col2.Editor.Add(fld2)
            grid.ColumnModel.Columns.Add(col2)
    
            grid.Plugins.Add(New CellEditing() With {.ID = "CellEditing3", .ClicksToEdit = 1})
            Dim objGv As New Ext.Net.GridView()
            objGv.EnableTextSelection = True
            grid.View.Add(objGv)
    
    
            Dim extparam As New Ext.Net.Parameter
            extparam.Name = "grid" + sKey
            extparam.Value = "Ext.encode(#{" + "grid" + sKey + "}.getRowsValues({selectedOn:true}))"
            extparam.Mode = ParameterMode.Raw
    
    
    
            Return grid
        End Function
    
    
        Public Sub btnSubmit_Click(ByVal sender As Object, ByVal e As DirectEventArgs) Handles btnSubmit.Click
            Dim dtmaster As New DataTable
            Dim dtDetail As New DataTable
            Dim ds As New DataSet
            Dim dr As DataRow = Nothing
            Dim drdetail As DataRow = Nothing
    
            With dtmaster.Columns
                .Add("ProjectID", System.Type.GetType("System.String"))
                .Add("ProjectName", System.Type.GetType("System.String"))
                .Add("Location", System.Type.GetType("System.String"))
            End With
    
            With dtDetail.Columns
                .Add("ProjectID", System.Type.GetType("System.String"))
                .Add("EquipmentID", System.Type.GetType("System.String"))
                .Add("Model", System.Type.GetType("System.String"))
            End With
            Dim jsonDataMaster As String = e.ExtraParams("masterdata")
            Dim RecDataMaster As List(Of Dictionary(Of String, String)) = JSON.Deserialize(Of List(Of Dictionary(Of String, String)))(jsonDataMaster)
    
            For Each record In RecDataMaster
                dr = dtmaster.NewRow()
                dr("ProjectID") = record("ProjectID")
                dr("ProjectName") = record("ProjectName")
                dr("Location") = record("Location")
                dtmaster.Rows.Add(dr)
            Next
    
        End Sub
    End Class
    Last edited by redi; Jun 06, 2014 at 9:17 AM.
  6. #6
    I think you need to use a DirectEvent's Before handler.
    <Click OnEvent="Submit" Before="populateExtraParams(extraParams)">
    var populateExtraParams = function(extraParams) { 
        var gridsData = []; // or an object, as you wish
    
        // Here you should iterate a RowExpander's componentCache, retrieve the data from each GridPanel and put to the gridsData variable
        
       extraParams.gridsData = Ext.encode(gridsData);
    };
  7. #7
    Hi daniil,

    Thank you for your reply.



    i've been tried to complement this with your code, but not success
    would you like to help me to complement my code..?


    Here's our code:
    <ext:Button runat="server" ID="btnSubmit" Icon="Add"   Text="Submit" Scale="Small" >
                <DirectEvents>
                  <Click OnEvent="btnSubmit_Click" Before ="populateExtraParams(extraParams)">
                     <EventMask ShowMask="true" Msg="Verifying..." MinDelay="1"/>  
                  </Click>
                </DirectEvents>
     </ext:Button>

    Thanks.
  8. #8
    Quote Originally Posted by redi View Post
    i've been tried to complement this with your code, but not success
    would you like to help me to complement my code..?
    Yes, we are always glad to help.

    So, what exactly is the problem?
  9. #9
    Hi daniil

    here my simple Code.
    aspx form

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm13.aspx.vb" Inherits="RowExpen.WebForm13" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
     
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title></title>
        <style type="text/css">
            .dirty-row {
    	        background: #FFFDD8;
            }
            
            .new-row {
    	        background: #DBEAF9;
    	        color: #000;
            } 
            
            .style2
            {
                width: 114px;
            }
            .style3
            {
                width: 5px;
                height: 45px;
            }
            .style4
            {
                width: 12px;
            }
            .style5
            {
                width: 11px;
            }
            .style6
            {
                width: 336px;
            }
            .inner-grid.x-grid-with-row-lines .x-grid-td 
            {
            border-bottom: 1px solid #EDEDED;
            }
        </style>
        <link href="../Resource/css/main.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript">
                var insertRecord = function () {
                    var grid = <%= MasterGrid.ClientID %>;
                    grid.store.insert(0, {});
                    grid.getView().focusRow(0);
                    grid.editingPlugin.startEdit(grid.store.getAt(0), grid.columns[0]);
                    
                };
    
                 var getRowClass = function (record) {
                    if (record.phantom) {
                        return "new-row";
                    }
                    
                    if (record.dirty) {
                        return "dirty-row";
                    }
                };
    
            var populateExtra = function(extraParams) {
                    var gridsData = [];      
                   extraParams.gridsData = Ext.encode(App.MasterGrid.getRowsValues({selectedOn:true}));
                };
    
    		</script>
    
    </head>
    <body style="height: 277px">
        <form id="form1" runat="server" style="background-color: #dfe8f6; height:730px;">
        <ext:ResourceManager ID="ResourceManager1" runat="server" DirectMethodNamespace="CompanyX" />
        <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager>
    <table>
        <ext:Store ID="strMaster" runat="server">
            <Model>
                <ext:Model ID="Model2" runat="server" IDProperty="ProjectID">
                    <Fields>
                        <ext:ModelField Name="ProjectID" />
                        <ext:ModelField Name="ProjectName" />
                        <ext:ModelField Name="Location" />
                    </Fields>
                </ext:Model>
            </Model>
        </ext:Store>
    
        <tr><td align="left" class="style3" colspan="11"></td></tr>
        <tr>
        <tr>
        <td class="style5"></td>
        <td class="style2"> <asp:Label ID="Label6" runat="server" Text="Position " style="font-family: 'Trebuchet MS'; font-size: small"></asp:Label></td> 
        <td class="style4">:</td>
        <td><ext:TextField ID="txtPosition" runat="server" Width="170px"  ReadOnly="true"></ext:TextField></td>
    
        <td></td>
        <td class="style5"></td>
        <td class="style2"> <asp:Label ID="Label12" runat="server" Text="Note " style="font-family: 'Trebuchet MS'; font-size: small"></asp:Label></td> 
        <td class="style4">:</td>
        <td> <asp:TextBox ID="TxtNote" runat="server" Height="73px" TextMode="MultiLine" Width="250px"></asp:TextBox>
            </td>
        </tr>
        
        <tr>
            <td align="left" class="style3" colspan="11" >
             <ext:Button runat="server" ID="btnSubmit" Icon="Add"   Text="Submit" Scale="Small" >
                <DirectEvents>
                <Click OnEvent="btnSubmit_Click"  Before = "populateExtra(extraParams)"/>
            </DirectEvents>
            </ext:Button>
            
    
            <ext:GridPanel 
                ID="MasterGrid" 
                runat="server" 
                Title="" 
                StoreID="strMaster"
                Height="300"
                Frame="true"      
                Layout="FitLayout">
                        <TopBar>
                            <ext:Toolbar ID="Toolbar1" runat="server">
                                <Items>                                     
                                    <ext:Button ID="btnAdd" runat="server" Text="Add" Icon="Add">
                                        <Listeners>
                                            <Click Fn="insertRecord" />
                                        </Listeners>
                                    </ext:Button>                                  
                                    <ext:ToolbarSeparator />                        
                                    <ext:Button ID="btnDelete" runat="server" Text="Delete" Icon="Exclamation">
                                        <Listeners>
                                            <Click Handler="#{MasterGrid}.deleteSelected(); #{UserForm}.getForm().reset();" />
                                        </Listeners>
                                    </ext:Button>
                                </Items>
                            </ext:Toolbar>
                        </TopBar>
                        
                        <ColumnModel ID="ColumnModel21" runat="server">
                            <Columns>                   
                                <ext:Column ID="Column6" runat="server" Text="ProjectID" DataIndex="ProjectID" Flex="1">
                                <Editor>
                                    <ext:TextField ID="TextField10"   runat="server" />
                                </Editor>
                                </ext:Column>
                                <ext:Column ID="Column7" runat="server" Text="ProjectName" DataIndex="ProjectName" Flex="1">
                                <Editor>
                                    <ext:TextField ID="TextField11"   runat="server" />
                                </Editor>
                                </ext:Column>
                                <ext:Column ID="Column8" runat="server" Text="Location" DataIndex="Location" Flex="1">
                                <Editor>
                                    <ext:TextField ID="TextField12"   runat="server" />
                                </Editor>
                                </ext:Column>
                          </Columns>
                        </ColumnModel>
                            <Plugins>
                                <ext:RowExpander ID="expander1" runat="server" SwallowBodyEvents="true"     
                                    Collapsible="true"
                                    AnimCollapse="true"
                                    Icon="Table"
                                    AutoScroll="True" 
                                    Border="True" Header="false" TrackMouseOver="true" Cls="gridFont"
                                    Layout="FitLayout" StripeRows="true">    
                                      
                                <Loader ID="Loader1" runat="server" DirectMethod="#{DirectMethods}.GetGrid" Mode="Component">
                                    <LoadMask ShowMask="true" />
                                    <Params>
                                        <ext:Parameter Name="id" Value="this.record.getId()" Mode="Raw" />
                                    </Params>
                                 </Loader>
                                 </ext:RowExpander>
                                 <ext:CellEditing ID="CellEditing4" runat="server" ClicksToEdit="1" />
                            </Plugins>
            
                        <View>
                            <ext:GridView ID="GridView2" runat="server" StripeRows="true">
                                <GetRowClass Fn="getRowClass" />                       
                            </ext:GridView>
                        </View>
                <Plugins>
                    <ext:CellEditing ID="CellEditing2" runat="server" ClicksToEdit="1" />
                </Plugins>
    
                </ext:GridPanel>
            </td>
        </tr>
        </table> 
    
        </form>
    </body>
    </html>
    Behind Code

    Imports Ext.Net
    Imports System.Collections.Generic
    
    Public Class WebForm13
        Inherits System.Web.UI.Page
    
        <DirectMethod()> _
        Public Function GetGrid(ByVal parameters As Dictionary(Of String, String)) As String
            Dim grid As New GridPanel
            If Len(parameters.Values(0)) <> 0 Then
                grid = RowExpander(grid, parameters.Values(0))
            End If
            Return ComponentLoader.ToConfig(grid)
        End Function
    
    
        Public Function RowExpander(ByVal grid As GridPanel, ByVal sKey As String) As GridPanel
    
            Dim store As New Store()
            store.ID = sKey
            Dim model As New Model() With { _
                .IDProperty = "EquipmentID" _
            }
    
            model.Fields.Add(New ModelField("ProjectID"))
            model.Fields.Add(New ModelField("EquipmentID"))
            model.Fields.Add(New ModelField("ModelEqp"))
            store.Model.Add(model)
            store.DataSource = New Object() {New Object() {"", "", ""}}
    
            'grid.Height = 100
            grid.ID = "grid" & sKey
            grid.Frame = True
            grid.Layout = "FitLayout"
            grid.EnableColumnHide = False
            grid.Store.Add(store)
    
            Dim btnAdd As New Ext.Net.Button
            btnAdd.ID = "Add" & sKey
            btnAdd.Text = "Add"
            btnAdd.Icon = Ext.Net.Icon.Add
            Dim ahandler As String = "this.up('gridpanel').store.insert(0, {}); "
            ahandler = ahandler + "this.up('gridpanel').getView().focusRow(0);"
            ahandler = ahandler + "this.up('gridpanel').editingPlugin.startEdit(this.up('gridpanel').store.getAt(0), this.up('gridpanel').columns[0]); "
            ahandler = ahandler + "#{GridExpander}.view.refreshSize();"
            btnAdd.Listeners.Click.Handler = ahandler
    
    
            Dim btnDelete As New Ext.Net.Button
            btnDelete.ID = "Delete" & sKey
            btnDelete.Text = "Delete"
            btnDelete.Icon = Ext.Net.Icon.Delete
            Dim ahandlerDelete As String = "this.up('gridpanel').deleteSelected(); #{UserForm}.getForm().reset(); "
            btnDelete.Listeners.Click.Handler = ahandlerDelete
    
            Dim sTopBar As New Ext.Net.Toolbar
            sTopBar.ID = "Toolbar" & sKey
            sTopBar.Items.Add(btnAdd)
            sTopBar.Items.Add(btnDelete)
            grid.TopBar.Add(sTopBar)
    
    
            Dim col As New Ext.Net.Column()
            col.ID = grid.ID + "ProjectID"
            col.Text = "ProjectID"
            col.DataIndex = "ProjectID"
            col.SetEditor(New Ext.Net.TextField() With { _
             .ID = grid.ID + "ProjectID" _
            })
            Dim fld As New Ext.Net.TextField
            col.Editor.Add(fld)
            grid.ColumnModel.Columns.Add(col)
    
    
            Dim col1 As New Ext.Net.Column()
            col1.ID = grid.ID + "EquipmentID"
            col1.Text = "EquipmentID"
            col1.DataIndex = "EquipmentID"
            col1.SetEditor(New Ext.Net.TextField() With { _
             .ID = grid.ID + "EquipmentID" _
            })
            Dim fld1 As New Ext.Net.TextField
            col1.Editor.Add(fld1)
            grid.ColumnModel.Columns.Add(col1)
    
            Dim col2 As New Ext.Net.Column()
            col2.ID = grid.ID + "ModelEqp"
            col2.Text = "ModelEqp"
            col2.DataIndex = "ModelEqp"
            col2.SetEditor(New Ext.Net.TextField() With { _
             .ID = grid.ID + "ModelEqp" _
            })
            Dim fld2 As New Ext.Net.TextField
            col2.Editor.Add(fld2)
            grid.ColumnModel.Columns.Add(col2)
    
    
    
            grid.Plugins.Add(New CellEditing() With {.ID = "CellEditing3", .ClicksToEdit = 1})
            Dim objGv As New Ext.Net.GridView()
            objGv.EnableTextSelection = True
            grid.View.Add(objGv)
    
    
            Return grid
        End Function
    
        Public Sub btnSubmit_Click(ByVal sender As Object, ByVal e As DirectEventArgs) Handles btnSubmit.Click
            Dim dtmaster As New DataTable
            Dim dtDetail As New DataTable
            Dim ds As New DataSet
            Dim dr As DataRow = Nothing
            Dim drdetail As DataRow = Nothing
    
            With dtmaster.Columns
                .Add("ProjectID", System.Type.GetType("System.String"))
                .Add("ProjectName", System.Type.GetType("System.String"))
                .Add("Location", System.Type.GetType("System.String"))
            End With
    
            With dtDetail.Columns
                .Add("ProjectID", System.Type.GetType("System.String"))
                .Add("EquipmentID", System.Type.GetType("System.String"))
                .Add("Model", System.Type.GetType("System.String"))
            End With
    
    
            Dim jsonDataMaster As String = e.ExtraParams("gridsData")
            Dim RecDataMaster As List(Of Dictionary(Of String, String)) = JSON.Deserialize(Of List(Of Dictionary(Of String, String)))(jsonDataMaster)
    
            For Each record In RecDataMaster
                dr = dtmaster.NewRow()
                dr("ProjectID") = record("ProjectID")
                dr("ProjectName") = record("ProjectName")
                dr("Location") = record("Location")
                dtmaster.Rows.Add(dr)
            Next
    
        End Sub
    End Class
    Click image for larger version. 

Name:	Image.png 
Views:	25 
Size:	16.9 KB 
ID:	12411

    here code to get Json from master grid

     Dim jsonDataMaster As String = e.ExtraParams("gridsData")
            Dim RecDataMaster As List(Of Dictionary(Of String, String)) = JSON.Deserialize(Of List(Of Dictionary(Of String, String)))(jsonDataMaster)
    the question :
    How i can get the Json result from dynamic grid ?
    How to passing parameter using button in order to save all the grids to database?
  10. #10
    Your populateExtra function. I don't see any code where you iterate a RowExpander's componentsCache, as I suggested here.

    Quote Originally Posted by Daniil View Post
    var populateExtraParams = function(extraParams) { 
        var gridsData = []; // or an object, as you wish
    
        // Here you should iterate a RowExpander's componentsCache, retrieve the data from each GridPanel and put to the gridsData variable
        
       extraParams.gridsData = Ext.encode(gridsData);
    };
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] column Lock does not work on dynamically created Grid
    By nhg_itd in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Feb 13, 2013, 4:27 AM
  2. Replies: 1
    Last Post: Jan 18, 2013, 2:11 AM
  3. [CLOSED] Row Expander - Expanding a row using Java Script Dynamically?
    By vedagopal2004 in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: May 31, 2011, 10:34 AM
  4. [CLOSED] Export dynamically created Grid/Store
    By CarWise in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: May 05, 2011, 12:40 PM
  5. Replies: 2
    Last Post: Jan 03, 2011, 5:34 PM

Tags for this Thread

Posting Permissions