Thursday, September 13, 2007

Nested Gridviews in .NET 2.0 [Master - Detail]

This is my favourite 'feature' and it goes something like this................GridView within GridView

If you are working with a requirement for a detail view for selected item of master view then you must definitely consider this option.

Your aspx look is all your wish, if you are good in UI then you can explore what other options exist.

I choose the following,

simple table with a div section (i'll explain why we need a div later) as below.



grid1-colname will be unique column in your GridView1 (based on data)

RowBound method of your first gridview / master grid will have the following coding

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
GridView grid2 = (GridView)e.Row.FindControl("GridView2");
dbSrc = new SqlDataSource();
//Define your datasource here, connectionstring, selectcommand etc
grid2.DataSource = dbSrc;
grid2.DataBind();
}
}

Now adding a small Javascript, your Nested Gridviews are ready to go live :)

function switchViews(obj)
{
var div = document.getElementById(obj);
var img = document.getElementById('img' + obj);
divobj=div;
if (div.style.display=="none")
{
div.style.display= "inline";
img.src="Images/collapse.jpg"; mce_src="Images/collapse.jpg";
}
else
{
div.style.display = "none";
img.src="Images/expand.jpg"; mce_src="Images/expand.jpg";
}
}

Now i presume you got why we need the div tag, and the ID we gave as unique column of GridView1 for the same.

Just F5....rest you know ;)

1 comment:

  1. Could you send me a sample on above Nested Grid.....i have sent a mail

    thx,
    Sam

    ReplyDelete