Sep 18, 2013, 9:42 PM
[CLOSED] can not refresh data in a gridpanel inside rowexpander
Hello,
I need to refresh a gridpanel's data control after a button is clicked but it is not working.
I created the test page to demonstrate my issue. In my btnRefreshClicked() method, I tried calling the outer gridpanel which contains my RowExpander control, but that does not refresh my gridpanel inside the RowExpander - the LoadTrailerSizes didn't fire when I clicked on the Refresh button.
How can I refresh that gridpanel's data inside the RowExpander plugin?
Thank you very much in advance for your help!
Below is my code:
I need to refresh a gridpanel's data control after a button is clicked but it is not working.
I created the test page to demonstrate my issue. In my btnRefreshClicked() method, I tried calling the outer gridpanel which contains my RowExpander control, but that does not refresh my gridpanel inside the RowExpander - the LoadTrailerSizes didn't fire when I clicked on the Refresh button.
How can I refresh that gridpanel's data inside the RowExpander plugin?
Thank you very much in advance for your help!
Below is my code:
<%@ Page Language="C#" %>
<%@ Import Namespace="System" %>
<%@ Import Namespace="System.Data" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script type="text/javascript">
</script>
<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("test");
return TrailerList.Where(t => t.ContainerID == Convert.ToInt32(cid)).ToList();
}
public void btnRefreshClicked(object sender, DirectEventArgs e)
{
BindContainerTrailers();
}
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"
});
return trailerTypeReports;
}
public List<TrailerTypeReport> AddContainerTrailerReport(string Desc)
{
List<TrailerTypeReport> trailerTypeReports = new List<TrailerTypeReport>();
trailerTypeReports.Add(new TrailerTypeReport()
{
NumberOfTrailers = 1,
TrailerSizeID = 1,
TrailerSize_Description = Desc,
ContainerID = 1,
ContainerName = "some container",
ContainerPercent = 20
});
return trailerTypeReports;
}
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>Store Filter</title>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Button ID="btnRefresh" Text="Refresh" runat="server" OnDirectClick="btnRefreshClicked"></ext:Button><br /><br />
<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>
<ext:GridPanel runat="server" Width="180" ButtonAlign="Center" Border="true"
AutoScroll="true" Height="700" StyleSpec="padding-left:5px;padding-bottom:5px;">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="TrailerSize_Description" />
</Fields>
</ext:Model>
</Model>
<Proxy>
<ext:PageProxy DirectFn="App.direct.LoadTrailerSizes">
<Reader>
<ext:JsonReader />
</Reader>
</ext:PageProxy>
</Proxy>
<AutoLoadParams>
<ext:Parameter Name="CID" Value="this.record.data.CID" Mode="Raw" />
</AutoLoadParams>
</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>
</Items>
</ext:FormPanel>
</Component>
</ext:RowExpander>
</Plugins>
</ext:GridPanel>
</Items>
</ext:Panel>
</form>
</body>
</html>
Last edited by Daniil; Oct 04, 2013 at 6:03 AM.
Reason: [CLOSED]