<ext:Store ID="StorePayments" runat="server" GroupField="EncounterID">
<Reader>
<ext:JsonReader IDProperty="EncounterID_CPT">
<Fields>
<ext:RecordField Name="PDate" Type="date" DateFormat="Y-m-dTh:i:s" />
<ext:RecordField Name="EncounterID" Type="int"/>
<ext:RecordField Name="AutoID" Type="Int"/>
<ext:RecordField Name="TransactionID" Type="int"/>
<ext:RecordField Name="PaymentDetailsID" Type="int"/>
<ext:RecordField Name="Description" Type="String"/>
<%-- <ext:RecordField Name="CPT" Type="Int" />--%>
<ext:RecordField Name="CPT" Type="String" />
<%--<ext:RecordField Name="Insurance" Type="String" />--%>
<ext:RecordField Name="Totalcharges" />
<ext:RecordField Name="AllowedAmt" Type="Float" />
<ext:RecordField Name="PaidAmt" Type="Float" />
<ext:RecordField Name="AdjAmt" Type="Float" />
<ext:RecordField Name="Balance" Type="Float" />
<ext:RecordField Name="Status" Type="String" />
<ext:RecordField Name="StatusID" Type="int" />
<ext:RecordField Name="ReasonName" Type="String" />
<ext:RecordField Name="ReasonID" Type="int" />
<ext:RecordField Name="DeductAmt" Type="Float" />
<ext:RecordField Name="BatchDesc" Type="String" />
<ext:RecordField Name="Insurance1" Type="Float" />
<ext:RecordField Name="Insurance2" Type="Float" />
<ext:RecordField Name="Insurance3" Type="Float" />
<ext:RecordField Name="PatientContribution" Type="Float" />
<ext:RecordField Name="TempValue" Type="String" />
</Fields>
</ext:JsonReader>
</Reader>
<%--<SortInfo Field="CPT" Direction="ASC" />--%>
</ext:Store>


<ext:GridPanel StripeRows="true" runat="server" ID="grdPayments" Frame="false" StoreID="StorePayments" AutoHeight="true" Border="true" StyleSpec="margin-top:10px;" Collapsible="true" AnimCollapse="true" TrackMouseOver="false" Height="600">
<ColumnModel ID="ColumnModel2" runat="server">
<Columns>
<ext:Column Header="AutoID" DataIndex="AutoID" Sortable="true" Hidden="true"/>
<ext:GroupingSummaryColumn ColumnID="PDate" Header="Date" Sortable="true" DataIndex="PDate" Hideable="false" Width="100" SummaryType="Count">
<SummaryRenderer Handler="return ((value === 0 || value > 1) ? '(' + value +' Transactions)' : '(1 Transaction)');" />
<Renderer Fn="Ext.util.Format.dateRenderer('Y-m-d')" />
</ext:GroupingSummaryColumn>
<ext:Column Header="Description" DataIndex="Description" Sortable="true" Hidden="true" />
<ext:Column Header="Encounter" DataIndex="EncounterID" Sortable="true"/>
<ext:Column Header="TransactionID" DataIndex="TransactionID" Sortable="true" Hidden="true"/>
<ext:Column Header="PaymentDetailsID" DataIndex="PaymentDetailsID" Sortable="true" Hidden="true"/>
<ext:Column Header="CPT" DataIndex="CPT" Sortable="true" />
<ext:GroupingSummaryColumn ColumnID="Totalcharges" Header="Billed Amt" Sortable="false" Groupable="false" Width="100" DataIndex="Totalcharges" SummaryType="Sum" >
<Renderer Handler="return Ext.util.Format.usMoney(record.data.Totalcharges); " />
<SummaryRenderer Format="UsMoney" />
</ext:GroupingSummaryColumn>
<ext:GroupingSummaryColumn ColumnID="AllowedAmt" Header="Allowed Amt" Sortable="false" Groupable="false" Width="100" DataIndex="AllowedAmt" SummaryType="Sum" >
<Renderer Handler="return Ext.util.Format.usMoney(record.data.AllowedAmt);" />
<SummaryRenderer Format="UsMoney" />
</ext:GroupingSummaryColumn>
<ext:GroupingSummaryColumn ColumnID="PaidAmt" Header="Paid Amt" Sortable="false" Groupable="false" Width="100" DataIndex="PaidAmt" SummaryType="Sum" >
<Renderer Handler="return Ext.util.Format.usMoney(record.data.PaidAmt);" />
<SummaryRenderer Format="UsMoney" />
</ext:GroupingSummaryColumn>
<ext:GroupingSummaryColumn ColumnID="AdjAmt" Header="Adjustment Amt" Sortable="false" Groupable="false" Width="100" DataIndex="AdjAmt" SummaryType="Sum" >
<Renderer Handler="return Ext.util.Format.usMoney(record.data.AdjAmt);" />
<SummaryRenderer Format="UsMoney" />
</ext:GroupingSummaryColumn>
<ext:GroupingSummaryColumn ColumnID="Balance" Header="Balance" Sortable="false" Groupable="false" Width="100" DataIndex="Balance" SummaryType="Sum" >
<Renderer Handler="return Ext.util.Format.usMoney(record.data.Balance);" />
<SummaryRenderer Format="UsMoney" />
</ext:GroupingSummaryColumn>
<ext:Column Header="Status" DataIndex="Status" Sortable="true" Hidden="true" />
<ext:Column Header="Status" DataIndex="BatchDesc" Sortable="true"/>
<ext:Column Header="Reasons" DataIndex="ReasonName" Sortable="true">
<Editor>
<ext:TextField ID="txtReasons" runat="server" ReadOnly="true"/>
</Editor>
</ext:Column>
<ext:Column Header="TempValue" DataIndex="TempValue" Sortable="true" Hidden="true" />
<ext:GroupingSummaryColumn ColumnID="DeductAmt" Header="Deduct Amt" Sortable="false" Groupable="false" Width="100" DataIndex="DeductAmt" SummaryType="Sum" >
<Renderer Handler="return Ext.util.Format.usMoney(record.data.DeductAmt);" />
<SummaryRenderer Format="UsMoney" />
</ext:GroupingSummaryColumn>
<ext:GroupingSummaryColumn ColumnID="Insurance1" Header="Insurance1" Sortable="false" Groupable="false" Width="100" DataIndex="Insurance1" SummaryType="Sum" >
<Renderer Handler="return Ext.util.Format.usMoney(record.data.Insurance1);" />
<SummaryRenderer Format="UsMoney" />
</ext:GroupingSummaryColumn>
<ext:GroupingSummaryColumn ColumnID="Insurance2" Header="Insurance2" Sortable="false" Groupable="false" Width="100" DataIndex="Insurance2" SummaryType="Sum">
<Renderer Handler="return Ext.util.Format.usMoney(record.data.Insurance2);" />
<SummaryRenderer Format="UsMoney" />
</ext:GroupingSummaryColumn>
<ext:GroupingSummaryColumn ColumnID="Insurance3" Header="Insurance3" Sortable="false" Groupable="false" Width="100" DataIndex="Insurance3" SummaryType="Sum">
<Renderer Handler="return Ext.util.Format.usMoney(record.data.Insurance3);" />
<SummaryRenderer Format="UsMoney" />
</ext:GroupingSummaryColumn>
<ext:GroupingSummaryColumn ColumnID="PatientContribution" Header="Patient" Sortable="false" Groupable="false" Width="100" DataIndex="PatientContribution" SummaryType="Sum">
<Renderer Handler="return Ext.util.Format.usMoney(record.data.PatientContrib ution);" />
<SummaryRenderer Format="UsMoney" />
</ext:GroupingSummaryColumn>
</Columns>
</ColumnModel>
<View>

<ext:GroupingView ID="GroupingView1" runat="server" ForceFit="true" ShowGroupName="true" EnableNoGroups="true" HideGroupedColumn="true" />
</View>
<Listeners>
<Command Handler="validated(command,record);" />
</Listeners>
<Plugins>
<ext:GroupingSummary ID="GroupingSummary1" runat="server" />
</Plugins>




<SelectionModel>
<ext:RowSelectionModel ID="CellSelectionModel1" runat="server">
<DirectEvents>
<RowSelect OnEvent="grdPayments_Click" ShowWarningOnFailure="false" Buffer="250">
<EventMask ShowMask="true" Target="CustomTarget" CustomTarget="#{Details}" />
<ExtraParams>
<%-- or can use params[2].id as value --%>
<ext:Parameter Name="PPPosting" Value="Ext.encode(#{grdPayments}.getRowsValues({se lectedOnly:true}))"
Mode="Raw" />
</ExtraParams>
</RowSelect>
</DirectEvents>
</ext:RowSelectionModel>
</SelectionModel>

<Plugins>
<ext:RowExpander ID="RowExpander1" runat="server" EnableCaching="true">

<Template ID="Template2" runat="server">
<Html>
<div id="row-{EncounterID_CPT}" style="background-color:White;"></div>
</Html>
</Template>

<DirectEvents>
<BeforeExpand
OnEvent="BeforeExpand" Before="return !body.rendered;"
Success="body.rendered=true;">
<%-- <EventMask ShowMask="true" Target="CustomTarget" CustomTarget="={grdPayments.body}" />--%>
<ExtraParams>
<ext:Parameter Name="id" Value="record.id" Mode="Raw" />
</ExtraParams>
</BeforeExpand>
</DirectEvents>
</ext:RowExpander>
</Plugins>


</ext:GridPanel>




Code behind is as follows:

protected void BeforeExpand(object sender, DirectEventArgs e)
{
string[] ids = e.ExtraParams["id"].Split('?');
string id = e.ExtraParams["id"];
string EncounterID = "0";
string CPTCode = "";
string rowid = "";


if (id.Length > 0)
{
EncounterID = ids[0];
CPTCode = ids[1];
rowid = ids[2];
}

PPServiceClient PPSer = new PPServiceClient();
PaymentTransaction[] PTs = PPSer.SelectPaymentTransactionByEncounterIDAndCPT( Convert.ToInt32(EncounterID),CPTCode);

Store store = new Store { ID = "StoreRow_" + id };

JsonReader reader = new JsonReader();
reader.IDProperty = "AutoID";
reader.Fields.Add("PDate");
reader.Fields.Add("EncounterID");
reader.Fields.Add("AutoID");
reader.Fields.Add("TransactionID");
reader.Fields.Add("PaymentDetailsID");
reader.Fields.Add("Description");
reader.Fields.Add("CPT");
reader.Fields.Add("Totalcharges");
reader.Fields.Add("AllowedAmt");
reader.Fields.Add("PaidAmt");
reader.Fields.Add("AdjAmt");
reader.Fields.Add("Balance");
reader.Fields.Add("Status");
reader.Fields.Add("StatusID");
reader.Fields.Add("ReasonName");
reader.Fields.Add("ReasonID");
reader.Fields.Add("DeductAmt");
reader.Fields.Add("BatchDesc");
reader.Fields.Add("Insurance1");
reader.Fields.Add("Insurance2");
reader.Fields.Add("Insurance3");
reader.Fields.Add("PatientContribution");
reader.Fields.Add("TempValue");
store.Reader.Add(reader);


store.DataSource = PTs;
//store.DataBind();

this.RemoveFromCache(store.ID);
store.Render();
this.AddToCache(store.ID);

GridPanel grid = new GridPanel
{
ID = "GridPanelRow_" + id,
StoreID = "{raw}StoreRow_" + id,
Height = 200
};

grid.ColumnModel.Columns.Add(new Column { Header = "PDate", DataIndex = "PDate" });
grid.ColumnModel.Columns.Add(new Column { Header = "EncounterID", DataIndex = "EncounterID" });
grid.ColumnModel.Columns.Add(new Column { Header = "AutoID", DataIndex = "AutoID" });
grid.ColumnModel.Columns.Add(new Column { Header = "TransactionID", DataIndex = "TransactionID" });
grid.ColumnModel.Columns.Add(new Column { Header = "PaymentDetailsID", DataIndex = "PaymentDetailsID" });
grid.ColumnModel.Columns.Add(new Column { Header = "Description", DataIndex = "Description" });
grid.ColumnModel.Columns.Add(new Column { Header = "CPT", DataIndex = "CPT" });
grid.ColumnModel.Columns.Add(new Column { Header = "Totalcharges", DataIndex = "Totalcharges" });
grid.ColumnModel.Columns.Add(new Column { Header = "AllowedAmt", DataIndex = "AllowedAmt" });
grid.ColumnModel.Columns.Add(new Column { Header = "PaidAmt", DataIndex = "PaidAmt" });
grid.ColumnModel.Columns.Add(new Column { Header = "AdjAmt", DataIndex = "AdjAmt" });
grid.ColumnModel.Columns.Add(new Column { Header = "Balance", DataIndex = "Balance" });
grid.ColumnModel.Columns.Add(new Column { Header = "Status", DataIndex = "Status" });
grid.ColumnModel.Columns.Add(new Column { Header = "StatusID", DataIndex = "StatusID" });
grid.ColumnModel.Columns.Add(new Column { Header = "ReasonName", DataIndex = "ReasonName" });
grid.ColumnModel.Columns.Add(new Column { Header = "ReasonID", DataIndex = "ReasonID" });
grid.ColumnModel.Columns.Add(new Column { Header = "DeductAmt", DataIndex = "DeductAmt" });
grid.ColumnModel.Columns.Add(new Column { Header = "BatchDesc", DataIndex = "BatchDesc" });
grid.ColumnModel.Columns.Add(new Column { Header = "Insurance1", DataIndex = "Insurance1" });
grid.ColumnModel.Columns.Add(new Column { Header = "Insurance2", DataIndex = "Insurance2" });
grid.ColumnModel.Columns.Add(new Column { Header = "Insurance3", DataIndex = "Insurance3" });
grid.ColumnModel.Columns.Add(new Column { Header = "PatientContribution", DataIndex = "PatientContribution" });

grid.ColumnModel.ID = "GridPanelRowCM_" + id;

grid.View.Add(new Ext.Net.GridView { ID = "GridPanelRowView_" + id, ForceFit = true });

//important
X.Get("row-" + id).SwallowEvent(new string[] { "click", "mousedown", "mouseup", "dblclick" }, true);

this.RemoveFromCache(grid.ID);
grid.Render("row-" + id, RenderMode.RenderTo);
this.AddToCache(grid.ID);
}

private void RemoveFromCache(string id)
{
X.Js.Call("removeFromCache", id);
}

private void AddToCache(string id)
{
X.Js.Call("addToCache", id);
}