Oct 14, 2013, 8:20 PM
[CLOSED] How to clear the 2nd gridpanel's data that is nested inside a RowExpander control
Hello,
Can you please show me how to clear a gridpanel's data that is nested inside a RowExpander control when a user clicks the + sign to expand a row?
In my example below, I have a RowExpander control that contains two Gridpanel controls. I need the right gridpanel(which is the "2nd nested gridpanel" in my commented out text. ) to clear's data once the user expands a row.
The reason for the need to clear the data is because if a user collapsed the row and expand the same row again, the previous viewed data is still displaying inside the grid which is confusing to the user. The 2nd nested gridpanel's data is driven by what user selected from the left( 1st nested gridpanel).
Thank you very much in advance for your help!
Can you please show me how to clear a gridpanel's data that is nested inside a RowExpander control when a user clicks the + sign to expand a row?
In my example below, I have a RowExpander control that contains two Gridpanel controls. I need the right gridpanel(which is the "2nd nested gridpanel" in my commented out text. ) to clear's data once the user expands a row.
The reason for the need to clear the data is because if a user collapsed the row and expand the same row again, the previous viewed data is still displaying inside the grid which is confusing to the user. The 2nd nested gridpanel's data is driven by what user selected from the left( 1st nested gridpanel).
Thank you very much in advance for your help!
<%@ Page Language="C#" %>
<%@ Import Namespace="System" %>
<%@ Import Namespace="System.Data" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
BindContainerTrailers();
}
[DirectMethod]
public List<TrailerTypeReport> LoadTrailerSizes(string action, Dictionary<string, object> extraParams)
{
var cid = extraParams["CID"].ToString();
List<TrailerTypeReport> TrailerList = AddContainerTrailerReport("row #");
return TrailerList.Where(t => t.ContainerID == Convert.ToInt32(cid)).ToList();
}
protected void BindContainerTrailers()
{
stContainerTrailers.DataSource = GetContainerTrailers();
stContainerTrailers.DataBind();
}
public static List<Container> GetContainerTrailers()
{
List<Container> trailerTypeReports = new List<Container>();
trailerTypeReports.Add(new Container()
{
CID = 1,
CType = "Basket"
});
trailerTypeReports.Add(new Container()
{
CID = 2,
CType = "Tray"
});
trailerTypeReports.Add(new Container()
{
CID = 3,
CType = "Shelves"
});
return trailerTypeReports;
}
public List<TrailerTypeReport> AddContainerTrailerReport(string Desc)
{
List<TrailerTypeReport> trailerTypeReports = new List<TrailerTypeReport>();
trailerTypeReports.Add(new TrailerTypeReport()
{
NumberOfTrailers = 1,
TrailerSizeID = 0,
TrailerSize_Description = Desc + " 1",
ContainerID = 1,
ContainerName = "some container 1",
ContainerPercent = 80
});
trailerTypeReports.Add(new TrailerTypeReport()
{
NumberOfTrailers = 1,
TrailerSizeID = 1,
TrailerSize_Description = Desc + " 2",
ContainerID = 1,
ContainerName = "some container 2",
ContainerPercent = 20
});
return trailerTypeReports;
}
public List<TrailerTypeReport> GetContainerTrailersWithTrailerNumber()
{
List<TrailerTypeReport> trailerTypeReports = new List<TrailerTypeReport>();
trailerTypeReports.Add(new TrailerTypeReport()
{
TrailerNumber = "123",
NumberOfTrailers = 1,
TrailerSizeID = 1,
TrailerSize_Description = "desc 1",
ContainerID = 1,
ContainerName = "some container",
ContainerPercent = 20
});
return trailerTypeReports;
}
[DirectMethod]
public List<TrailerTypeReport> LoadTrailerNumbers(string action, Dictionary<string, object> extraParams)
{
var sizeID = extraParams["ID"].ToString();
var containerTypeID = extraParams["CID"].ToString();
List<TrailerTypeReport> TrailerNumberList = GetContainerTrailersWithTrailerNumber();
TrailerNumberList = TrailerNumberList.Where(t => t.TrailerSizeID == Convert.ToInt16(sizeID) && t.ContainerID == Convert.ToInt16(containerTypeID)).ToList();
return TrailerNumberList;
}
public class TrailerTypeReport
{
public int NumberOfTrailers { get; set; }
public int TrailerInventoryID { get; set; }
public int TrailerSizeID { get; set; }
public string TrailerSize_Description { get; set; }
public int ContainerID { get; set; }
public string ContainerName { get; set; }
public string TrailerNumber { get; set; }
public decimal ContainerPercent { get; set; }
}
public class Container
{
public int CID { get; set; }
public string CType { get; set; }
}
</script>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title>How to clear a Gridpanel that is nested inside a Row Expander control</title>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Panel ID="panelReports" runat="server" Layout="ColumnLayout" Width="700" StyleSpec="padding-top:5px;" Height="700">
<Items>
<ext:GridPanel ID="gpContainerTrailers" runat="server" AutoScroll="true" Scroll="Both"
ButtonAlign="Left" Width="400" StyleSpec="padding-top:5px;padding-left:10px;" Height="700">
<Store>
<ext:Store ID="stContainerTrailers" runat="server" AutoLoad="true" AutoDataBind="true">
<Model>
<ext:Model ID="mdContainerTrailers" runat="server" IDProperty="CID">
<Fields>
<ext:ModelField Name="CID" />
<ext:ModelField Name="CType" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column ID="Column1" runat="server" Text="Container Trailers" DataIndex="CType"
Width="400" />
</Columns>
</ColumnModel>
<Plugins>
<ext:RowExpander ID="RowExpander1" runat="server" SelectRowOnExpand="false" Height="500"
SingleExpand="false">
<Component>
<ext:FormPanel ID="FormPanel1" runat="server" Layout="ColumnLayout" Border="false"
Height="160">
<Items>
<%-- 1st nested gridpanel --%>
<ext:GridPanel runat="server" Width="180" ButtonAlign="Center" Border="true"
AutoScroll="true" Height="700" StyleSpec="padding-left:5px;padding-bottom:5px;">
<Store>
<ext:Store runat="server" AutoLoad="false">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="TrailerSize_Description" />
<ext:ModelField Name="TrailerSizeID" />
<ext:ModelField Name="ContainerID" />
<ext:ModelField Name="NumberOfTrailers" />
<ext:ModelField Name="ContainerName" />
<ext:ModelField Name="TrailerInventoryID" />
</Fields>
</ext:Model>
</Model>
<Proxy>
<ext:PageProxy DirectFn="App.direct.LoadTrailerSizes">
<Reader>
<ext:JsonReader />
</Reader>
</ext:PageProxy>
</Proxy>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column ID="Column2" runat="server" Text="Trailer Size" DataIndex="TrailerSize_Description"
Align="Center" Width="107" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" Mode="Single">
<Listeners>
<Select Handler="var trailerSizeGrid = this.views[0].panel.next();
trailerSizeGrid.getStore().load({ params: { ID: record.data.TrailerSizeID, CID: record.data.ContainerID } });
trailerSizeGrid.down('displayfield').setValue(record.data.TrailerSize_Description); " />
</Listeners>
</ext:RowSelectionModel>
</SelectionModel>
<View>
<ext:GridView ID="GridView1" runat="server" StripeRows="true" TrackOver="true">
</ext:GridView>
</View>
</ext:GridPanel>
<%-- 2nd nested gridpanel --%>
<ext:GridPanel runat="server" Width="180" Height="160" Border="true"
StyleSpec="padding-left:15px;padding-right:7px;padding-bottom:5px;" AutoScroll="true" SelectionMemory="false" >
<Store>
<ext:Store runat="server" AutoLoad="false">
<Model>
<ext:Model ID="Model2" runat="server">
<Fields>
<ext:ModelField Name="TrailerInventoryID" />
<ext:ModelField Name="TrailerSizeID" />
<ext:ModelField Name="TrailerSize_Description" />
<ext:ModelField Name="TotalTicketQuantity" />
<ext:ModelField Name="ContainerID" />
<ext:ModelField Name="ContainerName" />
<ext:ModelField Name="NumberOfTrailers" />
<ext:ModelField Name="TrailerNumber" />
<ext:ModelField Name="ContainerPercent" />
</Fields>
</ext:Model>
</Model>
<Proxy>
<ext:PageProxy DirectFn="App.direct.LoadTrailerNumbers">
</ext:PageProxy>
</Proxy>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ID="Column4" runat="server" Text="Trailer #" DataIndex="TrailerNumber"
Width="70" />
<ext:Column ID="Column11" runat="server" Flex="1" Text="% Containers" DataIndex="ContainerPercent" />
</Columns>
</ColumnModel>
<BottomBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:DisplayField ID="DisplayField1" runat="server" FieldLabel="" />
</Items>
</ext:Toolbar>
</BottomBar>
</ext:GridPanel>
</Items>
</ext:FormPanel>
</Component>
<Listeners>
<Expand Handler="this.getComponent(record).down('gridpanel').getStore().reload({ params: { CID: record.data.CID }});" />
</Listeners>
</ext:RowExpander>
</Plugins>
</ext:GridPanel>
</Items>
</ext:Panel>
</form>
</body>
</html>
Last edited by Daniil; Oct 15, 2013 at 2:25 PM.
Reason: [CLOSED]
Originally Posted by Baidaly
