Solved

expandable/collapsable gridview

Posted on 2006-11-21
6
6,541 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

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

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

Lots of people ask this question on how to extend the “MembershipProvider” to make use of custom authentication like using existing database or make use of some other way of authentication. Many blogs show you how to extend the membership provider c…
One of the pain points with developing AJAX, JavaScript, JQuery, and other client-side behaviors is that JavaScript doesn’t allow for cross domain request for pulling content. For example, JavaScript code on www.johnchapman.name could not pull conte…
This Micro Tutorial will teach you how to censor certain areas of your screen. The example in this video will show a little boy's face being blurred. This will be demonstrated using Adobe Premiere Pro CS6.
Two types of users will appreciate AOMEI Backupper Pro: 1 - Those with PCIe drives (and haven't found cloning software that works on them). 2 - Those who want a fast clone of their boot drive (no re-boots needed) and it can clone your drive wh…

832 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