Jan 27, 2014, 3:52 PM
[CLOSED] UserControlLoader Grid databinding
Hi,
I'm am having problems with DataBinding of the grid when using UserControlLoader. When I click on the button I see the rows but not the data.
All the PagingToolbar refresh go to the first panel, but does not display the data.
How do I get this to work correctly?
Marc
TestPage.aspx
TestGridCtrl.ascx
I'm am having problems with DataBinding of the grid when using UserControlLoader. When I click on the button I see the rows but not the data.
All the PagingToolbar refresh go to the first panel, but does not display the data.
How do I get this to work correctly?
Marc
TestPage.aspx
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:TabPanel ID="tabPanel" runat="server" Title="TabPanel" Width="600" Height="300">
<Items>
<ext:UserControlLoader ID="TstGrid1" runat="server" Path="TestGridCtrl.ascx" />
<ext:UserControlLoader ID="UserControlLoader1" runat="server" Path="TestGridCtrl.ascx" />
<ext:UserControlLoader ID="UserControlLoader2" runat="server" Path="TestGridCtrl.ascx" />
<ext:UserControlLoader ID="UserControlLoader3" runat="server" Path="TestGridCtrl.ascx" />
</Items>
</ext:TabPanel>
<ext:Button runat="server" Text="Click">
<Listeners>
<Click Handler="
var doAction = function(filterPanel, index, allItems) {
if (typeof(filterPanel.applyFilter) == 'function')
filterPanel.applyFilter();
};
Ext.each(#{tabPanel}.items.items, doAction);
" />
</Listeners>
</ext:Button>
</form>
</body>
</html>
TestGridCtrl.ascx
<ext:GridPanel
ID="GridPanel1"
runat="server"
Width="700">
<Store>
<ext:Store ID="Store1" runat="server" OnReadData="MyData_Refresh" PageSize="10">
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="company" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:RowNumbererColumn ID="RowNumbererColumn1" runat="server" Width="35" />
<ext:Column ID="Column1" runat="server" Text="Company" DataIndex="company" Flex="1" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" Mode="Multi" />
</SelectionModel>
<View>
<ext:GridView ID="GridView1" runat="server" StripeRows="true" />
</View>
<BottomBar>
<ext:PagingToolbar ID="PagingToolbar1" runat="server" StoreID="Store1">
</ext:PagingToolbar>
</BottomBar>
<CustomConfig>
<ext:ConfigItem Name="applyFilter" Value="function() {
#{DirectMethods}.ApplyFilter();
}" Mode="Raw"/>
</CustomConfig>
</ext:GridPanel>
Code behind
public partial class TestGridCtrl : System.Web.UI.UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
if (X.IsAjaxRequest)
return;
}
[DirectMethod]
public void ApplyFilter()
{
this.BindData();
}
protected void MyData_Refresh(object sender, StoreReadDataEventArgs e)
{
this.BindData();
}
private void BindData()
{
Random rnd = new Random(DateTime.Now.Millisecond);
GridPanel1.Title = "Grid" + ClientID;
Store1.DataSource = this.Data.Take(rnd.Next(1,6));
Store1.DataBind();
}
protected override void OnInit(EventArgs e)
{
base.OnInit(e);
GridPanel1.Title = "CtrlID:" + ClientID;
}
private object[] Data
{
get
{
DateTime now = DateTime.Now;
return new object[]
{
new object[] { "3m Co", 71.72, 0.02, 0.03, now },
new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, now },
new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, now },
new object[] { "American Express Company", 52.55, 0.01, 0.02, now },
new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, now },
new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, now },
};
}
}
}
Last edited by Daniil; Jan 31, 2014 at 5:50 AM.
Reason: [CLOSED]