PDA

View Full Version : [CLOSED] can not refresh data in a gridpanel inside rowexpander



Fahd
Sep 18, 2013, 10:42 PM
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:



<%@ 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(reco rd.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>

Daniil
Sep 19, 2013, 7:13 AM
Hi @Fahd,

Binding data to a parent GridPanel doesn't affect to an inner GridPanel. There is no such a chain.

You should reload an inner GridPanel's Store when a user expands a row.

Fahd
Sep 19, 2013, 2:19 PM
Can you please show me how to reload the inner GridPanel's store in my code? When I tried to reload my "Store1", it throws the Null Exception. I do not know how to reference the GridPanel's store because its ID is not generated until the RowExpander is clicked.



Hi @Fahd,

Binding data to a parent GridPanel doesn't affect to an inner GridPanel. There is no such a chain.

You should reload an inner GridPanel's Store when a user expands a row.

Daniil
Sep 19, 2013, 3:34 PM
If you set up SingleExpand="false", then an individual component will be rendered for each row. So, the Store1 ID cannot be used for every component.

Do you really need that SingleExpand="false" setting?

Anyway, you can do the following.

1. Set up AutoLoad="false" for the Store1.

2. Remove its AutoLoadParams.

3. Add this listener for the RowExpander.

<Expand Handler="this.getComponent(record).down('gridpanel').getSto re().reload({ params: { CID: record.data.CID }});" />

Fahd
Sep 19, 2013, 4:09 PM
Daniil,
Thank you very much for replying back.
I tried your suggestions. When I clicked on the "+" sign to expand the first row, it is throwing an error at
this.getComponent(record).down('gridpanel').getSto re().reload({ params: { CID: record.data.CID }}); . I am attaching a screenshot for the error message for your review. Below is my modified code with your suggestions.

However, if I leave SingleExpand="false" then there are no errors but the inner GridPanel still does not refresh - I added a break point in the LoadTrailerSizes method and it does not fire when I click on the "Refresh" button.

Thanks!


6916
<%@ 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="true">
<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" AutoLoad="false">
<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(reco rd.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>
<Listeners>
<Expand Handler="this.getComponent(record).down('gridpanel').getSto re().reload({ params: { CID: record.data.CID }});" />
</Listeners>
</ext:RowExpander>
</Plugins>

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






If you set up SingleExpand="false", then an individual component will be rendered for each row. So, the Store1 ID cannot be used for every component.

Do you really need that SingleExpand="false" setting?

Anyway, you can do the following.

1. Set up AutoLoad="false" for the Store1.

2. Remove its AutoLoadParams.

3. Add this listener for the RowExpander.

<Expand Handler="this.getComponent(record).down('gridpanel').getSto re().reload({ params: { CID: record.data.CID }});" />

Daniil
Sep 19, 2013, 5:16 PM
There is no "set up SingleExpand="true"" in my steps. I just asked you really need Single="false" option or not. My steps were for SingleExpand="false".

With SingleExpand="true" is should be:

<Expand Handler="this.component.down('gridpanel').getStore().reload ({ params: { CID: record.data.CID }});" />

To refresh with SingleExpand="false", please try:

var record = App.gpContainerTrailers.getStore().getAt(0);

App.RowExpander1.getComponent(record).down('gridpa nel').getStore().reload({
params: {
CID: record.data.CID
}
});

To refresh with SingleExpand="true", please try (the row should be expanded before, at least, once):

var record = App.gpContainerTrailers.getStore().getAt(0);

App.RowExpander1.component.down('gridpanel').getSt ore().reload({
params: {
CID: record.data.CID
}
});

Fahd
Sep 19, 2013, 9:55 PM
Thank you very much! Your code below which I put in a function named "refreshGridpanelData"

var record = App.gpContainerTrailers.getStore().getAt(0);

App.RowExpander1.getComponent(record).down('gridpa nel').getStore().reload({
params: {
CID: record.data.CID
}
}); works great for me if I wired it up to my btnRefresh button's Listener.

my code for the button:

<ext:Button ID="btnRefresh" Text="Refresh" runat="server" OnDirectClick="btnRefreshClicked" >
<Listeners>
<Click Fn="refreshGridpanelData"></Click>
</Listeners>


However, I have some data processing code in the btnRefreshClicked method in the codebehind that needs to be executed before refreshing the inner GridPanel's data. I tried

public void btnRefreshClicked(object sender, DirectEventArgs e)
{
// process other information in database
// refresh data
X.Call("refreshGridpanelData");
}
but this throws the Null reference error message.6918

My question is: Where can i call your js to refresh the data so that it fires after everything in the btnRefreshClicked method is finished executing?

Thank you!!




There is no "set up SingleExpand="true"" in my steps. I just asked you really need Single="false" option or not. My steps were for SingleExpand="false".

With SingleExpand="true" is should be:

<Expand Handler="this.component.down('gridpanel').getStore().reload ({ params: { CID: record.data.CID }});" />

To refresh with SingleExpand="false", please try:

var record = App.gpContainerTrailers.getStore().getAt(0);

App.RowExpander1.getComponent(record).down('gridpa nel').getStore().reload({
params: {
CID: record.data.CID
}
});

To refresh with SingleExpand="true", please try (the row should be expanded before, at least, once):

var record = App.gpContainerTrailers.getStore().getAt(0);

App.RowExpander1.component.down('gridpanel').getSt ore().reload({
params: {
CID: record.data.CID
}
});

Daniil
Sep 20, 2013, 5:41 AM
My question is: Where can i call your js to refresh the data so that it fires after everything in the btnRefreshClicked method is finished executing

Do you rebind the data to the parent GridPanel there? Could you, please, provide a test case?

Fahd
Sep 20, 2013, 2:58 PM
Yes. I do. Below is my test case. Thank you!


<%@ Page Language="C#" %>
<%@ Import Namespace="System" %>
<%@ Import Namespace="System.Data" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script type="text/javascript">
var refreshGridpanelData = function () {
var record = App.gpContainerTrailers.getStore().getAt(0);
App.RowExpander1.getComponent(record).down('gridpa nel').getStore().reload({ params: { CID: record.data.CID} });
}
</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("row #");

return TrailerList.Where(t => t.ContainerID == Convert.ToInt32(cid)).ToList();
}

public void btnRefreshClicked(object sender, DirectEventArgs e)
{
// process other information in database code goes here...

BindContainerTrailers(); // rebind parent GridPanel control
X.Call("refreshGridpanelData"); // refresh inner GridPanel data
}

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"
});

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 + " 1",
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>Expander Refresh</title>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />

<ext:Button ID="btnRefresh" Text="Refresh" runat="server" OnDirectClick="btnRefreshClicked" >

<Listeners>
<Click Fn="refreshGridpanelData"></Click>
</Listeners>
</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" AutoLoad="false">
<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(reco rd.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>
<Listeners>
<Expand Handler="this.getComponent(record).down('gridpanel').getSto re().reload({ params: { CID: record.data.CID }});" />
</Listeners>
</ext:RowExpander>
</Plugins>

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




Do you rebind the data to the parent GridPanel there? Could you, please, provide a test case?

Daniil
Sep 20, 2013, 3:59 PM
Please clarify why do you need to refresh an inner grid if it is refreshed each time on expanding according to this listener?

<Expand Handler="this.getComponent(record).down('gridpanel').getSto re().reload({ params: { CID: record.data.CID }});" />

Fahd
Sep 20, 2013, 4:20 PM
The reason is that the inner grid is already expanded when the user clicks on the "Refesh" button. So the user does not see the need to click on the "Expand" button again to see the new data.


Please clarify why do you need to refresh an inner grid if it is refreshed each time on expanding according to this listener?

<Expand Handler="this.getComponent(record).down('gridpanel').getSto re().reload({ params: { CID: record.data.CID }});" />

Daniil
Sep 20, 2013, 4:26 PM
Well, if expand the first row and click the Refresh button, the inner grid looks to be updated. And no JavaScript error. I tested with your example...

Fahd
Sep 20, 2013, 9:30 PM
It turnes out that the error message only comes up in IE 8.0

Do you have any workarounds to get it to work in IE 8.0?

Thanks!


Well, if expand the first row and click the Refresh button, the inner grid looks to be updated. And no JavaScript error. I tested with your example...

Daniil
Sep 23, 2013, 6:00 AM
I cannot reproduce. My steps are:

1. Open the example in IE8
2. Expand the first row with "Basket"
3. Click the Refresh button

Is that correct?

Fahd
Sep 23, 2013, 3:51 PM
Your steps are correct except that instead of clicking on "Basket", please click on the 2nd row which is "Tray".

Thanks!


I cannot reproduce. My steps are:

1. Open the example in IE8
2. Expand the first row with "Basket"
3. Click the Refresh button

Is that correct?

Daniil
Sep 24, 2013, 4:32 AM
There is the .getAt(0) in the refresh function.

var refreshGridpanelData = function () {
var record = App.gpContainerTrailers.getStore().getAt(0);
App.RowExpander1.getComponent(record).down('gridpa nel').getStore().reload({ params: { CID: record.data.CID} });
}

It means that it refreshes the first row.

To get all the expanded records, you can try the following:

App.RowExpander1.getExpanded();

It returns an array of expanded records.

Fahd
Sep 26, 2013, 9:53 PM
Hello,
My business requirement needs to get ONLY the expanded row, not just row 0 nor all the expanded rows. Return me all the expanded does not tell me which row the user had selected. Anyway, I tried
App.RowExpander1.getExpanded();
but it crashed.
6949
I would like to work something like this:
The .getAt(0) needs to be .getAt(WhatEverUserClickedToExpandRecordIndex)



There is the .getAt(0) in the refresh function.

var refreshGridpanelData = function () {
var record = App.gpContainerTrailers.getStore().getAt(0);
App.RowExpander1.getComponent(record).down('gridpa nel').getStore().reload({ params: { CID: record.data.CID} });
}

It means that it refreshes the first row.

To get all the expanded records, you can try the following:

App.RowExpander1.getExpanded();

It returns an array of expanded records.

Daniil
Sep 27, 2013, 12:47 PM
Hello,
My business requirement needs to get ONLY the expanded row, not just row 0 nor all the expanded rows. Return me all the expanded does not tell me which row the user had selected. Anyway, I tried
App.RowExpander1.getExpanded();
but it crashed.
6949

Please demonstrate how you tried it.

Fahd
Sep 27, 2013, 2:14 PM
It is the same as the one I posted earlier except for the line I replaced with your suggestion.
Replaced
var record = App.gpContainerTrailers.getStore().getAt(0); with

var record = App.RowExpander1.getExpanded();
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">
var refreshGridpanelData = function () {
// var record = App.gpContainerTrailers.getStore().getAt(0);
var record = App.RowExpander1.getExpanded();
App.RowExpander1.getComponent(record).down('gridpa nel').getStore().reload({ params: { CID: record.data.CID} });
}
</script>
<script runat="server">

protected void Page_Load(object sender, EventArgs e)
{
//if (X.IsAjaxRequest)
//{
// //We do not need to DataBind on an DirectEvent
// return;
//}
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();
}

public void btnRefreshClicked(object sender, DirectEventArgs e)
{
// process other information in database code goes here...

BindContainerTrailers(); // rebind parent GridPanel control
X.Call("refreshGridpanelData"); // refresh inner GridPanel data
}

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 = 1,
TrailerSize_Description = Desc + " 1",
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>Expander Refresh</title>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />

<ext:Button ID="btnRefresh" Text="Refresh" runat="server" OnDirectClick="btnRefreshClicked" >

<Listeners>
<Click Fn="refreshGridpanelData"></Click>
</Listeners>
</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" AutoLoad="false">
<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>
</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(reco rd.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>
<Listeners>
<Expand Handler="this.getComponent(record).down('gridpanel').getSto re().reload({ params: { CID: record.data.CID }});" />
</Listeners>
</ext:RowExpander>
</Plugins>

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



Please demonstrate how you tried it.

Daniil
Sep 27, 2013, 2:41 PM
The getExpanded method returns an array of all the expanded records.

You can try with:

var records = App.RowExpander1.getExpanded(),
record;

if (records.lenght > 0) {
record = records[0];
}


However, since you are setting up SingleExpand="false", you will probably need to iterate the array.

Fahd
Sep 27, 2013, 2:59 PM
while I am iterating through the array, what is the syntax for accessing the expanded record?

Thanks!


The getExpanded method returns an array of all the expanded records.

You can try with:

var records = App.RowExpander1.getExpanded(),
record;

if (records.lenght > 0) {
record = records[0];
}


However, since you are setting up SingleExpand="false", you will probably need to iterate the array.

Daniil
Sep 27, 2013, 6:40 PM
I am not sure I understand the question correctly, but:

var records = App.RowExpander1.getExpanded(),
record,
len = records.length,
i;

for (i = 0; i < len; i++) {
record = records[i];
}