Solved

expandable/collapsable gridview

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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

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…
Problem Hi all,    While many today have fast Internet connection, there are many still who do not, or are connecting through devices with a slower connect, so light web pages and fast load times are still popular.    If your ASP.NET page …
In a recent question (https://www.experts-exchange.com/questions/29004105/Run-AutoHotkey-script-directly-from-Notepad.html) here at Experts Exchange, a member asked how to run an AutoHotkey script (.AHK) directly from Notepad++ (aka NPP). This video…

763 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