PDA

View Full Version : [CLOSED] Row Expander Grid Child's Row refer to Parent's



redi
May 22, 2014, 6:34 AM
Hello,
I have another question. How to make it so that the child grid on my row expander referring to it's parent grid. For example, when I expand the row on grid level 1 with ID 'CND', I'd like the child grid on level 2 to only contains rows that have the Name 'CND'.

Thanks.

http://forums.ext.net/attachment.php?attachmentid=11341&stc=1



<%@ Page Language="vb"%>

<%@ Import Namespace="ListView=Ext.Net.ListView"%>
<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
<%@ Import Namespace="Ext.Net.Utilities"%>
<%@ Import Namespace="System.Collections.Generic"%>

<script runat="server">

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
If Not ExtNet.IsAjaxRequest Then
Store1.DataSource = New Object() {New Object() {"cnt", "Rawat Jalan Description", "Ciptakridatama Rawat Jalan"},
New Object() {"mdc", "Rawat Inap Description", "Ciptakridatama Rawat Inap"},
New Object() {"temdcst", "Madical Description", "Ciptakridatama Madical"}
}
Store1.DataBind()

Store2.DataSource = New Object() {New Object() {"1", "cnt", "kesehatan"},
New Object() {"2", "cnt", "Alat/ruang makan"},
New Object() {"3", "cnt", "Bahan makanan"},
New Object() {"3", "cnt", "Bahan makanan"},
New Object() {"1", "icd", "Faktor-faktor utama yang mempengaruhi status kesehatan dan kontak dengan pelayanan kesehatan"},
New Object() {"2", "icd", "Otot & Tulang"},
New Object() {"3", "icd", "Kemih"},
New Object() {"1", "mdc", "Analgetik Cream"},
New Object() {"2", "mdc", "Analgetik Injeksi"},
New Object() {"3", "mdc", "Antibiotik"}
}
Store2.DataBind()
End If
End Sub
</script>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager>

<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model ID="Model1" runat="server" IDProperty="ID">
<Fields>
<ext:ModelField Name="ID" />
<ext:ModelField Name="Name" />
<ext:ModelField Name="Description" />
</Fields>
</ext:Model>
</Model>
</ext:Store>

<ext:Store ID="Store2" runat="server">
<Model>
<ext:Model ID="Model2" runat="server" IDProperty="ID">
<Fields>
<ext:ModelField Name="ID" />
<ext:ModelField Name="Code" />
<ext:ModelField Name="Name" />
</Fields>
</ext:Model>
</Model>
</ext:Store>


<ext:GridPanel ID="GridPanel1"
runat="server"
Title="Expander Rows with GridPanel"
Collapsible="true"
AnimCollapse="true"
Icon="Table"
Width="600"
Height="450"
DisableSelection="true" StoreID ="Store1">
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ID="Column1" runat="server" Text="ID" DataIndex="ID" Flex="1" />
<ext:Column ID="Column2" runat="server" Text="Name" DataIndex="Name" Flex="1" />
<ext:Column ID="Column3" runat="server" Text="Description" DataIndex="Description" Flex="1" />
</Columns>
</ColumnModel>
<SelectionModel>
</SelectionModel>
<Plugins>
<ext:RowExpander ID="RowExpander" runat="server" SwallowBodyEvents="true" Collapsible="true"
AnimCollapse="true" Icon="Table" Width="600" AutoScroll="True" Border="True"
Header="false" TrackMouseOver="true" Layout="FitLayout" StripeRows="true">
<Component>
<ext:TabPanel ID="TabPanel1" runat="server">
<Items>

<ext:GridPanel
Collapsible="true"
AnimCollapse="true"
Icon="Table"
Width="200"
Height="200"
StoreID ="Store2"
runat="server"
ID="GridPanel2"
SwallowBodyEvents="true"
AutoScroll="True" Border="True"
Header="false" TrackMouseOver="true" Layout="FitLayout">
<ColumnModel ID="ColumnModel2" runat="server">
<Columns>
<ext:Column ID="Column5" runat ="server" ColumnID="ID" DataIndex="ID" Header="ID" Resizable="true"></ext:Column>
<ext:Column ID="Column7" runat ="server" ColumnID="Code" DataIndex="Code" Header="Code" Resizable="true"></ext:Column>
<ext:Column ID="Column9" runat ="server" ColumnID="Name" DataIndex="Name" Header="Name" Resizable="true"></ext:Column>
</Columns>
</ColumnModel>
<View>
<ext:GridView ID="GridView2" runat="server" ForceFit="false" />
</View>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel2" runat="server" />
</SelectionModel>
<BottomBar>
<ext:PagingToolbar ID="PagingToolbar2" runat="server" PageSize="10" />
</BottomBar>
</ext:GridPanel>
</Items>
</ext:TabPanel>
</Component>
</ext:RowExpander>
</Plugins>

</ext:GridPanel>
</form>
</body>
</html>

Daniil
May 22, 2014, 7:22 AM
Hi @redi,

I think you can listen to a RowExpander's BeforeExpand event and load the required data to the Store of the inner GridPanel.