View Full Version : [CLOSED] Need simple GridPanel explanation/example

Sep 05, 2008, 4:21 PM

I'm trying to convert an existing asp:repeater and and table into a nice swanky GridPanel but i'm struggling with the concept and finding an example i can copy. I've searched through the GridPanel topics and tried to work it out but i'm going round in circles. To compound things i'm not what you would call an experienced .net developer.

this is the code i'm trying to convert to give you an idea...

RepeaterJobHistory.DataSource = JobLineLogic.GetJobLinesForLiftOrderByType(li.Id);

<asp:Repeater ID="RepeaterJobHistory" runat="server">
<table style="width: 100%">
<td class="bold">Job ref</td>
<td class="bold">Job type</td>
<td class="bold">Date</td>
<td><%# DataBinder.Eval(Container.DataItem, "Jobid.Id")%> (<%# DataBinder.Eval(Container.DataItem, "Id")%>)</td>
<td><%# DataBinder.Eval(Container.DataItem, "Jobid.LookupJobTypeid.ShortValue")%>&amp;nbsp;</td>
<td><%# DisplayJobDate((Gems.BusinessObjects.Job)(DataBind er.Eval(Container.DataItem, "Jobid")))%>&amp;nbsp;</td>

i can't seem to see the connection between the diiferent attributes of the GridPanel, ColumnModel, Columns etc... and how they link back to the DataBind() especially as the GridPanel doesn't have a .DataSource ?

If anybody has a basic example or can point me in the right direction I'd be very grateful

Sep 05, 2008, 4:40 PM
vladimir has some really good examples at another thread: http://forums.ext.net/showthread.php?threadid=1459-4-1.aspx

Here's another even simpler example that binds to business objects


<ext:ScriptManager ID="ScriptManager1" runat="server">
<ext:Store ID="Store1" runat="server">
<ext:RecordField Name="ID">
<ext:RecordField Name="Name">
<ext:RecordField Name="Description">
<ext:GridPanel ID="GridPanel1" runat="server" StoreID="Store1" EnableColumnMove="true"
Title="Items" AutoHeight="true" Width="500">
<ColumnModel ID="ColumnModel1" runat="server">
<ext:RowNumbererColumn Fixed="true">
<ext:Column DataIndex="ID" Header="ID" Width="200">
<ext:Column DataIndex="Name" Header="Name">
<ext:Column DataIndex="Description" Header="Description">
<ext:RowSelectionModel runat="server" ID="RowSelectionModel" SingleSelect="true">
<LoadMask ShowMask="true" />
<ext:GridView ForceFit="true">


Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not IsPostBack Then
Me.Store1.DataSource = GetFakeItems()
End If
End Sub

Private Function GetFakeItems() As Generic.List(Of DummyObj)
Dim items As New Generic.List(Of DummyObj)
For i As Integer = 1 To 10
items.Add(New DummyObj("Item" &amp; i, "Description" &amp; i))
Return items
End Function

Private Class DummyObj

Private _ID As Guid = Guid.NewGuid()
Public ReadOnly Property ID() As Guid
Return _ID
End Get
End Property

Private _Name As String = String.Empty
Public Property Name() As String
Return _Name
End Get
Set(ByVal value As String)
_Name = value
End Set
End Property

Private _Description As String = String.Empty
Public Property Description() As String
Return _Description
End Get
Set(ByVal value As String)
_Description = value
End Set
End Property

Private _ExtraStuff As String = "ExtraStuff"
Public Property ExtraStuff() As String
Return _ExtraStuff
End Get
Set(ByVal value As String)
_ExtraStuff = value
End Set
End Property

Public Sub New(ByVal aName As String, ByVal aDescription As String)
Me.Name = aName
Me.Description = aDescription
End Sub

End Class

Sep 07, 2008, 5:05 PM
Thanks jchau, i've tried to decipher your example as well as Vlads but my level of .net is very much a beginner and as i've not used json or ajax before so i'm stuggling here.

Maybe i don't need a GridPanel as i do not need any paging and i don't need to update or delete any data it's just that the examples i've seen here on the forum seem to be exactly what i'm looking for i.e. a really nicely formatted table with sorting in that extjs kind of way. Is there another control that gives me a read only view that looks like a GridPanel ??

Assuming GridPanel is the way forwrd I want to display rows from an iList so i'm wondering if i need to convert that into some kind of temporary dataview or datatable or something else to link it as a datasource to the GridPanel via the Store

Sep 07, 2008, 6:16 PM
one quick question... how many items do you typically have in your List<>?

Sep 07, 2008, 8:02 PM
around 30-50, it's a history of jobs they need to see the whole thing. I'd like to Filter in addition to sort but i'm guessing the easiest way to do that wold be to add a couple of controls above the panel and filter the data in the code behind


Sep 10, 2008, 9:23 PM
Hi Steve,

I created a sample for you demonstrating how to load a generic List<> of "Job" objects into the <ext:GridPanel>.

The sample is coded almost completely in markup. The only server-side code required was to create a Job class, a "Jobs" property to return a List<> of Job objects, and two simple lines in the Page_Load event to add the Data to the <ext:Store> and DataBind(). The two lines in the Page_Load event are really the only new code. The "Job" class and retrieving a list of Jobs would typically be created elsewhere within your Business/Data Layer(s).

See http://sandbox.ext.net/GridPanel/Simple/

The full Source Code for the sample is available by clicking the "Source Code" Button on the window.

The sample also demonstrates full client-side Paging, Sorting and Filtering.

The List of Jobs are converted into Json and sent to the browser with the other required configuration scripts. The sample loads 50 records, although I'd guesstimate that even loading up to maybe 200-300 Jobs wouldn't show any performance impact.

Hope this helps.