PDA

View Full Version : [CLOSED] Row Expander Grid Event Click



redi
May 14, 2014, 8:37 AM
Hello,
Another question about row expander, how to attach click event on selected grid as attachment below?

Thank You

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


Aspx Code



<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm7.aspx.vb" Inherits="RowExpen.WebForm7" %>
<!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:Viewport ID="Viewport1" runat="server" Layout="fit">
<Items>
<ext:GridPanel ID="GridPanel1"
runat="server"
Title="Expander Rows with GridPanel"
Collapsible="true"
AnimCollapse="true"
Icon="Table"
Width="600"
Height="450"
DisableSelection="true"
Resizable="True">
<Store>
<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>
</Store>

<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>

<Plugins>
<ext:RowExpander ID="RowExpander1" runat="server" SwallowBodyEvents="true"
Collapsible="true"
AnimCollapse="true"
Icon="Table"
Width="600"
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>
</Plugins>
<Listeners>
<ViewReady Handler="this.view.on('beforerowupdate', rerenderNestedGrid);" />
</Listeners>
</ext:GridPanel>
</Items>
</ext:Viewport>
</form>
</body>
</html>

Daniil
May 14, 2014, 12:06 PM
Hi @redi,

What about a GridPanel's Select event?

redi
May 20, 2014, 5:14 AM
Unfortunately we can't use select event, how about click or double click event? are there possible to be implemented on grid inside the row expander?

Daniil
May 20, 2014, 5:23 AM
A GridPanel has the ItemClick and ItemDblClick events. You can try it.

redi
May 21, 2014, 2:27 AM
Hello,
Could you please show me where to put the ItemClick and ItemDblClick within this following code?

Thanks



<%@ Page Language="vb"%>
<%@ 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">
<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>
<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 21, 2014, 5:17 AM
Here you are.

<ext:GridPanel runat="server">
<Listeners>
<ItemClick Handler="alert('ItemClick');" />
<ItemDblClick Handler="alert('ItemDblClick');" />
</Listeners>
</ext:GridPanel>

redi
May 21, 2014, 6:58 AM
It works!

Thank You.