Mar 24, 2015, 12:36 PM
[CLOSED] Dynamic user control pattern and data binding
Hi,
Can you please help, I can't get my head around the problem right now. The data binding issues has something to do with "dynamic user control pattern" which I am using to load my views.
I would like to bind data to the grid while the view (user control) is being loaded.
Two reasons:
1. I'd like to do it within user control load request (without any proxy that creates extra request after user control is loaded)
2. When the view/user control is rendered I would like to see the grid with data (first page) already loaded.
Default.aspx
UserControl0.ascx
When you run the example and "Load User Control" then the grid will be empty. Click "Refresh" on paging tool bar and we can see the data.
I would like to see the data straight away after the control is loaded. I have been trying to call BindMe() in OnLoad, Init etc... without much success.
I am definitely missing something here :(
Thank you,
Can you please help, I can't get my head around the problem right now. The data binding issues has something to do with "dynamic user control pattern" which I am using to load my views.
I would like to bind data to the grid while the view (user control) is being loaded.
Two reasons:
1. I'd like to do it within user control load request (without any proxy that creates extra request after user control is loaded)
2. When the view/user control is rendered I would like to see the grid with data (first page) already loaded.
Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" %>
<script runat="server">
UserControl currentUC;
protected void Page_PreInit(object sender, EventArgs e)
{
string num = HttpContext.Current.Request.Params["CurrentControl"] as string;
if (!string.IsNullOrWhiteSpace(num))
{
this.LoadUserControl(num);
}
}
private void LoadUserControl(string num, bool update = false)
{
if (update && currentUC != null)
{
this.Panel1.ContentControls.Clear();
}
currentUC = (UserControl)this.LoadControl(
string.Format("UserControl{0}.ascx", num));
currentUC.ID = "UC" + num;
this.Panel1.ContentControls.Add(currentUC);
if (update)
{
CurrentControl.Text = num;
this.Panel1.UpdateContent();
}
}
protected void Button1_Click(object sender, DirectEventArgs e)
{
this.LoadUserControl("0", true);
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>User control</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:Hidden ID="CurrentControl" runat="server" />
<ext:Panel
ID="Panel1"
runat="server"
Title="User Controls"
Width="800"
Height="800"
BodyPadding="10">
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button
ID="Button1"
runat="server"
Text="Load User Control"
OnDirectClick="Button1_Click" />
</Items>
</ext:Toolbar>
</TopBar>
</ext:Panel>
</form>
</body>
</html>
UserControl0.ascx
<%@ Control Language="C#" AutoEventWireup="false" CodeBehind="UserControl0.ascx.cs" Inherits="TheGrid.UserControl0" %>
<script runat="server">
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 },
new object[] { "Boeing Co.", 75.43, 0.53, 0.71, now },
new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, now },
new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, now },
new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, now },
new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, now },
new object[] { "General Electric Company", 34.14, -0.08, -0.23, now },
new object[] { "General Motors Corporation", 30.27, 1.09, 3.74, now },
new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, now },
new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, now },
new object[] { "Intel Corporation", 19.88, 0.31, 1.58, now },
new object[] { "International Business Machines", 81.41, 0.44, 0.54, now },
new object[] { "Johnson & Johnson", 64.72, 0.06, 0.09, now },
new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, now },
new object[] { "McDonald\"s Corporation", 36.76, 0.86, 2.40, now },
new object[] { "Merck & Co., Inc.", 40.96, 0.41, 1.01, now },
new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, now },
new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, now },
new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58, now },
new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02, now },
new object[] { "The Procter & Gamble Company", 61.91, 0.01, 0.02, now },
new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, now },
new object[] { "Verizon Communications", 35.57, 0.39, 1.11, now },
new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, now }
};
}
}
protected void MyData_Refresh(object sender, StoreReadDataEventArgs e)
{
this.BindMe();
}
public void BindMe()
{
Store store = this.GridPanel1.GetStore();
store.DataSource = this.Data;
store.DataBind();
}
protected void Page_Load(object sender, EventArgs e)
{
this.BindMe();
}
</script>
<ext:GridPanel
ID="GridPanel1"
runat="server"
Height="600"
Border="false"
Frame="false">
<Store>
<ext:Store ID="Store1" runat="server" OnReadData="MyData_Refresh" PageSize="10">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="company" />
<ext:ModelField Name="price" Type="Float" />
<ext:ModelField Name="change" Type="Float" />
<ext:ModelField Name="pctChange" Type="Float" />
<ext:ModelField Name="lastChange" Type="Date" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:RowNumbererColumn runat="server" Width="35" />
<ext:Column runat="server" Text="Company" DataIndex="company" Flex="1" />
<ext:Column runat="server" Text="Price" Width="75" DataIndex="price" />
<ext:Column runat="server" Text="Change" Width="75" DataIndex="change" />
<ext:Column runat="server" Text="Change" Width="75" DataIndex="pctChange" />
<ext:DateColumn runat="server" Text="Last Updated" Width="85" DataIndex="lastChange" Format="H:mm:ss" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel runat="server" Mode="Multi" />
</SelectionModel>
<View>
<ext:GridView runat="server" StripeRows="true" />
</View>
<BottomBar>
<ext:PagingToolbar runat="server">
<Items>
<ext:Label runat="server" Text="Page size:" />
<ext:ToolbarSpacer runat="server" Width="10" />
<ext:ComboBox runat="server" Width="80">
<Items>
<ext:ListItem Text="1" />
<ext:ListItem Text="2" />
<ext:ListItem Text="10" />
<ext:ListItem Text="20" />
</Items>
<SelectedItems>
<ext:ListItem Value="10" />
</SelectedItems>
<Listeners>
<Select Handler="#{GridPanel1}.store.pageSize = parseInt(this.getValue(), 10); #{GridPanel1}.store.reload();" />
</Listeners>
</ext:ComboBox>
</Items>
<Plugins>
<ext:ProgressBarPager runat="server" />
</Plugins>
</ext:PagingToolbar>
</BottomBar>
</ext:GridPanel>
When you run the example and "Load User Control" then the grid will be empty. Click "Refresh" on paging tool bar and we can see the data.
I would like to see the data straight away after the control is loaded. I have been trying to call BindMe() in OnLoad, Init etc... without much success.
I am definitely missing something here :(
Thank you,
Last edited by Daniil; Mar 27, 2015 at 2:45 PM.
Reason: [CLOSED]