PDA

View Full Version : GridPanel + ObjectDataSource



Chelonian
Sep 04, 2008, 10:31 PM
Hi guys,

Is it possible to bind a GridPanel control to an ObjectDataSource or directly to an IList<> or an IEnumerable<> object?

Reading the forums I saw a post from July saying that LinqDataSource and others datasources were supported but I cannot figure out how.

I'm currently using Linq To Entities on a project and if I can avoid converting the entity objects to Array or Xml that would be awesome.

Any advise/sample is welcome :)

Thanks,
Pablo

Vladimir
Sep 05, 2008, 7:16 AM
Hi Pablo,

SqlDataSource example:


<%@ Page Language="C#" %>

<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Coolite Toolkit - GridPanel with SqlDataSource</title>
<style type="text/css">
.x-grid3-td-fullName .x-grid3-cell-inner {
font-family:tahoma, verdana;
display:block;
font-weight:normal;
font-style: normal;
color:#385F95;
white-space:normal;
}

.x-grid3-row-body p {
margin:5px 5px 10px 5px !important;
width:99%;
color:Gray;
}

</style>

<script type="text/javascript">
var fullName = function (value, metadata, record, rowIndex, colIndex, store) {
return ''+record.data.LastName + ' ' + record.data.FirstName+'';
};
</script>
</head>
<body>
<form id="form1" runat="server">

<ext:ScriptManager ID="ScriptManager1" runat="server" />

<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
SelectCommand="SELECT [EmployeeID],
[LastName],
[FirstName],
[Title],
[TitleOfCourtesy],
[BirthDate],
[HireDate],
[Address],
[City],
[Region],
[PostalCode],
[Country],
[HomePhone],
[Extension],
[Notes] FROM [Employees]">
</asp:SqlDataSource>

<ext:Store ID="Store1" runat="server" DataSourceID="SqlDataSource1">
<Reader>
<ext:JsonReader>
<Fields>
<ext:RecordField Name="EmployeeID" />
<ext:RecordField Name="FirstName" />
<ext:RecordField Name="LastName" />
<ext:RecordField Name="Title" />
<ext:RecordField Name="TitleOfCourtesy" />
<ext:RecordField Name="BirthDate" Type="Date" />
<ext:RecordField Name="HireDate" Type="Date" />
<ext:RecordField Name="Address" />
<ext:RecordField Name="City" />
<ext:RecordField Name="Region" />
<ext:RecordField Name="PostalCode" />
<ext:RecordField Name="Country" />
<ext:RecordField Name="HomePhone" />
<ext:RecordField Name="Extension" />
<ext:RecordField Name="Notes" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>

<ext:GridPanel
runat="server"
ID="GridPanel1"
Width="1000"
Height="570"
Title="Employees"
Frame="true"
StoreID="Store1">
<ColumnModel runat="server">
<Columns>
<ext:Column ColumnID="fullName" Header="Full Name" Width="150" DataIndex="LastName">
<Renderer Fn="fullName" />
</ext:Column>

<ext:Column DataIndex="Title" Header="Title" Width="150" />
<ext:Column DataIndex="TitleOfCourtesy" Header="Title Of Courtesy" Width="150" />
<ext:Column DataIndex="BirthDate" Header="BirthDate" Width="110">
<Renderer Fn="Ext.util.Format.dateRenderer('Y-m-d')" />
</ext:Column>
<ext:Column DataIndex="HireDate" Header="HireDate" Width="110">
<Renderer Fn="Ext.util.Format.dateRenderer('Y-m-d')" />
</ext:Column>
<ext:Column DataIndex="Address" Header="Address" Width="150" />
<ext:Column DataIndex="City" Header="City" Width="100" />
<ext:Column DataIndex="Region" Header="Region" Width="100" />
<ext:Column DataIndex="PostalCode" Header="PostalCode" Width="100" />
<ext:Column DataIndex="Country" Header="Country" Width="100" />
<ext:Column DataIndex="HomePhone" Header="HomePhone" Width="150" />
<ext:Column DataIndex="Extension" Header="Extension" Width="100" />
</Columns>
</ColumnModel>
<View>
<ext:GridView runat="server" EnableRowBody="true">
<GetRowClass Handler="rowParams.body = '<p>'+record.data.Notes+'</p>'; return 'x-grid3-row-expanded';" />
</ext:GridView>
</View>
<SelModel>
<ext:RowSelectionModel runat="server" />
</SelModel>
</ext:GridPanel>
</form>
</body>
</html>


The example is same for any DataSource object, just replace the SqlDataSource by these

ObjectDataSource


<asp:ObjectDataSource ID="ObjectDataSource1" runat="server"
SelectMethod="GetAll" TypeName="Coolite.Sandbox.Northwind.BLL.Employees">
</asp:ObjectDataSource>


LinqDataSource


<asp:LinqDataSource ID="LinqDataSource1" runat="server"
ContextTypeName="Coolite.Sandbox.App_Code.Northwind.NortwindDataCon text"
Select="new (EmployeeID,
LastName,
FirstName,
Title,
TitleOfCourtesy,
BirthDate,
HireDate,
Address,
City,
Region,
PostalCode,
Country,
HomePhone,
Extension,
Notes)"
TableName="Employees">
</asp:LinqDataSource>


XmlDataSource


<asp:XmlDataSource ID="XmlDataSource1" runat="server"
DataFile="~/GridPanel/Shared/Plants.xml"
TransformFile="~/GridPanel/Shared/Plants.xsl">
</asp:XmlDataSource>


The <ext:Store> has a DataSourceID property which must be set with the ID of the <asp> DataSource control. You can also set the DataSource property with any IEnumerable object which will convert the IEnumerable object to a json object (just need to describe it's structure using the <ext:RecordField> properties as in above example).

P.S We will be releasing an example package which will demonstrate techiniques for working with Grid/Store controls. Hope fully in the next day or two.

Vladimir
Sep 05, 2008, 7:18 AM
And one more useful example. The ObjectDataSource example with remote paging/sorting



<%@ Page Language="C#" %>

<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Coolite Toolkit - GridPanel with ObjectDataSource</title>
<script runat="server">
protected void Store1_RefreshData(object sender, StoreRefreshDataEventArgs e)
{
ObjectDataSource1.SelectParameters["start"].DefaultValue = e.Start.ToString();
ObjectDataSource1.SelectParameters["limit"].DefaultValue = e.Limit.ToString();
ObjectDataSource1.SelectParameters["sort"].DefaultValue = e.Sort;
ObjectDataSource1.SelectParameters["dir"].DefaultValue = e.Dir.ToString();

Store1.DataBind();
}

protected void ODS1_Selected(object sender, ObjectDataSourceStatusEventArgs e)
{
(this.Store1.Proxy[0] as DataSourceProxy).TotalCount = (int)e.OutputParameters["count"];
}
</script>

<style type="text/css">
.x-grid3-td-fullName .x-grid3-cell-inner {
font-family:tahoma, verdana;
display:block;
font-weight:normal;
font-style: normal;
color:#385F95;
white-space:normal;
}

.x-grid3-row-body p {
margin:5px 5px 10px 5px !important;
width:99%;
color:Gray;
}
</style>

<script type="text/javascript">
var fullName = function (value, metadata, record, rowIndex, colIndex, store) {
return ''+record.data.LastName + ' ' + record.data.FirstName+'';
};
</script>
</head>
<body>
<form id="form1" runat="server">

<ext:ScriptManager ID="ScriptManager1" runat="server" />

<asp:ObjectDataSource ID="ObjectDataSource1" runat="server" OnSelected="ODS1_Selected"
SelectMethod="GetEmployeesFilter" TypeName="Coolite.Sandbox.Northwind.BLL.Employees">
<SelectParameters>
<asp:Parameter Name="start" DefaultValue="0" Type="Int32" />
<asp:Parameter Name="limit" DefaultValue="3" Type="Int32" />
<asp:Parameter Name="sort" DefaultValue="" />
<asp:Parameter Name="dir" DefaultValue="" />
<asp:Parameter Name="count" DefaultValue="" Direction="Output" Type="Int32" />
</SelectParameters>
</asp:ObjectDataSource>

<ext:Store ID="Store1" runat="server" DataSourceID="ObjectDataSource1" AutoLoad="true" RemoteSort="true" OnRefreshData="Store1_RefreshData">
<Proxy>
<ext:DataSourceProxy></ext:DataSourceProxy>
</Proxy>
<Reader>
<ext:JsonReader>
<Fields>
<ext:RecordField Name="EmployeeID" />
<ext:RecordField Name="FirstName" />
<ext:RecordField Name="LastName" />
<ext:RecordField Name="Title" />
<ext:RecordField Name="TitleOfCourtesy" />
<ext:RecordField Name="BirthDate" Type="Date" />
<ext:RecordField Name="HireDate" Type="Date" />
<ext:RecordField Name="Address" />
<ext:RecordField Name="City" />
<ext:RecordField Name="Region" />
<ext:RecordField Name="Postalcode" />
<ext:RecordField Name="Country" />
<ext:RecordField Name="Homephone" />
<ext:RecordField Name="Extension" />
<ext:RecordField Name="Notes" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>

<ext:GridPanel
runat="server"
ID="GridPanel1"
Width="1000"
Height="570"
Title="Employees"
Frame="true"
StoreID="Store1">
<ColumnModel runat="server">
<Columns>
<%--Set DataIndex for this column for sorting on LastName--%>
<ext:Column ColumnID="fullName" Header="Full Name" DataIndex="LastName" Width="150">
<Renderer Fn="fullName" />
</ext:Column>
<ext:Column DataIndex="Title" Header="Title" Width="150" />
<ext:Column DataIndex="TitleOfCourtesy" Header="Title Of Courtesy" Width="150" />
<ext:Column DataIndex="BirthDate" Header="Birth Date" Width="110">
<Renderer Fn="Ext.util.Format.dateRenderer('Y-m-d')" />
</ext:Column>
<ext:Column DataIndex="HireDate" Header="Hire Date" Width="110">
<Renderer Fn="Ext.util.Format.dateRenderer('Y-m-d')" />
</ext:Column>
<ext:Column DataIndex="Address" Header="Address" Width="150" />
<ext:Column DataIndex="City" Header="City" Width="100" />
<ext:Column DataIndex="Region" Header="Region" Width="100" />
<ext:Column DataIndex="Postalcode" Header="Postal Code" Width="100" />
<ext:Column DataIndex="Country" Header="Country" Width="100" />
<ext:Column DataIndex="Homephone" Header="Home Phone" Width="150" />
<ext:Column DataIndex="Extension" Header="Extension" Width="100" />
</Columns>
</ColumnModel>
<View>
<ext:GridView runat="server" EnableRowBody="true">
<GetRowClass Handler="rowParams.body = '<p>'+record.data.Notes+'</p>'; return 'x-grid3-row-expanded';" />
</ext:GridView>
</View>
<SelModel>
<ext:RowSelectionModel runat="server"/>
</SelModel>
<Bbar>
<ext:PagingToolBar ID="PagingToolBar1" runat="server"
PageSize="3"
StoreID="Store1"
DisplayInfo="true"
DisplayMsg="Displaying employees {0} - {1} of {2}"
EmptyMsg="No employees to display"
/>
</Bbar>
<LoadMask ShowMask="true" />
</ext:GridPanel>
</form>
</body>
</html>