Solved

expandable/collapsable gridview

Posted on 2006-11-21
6
6,546 Views
Last Modified: 2012-06-27
just like the title says - I am interested in making/using one.
I did a Google search and came up with this as the most promising result:
http://blog.usingtangent.net/2006/08/expandable-gridview.html  >> http://www.codeproject.com/aspnet/extgridview.asp

My question is:
Is this the best way to do it? If so:
Not used to using custom controls, so how would i integrate this into my project (which is in VB - not C#)? And then how would i customize the control for my own needs? Any good resources on that?

If this is not the best way to go:
What is a better way?

The end result is that the client would like something that "looks" like Access  with the drill-downs on the data...  
0
Comment
Question by:EchoBinary
  • 3
  • 2
6 Comments
 
LVL 9

Expert Comment

by:kraffay
ID: 17991231
If you can use "at is" then go for it!  I don't why so many programmers insist on writing their own code for hairy stuff like this instead checking to see if its been done already.

You have the source, so customization is limited to your skill set.

It looks like the poster was able to do some tricky coding to make it behave like a native .NET server control, so I would go with his version.

Good Luck!

http://integrityconsulting.net/blog/
0
 

Author Comment

by:EchoBinary
ID: 17996602
the goal is to use it "as is" - my first question was if that was the best route to do so is: how? I have little to no experience doing so - is there a special project folder I have to put the C# file in? will it go in App_Code? Will it conflict with the rest of my project since my project is written in vb?
0
 
LVL 9

Expert Comment

by:kraffay
ID: 17997188
I am working on a demo page with this component as we speak.  I didn't have any luck compiling the enhanced version, but the original one works fine.  Here's what I had to do the get this running:

1.  Copy ExtGridView.cs into the App_code folder.  This inherits the GridViewRow class.
2.  Add the collapse and expand .gifs to your image folder.
3.  To run a demo against a Northwind database, make sure a connection string called NorthwindConnectionString.
4.  Drop the the grid user control in files in your web site (TestGridControl.ascx and TestGridControl.ascx.cs).  The control consists of a reference to the CustomControls object in ExtGridView.cs and SQLDataObject.
5.  Add the NorthwindDataSet.xsd and NorthwindDataSet.xss files to your App_Code folder.  The user control needs these to bind the data.
6.  Drop the Page1.aspx into your web site and browse.  The Page will come up with a nested view of Customers, Orders, and Order Details.

Now, this is great if your app calles for data from the Northwind DB.  I venture to guess that it does not.  So the trick now is seperate the Extended Grid View from the data in our demo.  If you like, I can provide more details as I progress with my demo.

Good Luck!

http://integrityconsulting.net/blog/
0
 

Author Comment

by:EchoBinary
ID: 17997654
I am indeed very interested!
0
 
LVL 9

Accepted Solution

by:
kraffay earned 500 total points
ID: 17999349
Here's a sample running against a couple of table from one of aspnet startet kits.  I did find one bug -- if you do not next a grid, the column count is off by one, so I had to duplicate the BoundField tag.

***************************************************

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ExtGrid.aspx.cs" Inherits="TimeTracker_ExtGrid" %>

<%@ Register Namespace="CustomControls" TagPrefix="cc" %>
<!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>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <cc:ExtGridView
                runat="server"
                EnableViewState="False"
                ID="grdProjects"
                AutoGenerateColumns="False"
                OnPageIndexChanging="grdProjects_PageIndexChanging"
                ExpandButtonCssClass="GridExpandCollapseButton"
                CollapseButtonCssClass="GridExpandCollapseButton"
                ExpandButtonText="+"
                CollapseButtonText="-"
                GridLines="None"
                CellPadding="3"
                ForeColor="#333333"
                AllowPaging="True"
                PageSize="5">
                <Columns>
                    <asp:BoundField DataField="ProjectID" HeaderText="ProjectID" />
                    <asp:BoundField DataField="ProjectName" HeaderText="ProjectName" />
                    <asp:BoundField DataField="ProjectDescription" HeaderText="ProjectDescription" />
                    <asp:TemplateField>
                        <itemtemplate>
                            <cc:ExtGridView
                                runat="server" ID="grdProjectCategories"
                                AutoGenerateColumns="False"
                                ExpandButtonText="<img src='Images/expand.gif' alt='+' border='0' />"
                                CollapseButtonText="<img src='Images/collapse.gif' alt='-' border='0' />"
                                style="margin-left:30px;"
                                CellPadding="4"
                                ForeColor="#333333"
                                GridLines="None">
                                <Columns>
                                    <asp:BoundField DataField="CategoryName" HeaderText="CategoryName" />
                                    <asp:BoundField DataField="CategoryName" HeaderText="CategoryName" />
                                </Columns>                            
                            </cc:ExtGridView>
                    </itemtemplate>
                    </asp:TemplateField>
                </Columns>
                <RowStyle BackColor="#EFF3FB" />
                <AlternatingRowStyle BackColor="White" />
                <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
                <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Left" />
                <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
                <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
                <EditRowStyle BackColor="#2461BF" />
            </cc:ExtGridView>
        </div>
    </form>
</body>
</html>

***************************************************

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using CustomControls;
using Microsoft.Practices.EnterpriseLibrary.Data;

public partial class TimeTracker_ExtGrid : System.Web.UI.Page
{
    protected override void OnLoad(EventArgs e)
    {
        base.OnLoad(e);

        grdProjects.RowCreated += new GridViewRowEventHandler(grdProjects_RowCreated);

        Database db = DatabaseFactory.CreateDatabase("LocalSQLServer");

        grdProjects.DataSource = db.ExecuteDataSet(CommandType.Text, "SELECT * FROM aspnet_starterkits_PROJECTS");
        grdProjects.DataBind();

    }

    protected void grdProjects_PageIndexChanging(object sender, GridViewPageEventArgs e)
    {
        grdProjects.PageIndex = e.NewPageIndex;
        grdProjects.DataBind();
    }

    void grdProjects_RowCreated(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            GridView grdProjectCategories = e.Row.FindControl("grdProjectCategories") as GridView;

            DataRowView drv = (DataRowView)e.Row.DataItem;

            int projectID = int.Parse(drv.Row["ProjectID"].ToString());

            string SQL = "SELECT * FROM aspnet_starterkits_ProjectCategories" +
                        " WHERE ProjectID = " + projectID;

            Database db = DatabaseFactory.CreateDatabase("LocalSQLServer");

            DataSet ds = db.ExecuteDataSet(CommandType.Text, SQL);

            grdProjectCategories.DataSource = db.ExecuteDataSet(CommandType.Text, SQL);

            (e.Row as ExtGridViewRow).ShowExpand = ds.Tables[0].Rows.Count > 0;

        }
    }
}
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses the ASP.NET AJAX ModalPopupExtender control. In this article we will show how to use the ModalPopupExtender control, how to display/show/call the ASP.NET AJAX ModalPopupExtender control from javascript, how to show/display/cal…
ASP.Net to Oracle Connectivity Recently I had to develop an ASP.NET application connecting to an Oracle database.As I am doing it first time ,I had to solve several problems. This article will help to such developers  to develop an ASP.NET client…
This video shows how to use Hyena, from SystemTools Software, to bulk import 100 user accounts from an external text file. View in 1080p for best video quality.
Finds all prime numbers in a range requested and places them in a public primes() array. I've demostrated a template size of 30 (2 * 3 * 5) but larger templates can be built such 210  (2 * 3 * 5 * 7) or 2310  (2 * 3 * 5 * 7 * 11). The larger templa…

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question