PDA

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



redi
Jun 06, 2014, 3:05 AM
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>

Daniil
Jun 06, 2014, 4:38 AM
Hi @redi,

You could access inner GridPanels (only rendered ones) in this way:

App.ParentGridPanel.getRowExpander().componentsCac he[0].cmp
App.ParentGridPanel.getRowExpander().componentsCac he[1].cmp
etc.

redi
Jun 06, 2014, 8:06 AM
Hi Danill,
Do you have any examples using those?

Daniil
Jun 06, 2014, 8:31 AM
Unfortunately, no, we don't.

redi
Jun 06, 2014, 9:14 AM
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.

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

Daniil
Jun 06, 2014, 12:12 PM
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);
};

redi
Jun 06, 2014, 5:48 PM
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.

Daniil
Jun 06, 2014, 6:25 PM
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?

redi
Jun 10, 2014, 3:58 AM
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({selectedO n: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


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?

Daniil
Jun 10, 2014, 4:27 AM
Your populateExtra function. I don't see any code where you iterate a RowExpander's componentsCache, as I suggested here.




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);
};

redi
Jun 10, 2014, 7:49 AM
Hi Daniil,

My Code still problem, please help me, how to solve this problem.



var populateExtra = function(extraParams) {
var gridsData = [];
var jsondata = Ext.encode(App.MasterGrid.getRowsValues({selectedO n:true}));
var myobj = JSON.parse('{"dt":' + jsondata +'}');
for (var i = 0; i < myobj.dt.length; i++) {
var griddetail = myobj.dt[i].ProjectID ;
alert(griddetail);
gridsData='App.grid'+ griddetail +'.getRowsValues({selectedOn:true})'
extraParams.gridsData = Ext.encode(gridsData);
};
};




many thanks

Daniil
Jun 10, 2014, 1:53 PM
how to solve this problem

You have not provided any information about the problem with the posted piece of code.

I don't quite understand what you do in the JavaScript function. Have you tried my suggestion how to get inner GridPanels?

redi
Jun 11, 2014, 4:07 AM
Hi Danill,

I was try your suggestion (get inner GridPanel) using this code



App.GridExpander.getRowExpander().componentsCache[0].cmp
App.GridExpander.getRowExpander().componentsCache[1].cmp


I have error like this from firebug :

12551

Daniil
Jun 11, 2014, 5:18 AM
Well, this error is not because of this code:


App.GridExpander.getRowExpander().componentsCache[0].cmp
App.GridExpander.getRowExpander().componentsCache[1].cmp


I think it is due to something else in your code.

redi
Jun 11, 2014, 7:28 AM
Thanks for your reply Dannil,

Ok, make this simple. I have Grid Master Detail, and i want to used a Grid with nested grid. then how i can get all row from parent and child (like an image that i upload before this post) to json result or something else so i can save that Master and Detail row to my database or the result can transfer to code behind and i can be treated to dataset or datatable with single button submit event.

If just one GridPanel without child Grid (rowexpander or inner grid) i can do that. But with child grid(rowexpander grid) how ? can u give me simple example to do that ?

I have try with HasMany and other method from forum and search on examples.ext.net but i cant' get it.

Thanks for your attention.

Daniil
Jun 11, 2014, 1:51 PM
Ok, here is an example.

Example

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

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store store = this.GridPanel1.GetStore();
store.DataSource = new object[]
{
new object[] { "test", "test" },
new object[] { "test", "test" },
new object[] { "test", "test" }
};
}
}

[DirectMethod]
public void Submit(string mainGridData, string innerGridsData)
{
X.Js.Call("console.log", "Main GridPanel:", mainGridData);
X.Js.Call("console.log", "Inner GridPanels:", innerGridsData);
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>

<script>
var submit = function () {
var mainGridData = App.GridPanel1.getRowsValues(),
innerGridsData = [],
innerCmps = App.GridPanel1.getRowExpander().componentsCache,
innerGrid,
i,
len;

for (i = 0, len = innerCmps.length; i < len; i++) {
innerGrid = innerCmps[i].cmp;
innerGridsData.push(innerGrid.getRowsValues());
}

App.direct.Submit(mainGridData, innerGridsData);
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<ext:Button runat="server" Text="Submit" Handler="submit" />

<ext:GridPanel ID="GridPanel1" runat="server" Height="400">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="test1" />
<ext:ModelField Name="test2" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Test 1" DataIndex="test1" />
<ext:Column runat="server" Text="Test 2" DataIndex="test2" />
</Columns>
</ColumnModel>
<Plugins>
<ext:RowExpander runat="server" SingleExpand="false">
<Component>
<ext:GridPanel ID="GridPanelInner" runat="server">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="test" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Test" DataIndex="test" />
</Columns>
</ColumnModel>
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button
runat="server"
Text="Add"
Icon="Add"
StandOut="true"
Handler="this.up('gridpanel').getStore().add({ test: 'New'});" />
</Items>
</ext:Toolbar>
</TopBar>
</ext:GridPanel>
</Component>
</ext:RowExpander>
</Plugins>
</ext:GridPanel>
</form>
</body>
</html>

redi
Jun 12, 2014, 2:17 AM
Aha...

that's what i'm talking about...I think my problem has solved.

Thanks fully Danill for your help and support. :)

You can Closed this thread.