Originally Posted by
Daniil
Thanks for the link Daniil! I'm trying to follow the example. I think this method is at the core of rendering:
protected void AddColumn(object sender, DirectEventArgs e)
{
Column newCol = new Column()
{
DataIndex = "test4",
Header = "New Column"
};
this.GridPanel1.ColumnModel.Columns.Add(newCol);
this.GridFilters1.Filters.Add(new StringFilter() { DataIndex = "test4" });
this.Store1.Reader[0].Fields.Add(new RecordField() { Name = "test4" });
this.Store1.DataSource = new object[]
{
new object[] { "test1", "test2", "test3", "test4" },
new object[] { "test5", "test6", "test7", "test8" },
new object[] { "test9", "test10", "test11", "test12" },
};
this.Store1.DataBind();
this.GridPanel1.Render();
}
My question is what steps are mandatory to perform in general prior to executing this.GridPanel1.Render();? I'm getting a few client side errors if I simply invoke .Render() without handling the Store and ColumnModel.
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Collections.Generic" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
this.Store1.DataSource = this.Jobs;
this.Store1.DataBind();
var sortInfo = new Ext.Net.SortInfo { Field = "Name", Direction = Ext.Net.SortDirection.DESC };
GridPanel1.GetStore().Sort(sortInfo.Field, sortInfo.Direction);
}
private List<Job> Jobs
{
get
{
List<Job> jobs = new List<Job>();
for (int i = 1; i <= 50; i++)
{
jobs.Add(new Job(
i,
"Task" + i.ToString(),
DateTime.Today.AddDays(i),
DateTime.Today.AddDays(i + i),
(i % 3 == 0)));
}
return jobs;
}
}
public class Job
{
public Job(int id, string name, DateTime start, DateTime end, bool completed)
{
this.ID = id;
this.Name = name;
this.Start = start;
this.End = end;
this.Completed = completed;
}
public int ID { get; set; }
public string Name { get; set; }
public DateTime Start { get; set; }
public DateTime End { get; set; }
public bool Completed { get; set; }
}
protected void ButtonReconfigure_Click(object sender, DirectEventArgs e)
{
// Can't be called alone!!!
GridPanel1.Render();
}
</script>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title></title>
<script type="text/javascript" language="javascript">
var myOnHeaderClick = function (g, index) {
if (this.headersDisabled || !this.cm.isSortable(index)) {
return;
}
g.stopEditing(true);
g.store.sort(this.cm.getDataIndex(index));
alert("Sorting by header click");
};
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Viewport ID="ViewPort1" runat="server" Layout="BorderLayout">
<Items>
<ext:GridPanel ID="GridPanel1" runat="server" StripeRows="true" Height="320" MinHeight="160"
Region="North" CollapseMode="Mini" Split="true">
<Store>
<ext:Store ID="Store1" runat="server" AutoLoad="true" WarningOnDirty="false">
<Reader>
<ext:JsonReader IDProperty="ID">
<Fields>
<ext:RecordField Name="ID" />
<ext:RecordField Name="Name" />
<ext:RecordField Name="Start" Type="Date" />
<ext:RecordField Name="End" Type="Date" />
<ext:RecordField Name="Completed" Type="Boolean" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
</Store>
<LoadMask ShowMask="false" />
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column Header="ID" Width="40" DataIndex="ID" />
<ext:Column ColumnID="Name" Width="160" Header="Job Name" DataIndex="Name" />
<ext:DateColumn ColumnID="Start" Header="Start" Width="120" DataIndex="Start" Format="yyyy-MM-dd" />
<ext:DateColumn ColumnID="End" Header="End" Width="120" DataIndex="End" Format="yyyy-MM-dd" />
<ext:Column ColumnID="Completed" Header="Completed" Width="80" DataIndex="Completed">
<Renderer Handler="return (value) ? 'Yes':'No';" />
</ext:Column>
</Columns>
</ColumnModel>
<BottomBar>
<ext:PagingToolbar ID="PagingToolbar1" runat="server" PageSize="10" DisplayInfo="true"
DisplayMsg="Displaying Jobs {0} - {1} of {2}">
<Items>
<ext:Button runat="server" ID="ButtonReconfigure" Text="Reconfigure">
<DirectEvents>
<Click OnEvent="ButtonReconfigure_Click">
<EventMask ShowMask="true" />
</Click>
</DirectEvents>
</ext:Button>
</Items>
</ext:PagingToolbar>
</BottomBar>
<View>
<ext:GridView ID="GridView1" runat="server">
</ext:GridView>
</View>
<Listeners>
<ViewReady Handler="var view = this.getView();
this.un('headerclick', view.onHeaderClick, view);
this.on('headerclick', myOnHeaderClick, view);
this.getStore().load();" />
<%--<SortChange Handler="alert('sorted!')" />--%>
</Listeners>
<Plugins>
<ext:GridFilters runat="server" ID="GridFilters1" Local="true">
<Filters>
<ext:DateFilter DataIndex="End">
<DatePickerOptions runat="server" TodayText="Now" />
<Listeners>
<Deactivate Handler="this.menu.items.each(function (item) {
if(item instanceof Ext.menu.CheckItem)
item.setChecked(false);
});" />
</Listeners>
</ext:DateFilter>
</Filters>
</ext:GridFilters>
</Plugins>
</ext:GridPanel>
<ext:Panel ID="Panel1" runat="server" Region="Center" Border="false" Frame="true"
Layout="FitLayout" AutoScroll="false">
<Items>
</Items>
</ext:Panel>
</Items>
</ext:Viewport>
</form>
</body>
</html>
