|
Subscribe
|
Hi,
I am creating a dynamic gridpanel based on the sample in http://www.coolite.com/forums/FindPost33468.aspx.
I want a GridView in my GridPanel which I am creating server-side using
//Create the GridViewExt.Net.GridView opView = new Ext.Net.GridView();
opView.ID = "GridView1";
opView.ForceFit = true;
opView.EmptyText = "No data available";
opView.GetRowClass.Fn = "contributionReportRenderRows";
this.grdData.View.Add(opView);
if (X.IsAjaxRequest)
{
this.grdData.Reconfigure();
}
However the GridView is not applied to GridPanel (but it is if I add it in the HTML) - how can I do this?
Thank you!
|
|
|
Hi,
Your code appears to be fine. Please post a full (but simplified) .aspx sample demonstrating how to reproduce this issue.
--
Geoffrey McGill
Coolite Inc.
Development Team
Skype : geoffrey.mcgill
Forum Guidelines | Coolite Examples | Coolite API Docs | ExtJS API Docs | Twitter
|
|
|
Hi Geoffrey
The code below re-produces the problem.
As you can see the Grid View is not visible. If you add the GridView to the HTML and comment out the line "this.GridPanel1.View.Add(opView);" then it is displayed.
<View>
<ext:GridView ForceFit="true" EmptyText="No data available">
<GetRowClass Handler="return 'reportSummaryLightRow'" />
</ext:GridView>
</View>
Thanks
Beth
<% @ Page Language="C#" %>
<% @ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< script runat="server">
private void AddField(RecordField field)
{
if (X.IsAjaxRequest)
{
this.Store1.AddField(field);
}
else
{
this.Store1.Reader.Reader.Fields.Add(field);
}
}
private void BindSet1()
{
//string now = DateTime.Now.TimeOfDay.ToString();
//this.Store1.DataSource = new object[]
//{
// new object[] {"Set1_1", 1, now},
// new object[] {"Set1_2", 2, now},
// new object[] {"Set1_3", 3, now}
//};
//this.Store1.DataBind();
IList<Dictionary<string, object>> opData = new List<Dictionary<string, object>>();
Dictionary<string, object> opObj = new Dictionary<string, object>();
opObj.Add( "StringField", "string");
opObj.Add( "IntField", 1);
opObj.Add( "Timestamp", DateTime.Now);
opData.Add(opObj);
opObj = new Dictionary<string, object>();
opObj.Add( "StringField", "string2");
opObj.Add( "IntField", 2);
opObj.Add( "Timestamp", DateTime.Now);
opData.Add(opObj);
// this.Store1.DataSource = opData;
// this.Store1.DataBind();
this.Store1.SetDataFromJson(String.Format("{{totalCount:{1},'data' : {0}}}", JSON.Serialize(opData), opData.Count - 1));
this.Store1.DataBind();
}
private void BuildSet1()
{
if (X.IsAjaxRequest)
{
this.Store1.RemoveFields();
}
this.AddField(new RecordField("StringField"));
this.AddField(new RecordField("IntField", RecordFieldType.Int));
this.AddField(new RecordField("Timestamp"));
this.BindSet1();
this.GridPanel1.ColumnModel.Columns.Add(new Column{DataIndex = "StringField", Header = "String"});
this.GridPanel1.ColumnModel.Columns.Add(new Column { DataIndex = "IntField", Header = "Int" });
this.GridPanel1.ColumnModel.Columns.Add(new Column { DataIndex = "Timestamp", Header = "Timestamp" });
//Create the GridView
Ext.Net. GridView opView = new Ext.Net.GridView();
opView.ID = "GridView1";
opView.ForceFit = true;
opView.EmptyText = "No data available";
opView.GetRowClass.Handler = "return 'reportSummaryLightRow'";
this.GridPanel1.View.Add(opView);
if(X.IsAjaxRequest)
{
this.GridPanel1.Reconfigure();
}
}
private void BindSet2()
{
//string now = DateTime.Now.TimeOfDay.ToString();
//this.Store1.DataSource = new object[]
//{
// new object[] {1, "Set2_1", 1, now},
// new object[] {2, "Set2_2", 2, now},
// new object[] {3, "Set2_3", 3, now},
// new object[] {4, "Set2_4", 4, now},
// new object[] {5, "Set2_5", 5, now},
// new object[] {6, "Set2_6", 6, now}
//};
//this.Store1.DataBind();
IList<Dictionary<string, object>> opData = new List<Dictionary<string, object>>();
Dictionary<string, object> opObj = new Dictionary<string, object>();
opObj.Add( "IntField1", 1);
opObj.Add( "IntField2", 2);
opObj.Add( "StringField", "string 2");
opObj.Add( "Timestamp", DateTime.Now);
opData.Add(opObj);
opObj = new Dictionary<string, object>();
opObj.Add( "IntField1", 1);
opObj.Add( "IntField2", 2);
opObj.Add( "StringField", "string 2");
opObj.Add( "Timestamp", DateTime.Now);
opData.Add(opObj);
opObj = new Dictionary<string, object>();
opObj.Add( "IntField1", 1);
opObj.Add( "IntField2", 2);
opObj.Add( "StringField", "string 2");
opObj.Add( "Timestamp", DateTime.Now);
opData.Add(opObj);
opObj = new Dictionary<string, object>();
opObj.Add( "IntField1", 1);
opObj.Add( "IntField2", 2);
opObj.Add( "StringField", "string 2");
opObj.Add( "Timestamp", DateTime.Now);
opData.Add(opObj);
// this.Store1.DataSource = opData;
// this.Store1.DataBind();
this.Store1.SetDataFromJson(String.Format("{{totalCount:{1},'data' : {0}}}", JSON.Serialize(opData), opData.Count - 1));
this.Store1.DataBind();
}
private void BuildSet2()
{
if (X.IsAjaxRequest)
{
this.Store1.RemoveFields();
}
this.AddField(new RecordField("IntField1", RecordFieldType.Int));
this.AddField(new RecordField("StringField"));
this.AddField(new RecordField("IntField2", RecordFieldType.Int));
this.AddField(new RecordField("Timestamp"));
this.BindSet2();
this.GridPanel1.ColumnModel.Columns.Add(new CommandColumn { Commands = { new GridCommand { CommandName = "Cmd1", Icon = Icon.Add } } });
this.GridPanel1.ColumnModel.Columns.Add(new Column { DataIndex = "IntField1", Header = "Int1" });
this.GridPanel1.ColumnModel.Columns.Add(new Column { DataIndex = "StringField", Header = "String" });
this.GridPanel1.ColumnModel.Columns.Add(new Column { DataIndex = "IntField2", Header = "Int2" });
this.GridPanel1.ColumnModel.Columns.Add(new Column { DataIndex = "Timestamp", Header = "Timestamp" });
if (X.IsAjaxRequest)
{
this.GridPanel1.Reconfigure();
this.GridPanel1.RegisterColumnPlugins();
}
}
protected void RefreshDataSet(object sender, StoreRefreshDataEventArgs e)
{
if (DataSetSelector.SelectedItem != null && !string.IsNullOrEmpty(DataSetSelector.SelectedItem.Value))
{
this.BindDataSet(null, null);
}
}
protected void BindDataSet(object sender, DirectEventArgs e)
{
switch (DataSetSelector.SelectedItem.Value)
{
case "1":
this.BuildSet1();
break;
case "2":
this.BuildSet2();
break;
}
}
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
ResourceManager1.RegisterIcon( Icon.Add);
ResourceManager.RegisterControlResources<GridPanel>();
}
}
</ script>
< html xmlns="http://www.w3.org/1999/xhtml">
< head id="Head1" runat="server">
< title></title>
< style type="text/css">
.reportSummaryLightRow div
{
background-color: #ededed;
font-weight: bold;
}
</ style>
</ head>
< body>
< form id="form1" runat="server">
< ext:ResourceManager ID="ResourceManager1" runat="server" />
< ext:Store ID="Store1" runat="server" OnRefreshData="RefreshDataSet" IgnoreExtraFields="false">
<Reader>
<ext:JsonReader Root="data">
</ext:JsonReader>
</Reader>
</ ext:Store>
< ext:ComboBox ID="DataSetSelector" runat="server" Editable="false">
< Items>
< ext:ListItem Text="Set 1" Value="1" />
< ext:ListItem Text="Set 2" Value="2" />
</ Items>
< DirectEvents>
< Select OnEvent="BindDataSet" />
</ DirectEvents>
</ ext:ComboBox>
< ext:GridPanel ID="GridPanel1" runat="server" StoreID="Store1" Title="Grid" Width="600" Height="350">
< SelectionModel>
< ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
</ SelectionModel>
< Buttons>
< ext:Button ID="Button3" runat="server" Text="Refresh current set">
< Listeners>
< Click Handler="#{GridPanel1}.store.reload();" />
</ Listeners>
</ ext:Button>
</ Buttons>
</ ext:GridPanel>
</ form></body></html>
|
|
|
Hi Beth,
The GridPanel does not allow updating of its internal GridView without re-rendering the GridPanel.
Try calling .Render() on the GridPanel, after you add the new GridView.
Example
this.GridPanel1.Render();
Hope this helps.
--
Geoffrey McGill
Coolite Inc.
Development Team
Skype : geoffrey.mcgill
Forum Guidelines | Coolite Examples | Coolite API Docs | ExtJS API Docs | Twitter
|
|
|
Hello, bethc and Geoffrey!
Geoffrey, it works fine but there is at least one more way to do it.
Also we can use the handler of OnInit Event for the GridPanel. And we don't have to invoke the Render() method on the GridPanel twice (the first time it's implicity). So, it can has an influence on an operating speed of an application. By the way if it deals with a big size of data.
It looks like:
<script runat="server">
protected void initGridView(object sender, EventArgs e)
{
Ext.Net.GridView opView = new Ext.Net.GridView();
opView.ID = "GridView1";
opView.ForceFit = true;
opView.EmptyText = "No data available";
opView.GetRowClass.Handler = "return 'reportSummaryLightRow'";
this.GridPanel1.View.Add(opView);
}
</script>
...
ext:GridPanel ID="GridPanel1" runat="server" StoreID="Store1"
OnInit="initGridView">
...the content of the GridPanel...
</ext:GridPanel>
--
Best wishes,
Daniil Veriga
|
|
|
Geoffrey, it works fine but there is one (at least) more way to do it.
Also we can use the handler of OnInit Event for the GridPanel.
Best I can tell, @bethc wanted to add the GridView to the GridPanel after the dataset was selected in the ComboBox (and during a DirectEvent). Configuring the GridPanels OnInit will also be fired on initial Page_Load.
--
Geoffrey McGill
Coolite Inc.
Development Team
Skype : geoffrey.mcgill
Forum Guidelines | Coolite Examples | Coolite API Docs | ExtJS API Docs | Twitter
|
|
|
I just demonstrated the flexibility of the Ext.net toolkit
--
Best wishes,
Daniil Veriga
|
|
|
Morning Geoffrey,
Thanks for that - it works well.
It doesn't work though if I have the line "this.GridPanel1.RegisterColumnPlugins();" after the Reconfigure() call. So I just removed that line!
Thanks
Beth
|
|
|
Hi,
If you call Render method then Reconfigure calling is not required and must be removed
--
Vladimir Shcheglov
Coolite Inc.
Development Team
Forum Guidelines | Coolite Examples | Coolite API Docs | ExtJS API Docs | Twitter
|
|
|
|