ExtGridView

Parser Error

Description: An error occurred during the parsing of a resource required to service this request. Please review the following specific parse error details and modify your source file appropriately.

Parser Error Message: Unknown server tag 'cc:ExtGridView'.

Source Error:

Line 5: <%@ Import Namespace="iSol.ASPNET.Web" %>
Line 6:
Line 7:

What If I wont know the hierarchy until runtime ? Can I programatically loop through, adding child tables/grids before rendering ? I might have as many as 5 levels of heirarchy on some rows, while others might only have 1.

The ExtGridView works great.I work on VB.Net. I have converted the entire project to VB.Net I have just been having a problem while editing the Extgridview or the gridview inside it.The methods such as "RowUpdating" does not get executed at the time of editing.Please suggest me a work around. Any help on this is greatly appreciated.

Thanks
Srinivas

-- modified at 18:26 Thursday 30th November, 2006

I want to expand all records when page starts as default.
How can I set this?
Thanks

How do I get columns set in the master grid to not be visible? The ends up setting the prior column to not be visible and the one set to be not visible is visible. I have been unable to figure out how to make this work correctly.

Thanks!

gnwrg

Anyone has the VB code? Thanks.

'TestGridControl.ascx.vb
Imports System
Imports System.Data
Imports System.Configuration
Imports System.Collections
Imports System.Web
Imports System.Web.Security
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports System.Web.UI.WebControls.WebParts
Imports System.Web.UI.HtmlControls
Imports NorthWindDataSetTableAdapters

Imports CustomControls

Partial Public Class TestGridControl
Inherits System.Web.UI.UserControl

Protected taOrders As OrdersTableAdapter = New NorthWindDataSetTableAdapters.OrdersTableAdapter()
Protected taCustomers As CustomersTableAdapter = New NorthWindDataSetTableAdapters.CustomersTableAdapter()
Protected taOrderDetails As OrderDetailsExtendedTableAdapter = New NorthWindDataSetTableAdapters.OrderDetailsExtendedTableAdapter()

Protected Overrides Sub OnLoad(ByVal e As EventArgs)
MyBase.OnLoad(e)

AddHandler gridCustomers.RowCreated, AddressOf gridCustomers_RowCreated

gridCustomers.DataSource = taCustomers.GetData()
gridCustomers.DataBind()

Dim ds As SqlDataSource = New SqlDataSource()
End Sub

Private Sub gridCustomers_RowCreated(ByVal sender As Object, ByVal e As GridViewRowEventArgs)
If e.Row.RowType = DataControlRowType.DataRow Then
Dim gridOrders As GridView = TryCast(e.Row.FindControl("gridOrders"), GridView)
AddHandler gridOrders.RowCreated, AddressOf gridOrders_RowCreated

Dim dataRow As NorthWindDataSet.CustomersRow = TryCast((TryCast(e.Row.DataItem, DataRowView)).Row, NorthWindDataSet.CustomersRow)
Dim dtOrders As NorthWindDataSet.OrdersDataTable = taOrders.GetDataByCustomerID(dataRow.CustomerID)
gridOrders.DataSource = dtOrders
TryCast(e.Row, ExtGridViewRow).ShowExpand = dtOrders.Rows.Count > 0
End If
End Sub

Private Sub gridOrders_RowCreated(ByVal sender As Object, ByVal e As GridViewRowEventArgs)
If e.Row.RowType = DataControlRowType.DataRow Then
Dim gridOrderDetails As GridView = TryCast(e.Row.FindControl("gridOrderDetails"), GridView)

Dim dataRow As NorthWindDataSet.OrdersRow = TryCast((TryCast(e.Row.DataItem, DataRowView)).Row, NorthWindDataSet.OrdersRow)
Dim dtOrderDetails As NorthWindDataSet.OrderDetailsExtendedDataTable = taOrderDetails.GetDataByOrderID(dataRow.OrderID)
gridOrderDetails.DataSource = dtOrderDetails
TryCast(e.Row, ExtGridViewRow).ShowExpand = dtOrderDetails.Rows.Count > 0
End If
End Sub

Protected Sub gridCustomers_PageIndexChanging(ByVal sender As Object, ByVal e As GridViewPageEventArgs)
gridCustomers.PageIndex = e.NewPageIndex
gridCustomers.DataBind()
End Sub
End Class

Partial Class TestGridControl
End Class

'ExtGridView.vb
Imports Microsoft.VisualBasic
Imports System
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports System.Web.UI.HtmlControls
Imports System.ComponentModel

Namespace CustomControls
'''

''' ExtGridViewRow extendes the standard GridView row to render the contents from the last cell as an expandible cell
'''

Public Class ExtGridViewRow
Inherits GridViewRow
Private _expCell As TableCell
Private _ihExp As HtmlInputHidden
Private _ctlExpand As HtmlAnchor
Private _showExpand As Boolean

'''

''' Gets or sets a value which specifies if the expand boutton should be displayed or not for the current row.
'''

Public Property ShowExpand() As Boolean
Get
Return _showExpand
End Get
Set(ByVal value As Boolean)
_showExpand = Value
End Set
End Property

'''

''' Constructor for ExtGridViewRow
'''

''' <param name="rowIndex" />
''' <param name="dataItemIndex" />
''' <param name="rowType" />
''' <param name="rowState" />
Public Sub New(ByVal rowIndex As Integer, ByVal dataItemIndex As Integer, ByVal rowType As DataControlRowType, ByVal rowState As DataControlRowState)
MyBase.New(rowIndex, dataItemIndex, rowType, rowState)
End Sub

'''

''' Overrides GridViewRow.OnInit to perform custom initialization of the row.
'''

''' <param name="e" />event args
Protected Overrides Sub OnInit(ByVal e As EventArgs)
MyBase.OnInit(e)

If RowType = DataControlRowType.Header Then
_expCell = New TableHeaderCell()
ElseIf RowType = DataControlRowType.DataRow Then
_expCell = New TableCell()

_ctlExpand = New HtmlAnchor()
_ctlExpand.HRef = "#"
_ctlExpand.Attributes("onclick") = "TglRow(this);"

_ihExp = New HtmlInputHidden()
_ihExp.ID = "e" & Me.DataItemIndex.ToString()

_expCell.Controls.Add(_ctlExpand)
_expCell.Controls.Add(_ihExp)
End If

If Not _expCell Is Nothing Then
_expCell.Width = Unit.Pixel(20)

Cells.AddAt(0, _expCell)
End If
End Sub

'''

''' Overrides GridViewRow.Render to perform custom rendering of the row.
'''

''' <param name="writer" />the HtmlTextWrite object in which the row is rendered

Protected Overrides Sub Render(ByVal writer As HtmlTextWriter)
If DesignMode Then
MyBase.Render(writer)
Return
End If

Dim c As TableCell = Cells(Cells.Count - 1)

If RowType = DataControlRowType.DataRow Then
If _showExpand Then
Dim grid As ExtGridView = TryCast(Me.Parent.Parent, ExtGridView)

If _ihExp.Value = String.Empty Then
_ctlExpand.InnerHtml = grid.ExpandButtonText
_ctlExpand.Attributes("class") = grid.ExpandButtonCssClass
Else
_ctlExpand.InnerHtml = grid.CollapseButtonText
_ctlExpand.Attributes("class") = grid.CollapseButtonCssClass
End If

c.Visible = False
MyBase.Render(writer)

c.Visible = True
c.ColumnSpan = GetVisibleCellsCount() - 1
c.BackColor = BackColor

If _ihExp.Value = String.Empty Then
writer.Write("")
Else
writer.Write("")
End If

c.RenderControl(writer)

writer.Write("")

If RowIndex = grid.Rows.Count - 1 Then
If (grid.BottomPagerRow Is Nothing AndAlso grid.FooterRow Is Nothing) OrElse ((Not grid.BottomPagerRow Is Nothing AndAlso grid.BottomPagerRow.Visible = False) AndAlso Not grid.FooterRow Is Nothing AndAlso grid.FooterRow.Visible = False) Then
writer.Write("")
End If
End If
Else
_ihExp.Visible = False
_ctlExpand.Visible = _ihExp.Visible
c.Visible = False
MyBase.Render(writer)
End If

ElseIf RowType = DataControlRowType.Header Then
c.Visible = False
MyBase.Render(writer)
Else
MyBase.Render(writer)
End If
End Sub

'''

''' Helper method which obtains the visible cells count in the current row.
'''

''' <returns>
Private Function GetVisibleCellsCount() As Int32
Dim ret As Int32 = 0

For Each c As TableCell In Cells
If c.Visible Then
ret += 1
End If
Next c

Return ret
End Function
End Class

'''

''' ExtGridView implements the expandible GridView behaviour.
'''

Public Class ExtGridView
Inherits GridView
Private _expandButtonCssClass As String
Private _collapseButtonCssClass As String
Private _expandButtonText As String = "+"
Private _collapseButtonText As String = "-"

'''

''' Sets or gets the CSS class which is applied on the expand button control.
'''

<category("styles")> _
Public Property ExpandButtonCssClass() As String
Get
Return _expandButtonCssClass
End Get
Set(ByVal value As String)
_expandButtonCssClass = value
End Set
End Property

'''

''' Sets or gets the CSS class which is applied on the collapse button control.
'''

<category("styles")> _
Public Property CollapseButtonCssClass() As String
Get
Return _collapseButtonCssClass
End Get
Set(ByVal value As String)
_collapseButtonCssClass = value
End Set
End Property

'''

''' Sets or gets the expand button's text.
'''

<category("appearance")> _
Public Property ExpandButtonText() As String
Get
Return _expandButtonText
End Get
Set(ByVal value As String)
_expandButtonText = value
End Set
End Property

'''

''' Sets or gets the collapse button's text.
'''

<category("appearance")> _
Public Property CollapseButtonText() As String
Get
Return _collapseButtonText
End Get
Set(ByVal value As String)
_collapseButtonText = value
End Set
End Property

'''

''' Overrides GridView.OnInit to perform custom initialization of the control.
'''

''' <param name="e" />
Protected Overrides Sub OnInit(ByVal e As EventArgs)
MyBase.OnInit(e)

'#Region "register script"
Dim script As String = "function TglRow(ctl)" & ControlChars.CrLf & "{" & ControlChars.CrLf & " var row = ctl.parentNode.parentNode;" & ControlChars.CrLf & " var tbl = row.parentNode;" & ControlChars.CrLf & " var crow = tbl.rows[row.rowIndex + 1];" & ControlChars.CrLf & " var ihExp = ctl.parentNode.getElementsByTagName('input').item(0);" & ControlChars.CrLf & ControlChars.CrLf & " tbl = tbl.parentNode;" & ControlChars.CrLf & ControlChars.CrLf & " var expandClass = tbl.attributes.getNamedItem('expandClass').value;" & ControlChars.CrLf & " var collapseClass = tbl.attributes.getNamedItem('collapseClass').value;" & ControlChars.CrLf & " var expandText = tbl.attributes.getNamedItem('expandText').value;" & ControlChars.CrLf & " var collapseText = tbl.attributes.getNamedItem('collapseText').value;" & ControlChars.CrLf & ControlChars.CrLf & " " & ControlChars.CrLf & " if (crow.style.display == 'none')" & ControlChars.CrLf & " {" & ControlChars.CrLf & " crow.style.display = '';" & ControlChars.CrLf & " ctl.innerHTML = collapseText;" & ControlChars.CrLf & " ctl.className = collapseClass;" & ControlChars.CrLf & " ihExp.value = '1';" & ControlChars.CrLf & " }" & ControlChars.CrLf & " else" & ControlChars.CrLf & " {" & ControlChars.CrLf & " crow.style.display = 'none';" & ControlChars.CrLf & " ctl.innerHTML = expandText;" & ControlChars.CrLf & " ctl.className = expandClass;" & ControlChars.CrLf & " ihExp.value = '';" & ControlChars.CrLf & " }" & ControlChars.CrLf & "}"

Page.ClientScript.RegisterClientScriptBlock(Me.GetType(), "ExtGrid", script, True)
'#End Region

End Sub

'''

''' Overrides GridView.CreateRow to create the custom rows in the grid (ExtGridViewRow).
'''

''' <param name="rowIndex" />
''' <param name="dataSourceIndex" />
''' <param name="rowType" />
''' <param name="rowState" />
''' <returns>
Protected Overrides Function CreateRow(ByVal rowIndex As Integer, ByVal dataSourceIndex As Integer, ByVal rowType As DataControlRowType, ByVal rowState As DataControlRowState) As GridViewRow
Return New ExtGridViewRow(rowIndex, dataSourceIndex, rowType, rowState)
End Function

Protected Overrides Sub Render(ByVal writer As HtmlTextWriter)
Me.Attributes("expandClass") = _expandButtonCssClass
Me.Attributes("collapseClass") = _collapseButtonCssClass
Me.Attributes("expandText") = _expandButtonText
Me.Attributes("collapseText") = _collapseButtonText

MyBase.Render(writer)
End Sub

End Class

End Namespace

Public Class ExtGridView

End Class

Thanks. I can't test at the moment. Will let you know how it turns.

it is not working

Have you finally done it? Does it work in Visual Basic?
I'd appreciate if someone help me to do it in VB.
Would you?
Thanks in advance!
Max

Does anybody have a procedure to export the total Extende gridview to Excel?

Come on people! Did nobody make an XLS export of the Extgridview. Pls help me out with thisone. Regards, Peter

Thank you for posting the code to expand all. Could you post the code to collapse all?

Thanks.

Thank you for posting the code to expand all. How can I collapse all?

First thanks to Andrei for this great piece of program. I converted it to VB2005 and its working excellent.
I'm a newbie in ASP and I'm having trouble with the column sizing. I would like to have the columns perfectly adjusted above each other. I'm trying to do this with ItemStyle and setting the width of for each BoundColumn. Still the column widths differ depending on the content of the cell. Also turning Wrap on and off did not help.
Thanks in advance,
Peter

Hi Andrei,

I'm been trying to use the ExtGridView, but I'm running into a bit of a problem. I have put a checkbox into the first column, and I'm finding that as soon as I check the checkbox (which generates a postback) - I seem to lose the binding information for the last column (which is a regular gridview). I am doing my binding programatically in the code behind, and i have tried to simplify as much as possible in order to include a snippet which may allow you to see what I'm missing or doing wrong.

Here's the HTML:
================
<cc:ExtGridView runat="server" ID="gridSubscriberList" ExpandButtonText="+" CollapseButtonText="-" AutoGenerateColumns="False" RowDataBound="gridSubscriberList_RowDataBound" >
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox runat="server" ID="SubscriberListCheckBox" AutoPostBack="True" />
</ItemTemplate>
</asp:TemplateField>

<asp:BoundField DataField="Name" SortExpression="Name" HeaderText="Subscriber List">
</asp:BoundField>

<asp:TemplateField>
<ItemTemplate>
<asp:GridView id="gridSubscriberSublist" runat="server" AutoGenerateColumns="false" CollapseButtonText="-" ExpandButtonText="+" >
<Columns>
<asp:BoundField DataField="Name"> </asp:BoundField>
</Columns>
</asp:GridView>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</cc:ExtGridView>

And here's the Code behind: (myClass is a class with a single property: string Name)
===========================
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
// create a list to bind to the top level
List<myClass> aList = new List<myClass>();
aList.Add(new myClass("a"));
aList.Add(new myClass("b"));

// bind it!
gridSubscriberList.DataSource = aList;
gridSubscriberList.DataBind();
}
}

protected void gridSubscriberList_RowDataBound(object sender, GridViewRowEventArgs e)
{
// create a list to bind to the second level (the level hidden by the +/- signs)
List<myClass> aSublist = new List<myClass>();
aSublist.Add(new myClass("c"));
aSublist.Add(new myClass("d"));

// grab the sublist gridview and bind the sublist to it
GridView gridView = (GridView)e.Row.FindControl("gridSubscriberSublist");
if (gridView != null)
{
gridView.DataSource = aSublist;
gridView.DataBind();
((ExtGridViewRow)e.Row).ShowExpand = true;
}
}

Any help would be very much appreciated. I would love to be able to use this contol!
Thanks,
Chris Newstead
chris@crm3.com

Hi Chris.
I faced the same problem.

Furthermore I observed that changing the page and returning back it works again, did you?
Did you find a solution?
Andrei does not replay, why?

Thanks and Happy new year!

Cesare Esposito

Hi everybody,

After a few hours on this problem, i've found this solution, i hope this will be helpfull for you.
- the binding for detail grids is done in RowDataBound event
- i have only one query fo the detail datasource, comes from an object data source and filtered on client side /* dtSource = ((DataView)odsDetailClient.Select()).Table;*/
- in the page_load, you need only to refresh the expanders, no need to bind detail grids again.

protected void Page_Load(object sender, EventArgs e)
{
Display_Expander();
}

private void Display_Expander()
{
foreach (GridViewRow row in grdConsoLong.Rows)
{
GridView grdDetails = (row.FindControl("grdDetails") as GridView);
(row as ExtGridViewRow).ShowExpand = (grdDetails.Rows.Count > 0);
}
}

protected void grdConsoLong_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
GridView grdDetail = (GridView)e.Row.FindControl("grdDetails");
DataView dvDetail = new DataView(dtSource, "c_client_cdr='" + (e.Row.DataItem as DataRowView).Row[1].ToString() + "'", "", DataViewRowState.CurrentRows);
if (dvDetail.Count > 0)
{
grdDetail.DataSource = dvDetail;
grdDetail.DataBind();
}
(e.Row as ExtGridViewRow).ShowExpand = (dvDetail.Count > 0);
}
}

Hi Andrei,

Congrats on such a nice job !
I'm sure many of the members are using your code.

But, I wanted to point out a issue with the number of DB calls.

page size = 5 then
Outer Query 1 - Get Companies
Middle Query 5 - Get Orders By Company
Last Query 5 - Get Order Details By Company

This results in 11 separate queries.

if page size = 10 then
Outer Query 1 - Get Companies
Middle Query 10 - Get Orders By Company
Last Query 10 - Get Order Details By Company

This results in 21 separate queries.

Question: Is there a alternative way of creating one single query to put all of the data into a DataSet and then Bind each DataTable to each of the gridviews ?

Thanks, Paul

Paul,

I am using the extgrid and being a database orientated developer had no intention of doing that many round trips to the server. I simply did one query to the datasource for my child datatable when getting the data for the parent table. I use the same criteria as for the parent. You can then use client side filtering (create a dataview based on the table) to supply the list for each nested gridview.

    DataTable CarrierDocsDS;<br />
    <br />
    private void Refresh()<br />
    {<br />
        // Get Parent Data using predefined criteria<br />
        DataTable ScheduleDS = Controller.DoLookup(X10.Data.ObjectType.Schedule, InCriteria);<br />
        // Get Child Data using same filter as for parent (you may need to join to parent table in your SQL query to bea ble to do the criteria properly)<br />
        <br />
        CarrierDocsDS = Controller.DoLookup(X10.Data.ObjectType.CarrierDoc, InCriteria);<br />
<br />
        ScheduleGridView.DataSource = ScheduleDS;<br />
        ScheduleGridView.DataBind();<br />
<br />
    }<br />
<br />
    void ScheduleGridView_RowCreated(object sender, GridViewRowEventArgs e)<br />
    {<br />
        if (e.Row.RowType == DataControlRowType.DataRow)<br />
        {<br />
            GridView CarrierDocGrid = e.Row.FindControl("CarrierDocGrid") as GridView;<br />
<br />
            DataView FilterCarrierDocDs = new DataView(CarrierDocsDS, "[ParentKeyField] = '" + (e.Row.DataItem as DataRowView).Row[0].ToString() + "'", "", DataViewRowState.CurrentRows);<br />
            if (FilterCarrierDocDs.Count > 0)<br />
            {<br />
                CarrierDocGrid.DataSource = FilterCarrierDocDs;<br />
                CarrierDocGrid.DataBind();<br />
            }<br />
<br />
            (e.Row as ExtGridViewRow).ShowExpand = FilterCarrierDocDs.Count > 0;<br />
        }<br />
    }

Here's what I'm trying to do. Let me know if this is possible. I want to display a grid with activities and their current status. When expanded, I want to see the history of that activity with dates and status changes. My assumption is that I should run a query into my first ODS to get the top level grid showing only the most current statuses. However, I'm lost on how to link the expand to populate the second ODS with the historical data for just that activity. Can this be done? Any suggestions on how?

Thanks,
Dave

Hello, I am tasked with implementing something just like this. I got the example working fine but I can't seem to figure out how to add another level. I tried addding another extended gridview which gave me the data I want but the expand and collapse buttons don't show???

I am trying to add a linkbutton called "Expand All", when the user clicks this linkbutton, all the subgrid will be expanded.
How can I do this using the Javascript?
Can anyone help me..
Thanks in advance!

This is the function (maybe it will be also added in the next release):

function expand(tbl, v)
{
var expandClass = tbl.attributes.getNamedItem('expandClass').value;
var collapseClass = tbl.attributes.getNamedItem('collapseClass').value;
var expandText = tbl.attributes.getNamedItem('expandText').value;
var collapseText = tbl.attributes.getNamedItem('collapseText').value;
for (var i = 1; i < tbl.rows.length; i+=2)
{
var row = tbl.rows[i];
var row1 = tbl.rows[i+1];
var ihExp = row.cells[0].getElementsByTagName('input').item(0);
var ctl = row.cells[0].getElementsByTagName('a').item(0);

if (!ihExp || !ctl)
{
continue;
}

if (v)
{
row1.style.display = '';
ctl.innerHTML = collapseText;
ctl.className = collapseClass;
ihExp.value = '1';
}
else
{
row1.style.display = 'none';
ctl.innerHTML = expandText;
ctl.className = expandClass;
ihExp.value = '';
}
}
}

Use it like this:
expand(document.getElementById('<%= grid.ClientID %>'), true);

ExtGridView

Introduction

Using the code

Points of Interest

Customizing the expand/collapse button's appearance

Hiding the expand/collapse button

History

License

Comments and Discussions