Yeavis
asked on
URGENT - Master/Details Datagrid
Experts,
I've been fighting this for days now, and I still have not found the solution I'm looking for. What I would like to achieve is this: One datagrid with category information, and a child row that appears underneath the parent row displaying all the inventory items related to the parent row. Here's my db setup...
tblCategories:
ID (PK)
Prod_Type
Prod_Make
Prod_Model
tblInventory
ID (FK)
Prod_Location
Prod_Quantity
Does anyone know how I could setup an asp.net (vb) 1.1 datagrid to display this information how I want? It would be awesome if I could also edit the child rows and save back to the db... but if that can't happen I would be happy with just viewing the grid how I would like. Thanks in advance!!!
Jason
I've been fighting this for days now, and I still have not found the solution I'm looking for. What I would like to achieve is this: One datagrid with category information, and a child row that appears underneath the parent row displaying all the inventory items related to the parent row. Here's my db setup...
tblCategories:
ID (PK)
Prod_Type
Prod_Make
Prod_Model
tblInventory
ID (FK)
Prod_Location
Prod_Quantity
Does anyone know how I could setup an asp.net (vb) 1.1 datagrid to display this information how I want? It would be awesome if I could also edit the child rows and save back to the db... but if that can't happen I would be happy with just viewing the grid how I would like. Thanks in advance!!!
Jason
ASKER
John,
Thanks for the response. I see where you're coming from in your approach to the answer for this problem, however I have seen it done using a datagrid. My memory escapes me but I viewed a tutorial on this no later than a month ago.. and now I can't find that page again!! Go figure.. anyway, I want to go this route because it would be cleaner for the end user and it wouldn't require me to have two grids. If you have any further input, please feel free...
Jason
Thanks for the response. I see where you're coming from in your approach to the answer for this problem, however I have seen it done using a datagrid. My memory escapes me but I viewed a tutorial on this no later than a month ago.. and now I can't find that page again!! Go figure.. anyway, I want to go this route because it would be cleaner for the end user and it wouldn't require me to have two grids. If you have any further input, please feel free...
Jason
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
hi,
you could keep the datagrid, add a <br/><div in the column tag with the some label controls and mark the div as display:none as john suggested and add add a toggle js function in the itembound event eg I had a image to toggle a calendar control in the grid
protected void GridView3_RowDataBound(obj ect sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow )
{
try
{
Image im = (Image)e.Row.Controls[0].C ontrols[1] ;
Label lb = (Label)e.Row.Controls[0].C ontrols[3] ;
if (lb.Text.Length > 0)
Image1.Visible = true;
lb.Style["Display"] = "none";
im.Attributes.Add("onmouse over", "ToggleCal('" + lb.ClientID.ToString() + "');");
im.Attributes.Add("onmouse out", "ToggleCal('" + lb.ClientID.ToString() + "');");
}
catch (Exception me)
{
}
}
}
toggle java that i used from sammy
<head runat="server">
<title>Untitled Page</title>
<link type="text/css" href="StyleSheet.css" media="all" rel="Stylesheet" />
<script type="text/javascript">
function getObj(name)
{
if (document.getElementById)
{
this.obj = document.getElementById(na me);
this.style = document.getElementById(na me).style;
}
else if (document.all)
{
this.obj = document.all[name];
this.style = document.all[name].style;
}
else if (document.layers)
{
this.obj = document.layers[name];
this.style = document.layers[name];
}
}
function ToggleCal(c){//Toggle control by row event
if(document.getElementById ('' + c + '').style.display=='none')
{
document.getElementById('' + c + '').style.display='block';
}
else
document.getElementById('' + c + '').style.display='none';
}
function ToggleOff(c){//Toggle control off
document.getElementById('' + c + '').style.display='none';
}
function ToggleOn(c){//Toggle control on
document.getElementById('' + c + '').style.display='block';
}
</script>
</head>
you could keep the datagrid, add a <br/><div in the column tag with the some label controls and mark the div as display:none as john suggested and add add a toggle js function in the itembound event eg I had a image to toggle a calendar control in the grid
protected void GridView3_RowDataBound(obj
{
if (e.Row.RowType == DataControlRowType.DataRow
{
try
{
Image im = (Image)e.Row.Controls[0].C
Label lb = (Label)e.Row.Controls[0].C
if (lb.Text.Length > 0)
Image1.Visible = true;
lb.Style["Display"] = "none";
im.Attributes.Add("onmouse
im.Attributes.Add("onmouse
}
catch (Exception me)
{
}
}
}
toggle java that i used from sammy
<head runat="server">
<title>Untitled Page</title>
<link type="text/css" href="StyleSheet.css" media="all" rel="Stylesheet" />
<script type="text/javascript">
function getObj(name)
{
if (document.getElementById)
{
this.obj = document.getElementById(na
this.style = document.getElementById(na
}
else if (document.all)
{
this.obj = document.all[name];
this.style = document.all[name].style;
}
else if (document.layers)
{
this.obj = document.layers[name];
this.style = document.layers[name];
}
}
function ToggleCal(c){//Toggle control by row event
if(document.getElementById
{
document.getElementById(''
}
else
document.getElementById(''
}
function ToggleOff(c){//Toggle control off
document.getElementById(''
}
function ToggleOn(c){//Toggle control on
document.getElementById(''
}
</script>
</head>
ASKER
Awesome... thanks for all the help guys!
The first shot at this that I would take is to use a DataList for the categories. In a data list you can put HTML into the item template to show for each category record. What you could do is put an html table in the item template. In the first table row, place controls to show the type, make, model and a regular html hyperlink (not the server control). You will probably need some control that you set the display style to none that contains the category id.
Then in the second table row, do something like this:
<tr style="display:none">
<td>...your data grid here </td>
</tr>
That regular html hyperlink in the first row, then, would call a JavaScript function to toggle the display style of the second row between an empty string (visible) and 'none'.
The data list has an OnItemDataBound event. In this event you would get the category id from the hidden control in the top table row and query for the inventory and bind your datagrid to that data.
The main down side to this approach is that you cannot page a DataList, but otherwise this should work.
John