Script to show hide a nested grid in asp.net

Karthikanbarasan
Posted by Karthikanbarasan under JavaScript category on | Points: 40 | Views : 3603
function ExpandOrCollapse(obj,row)
{
var div = document.getElementById(obj);
var img = document.getElementById('img' + obj);

if (div.style.display == "none")
{
div.style.display = "block";
if (row == 'alt')
{
img.src = "../Images/minus.gif";
}
else
{
img.src = "../Images/minus.gif";
}
img.alt = "Close to view Child";
}
else
{
div.style.display = "none";
if (row == 'alt')
{
img.src = "../Images/plus.gif";
}
else
{
img.src = "../Images/plus.gif";
}
img.alt = "Expand to show Child";
}
}
</script>


In the grid view in item template use it

<asp:TemplateField >
<ItemTemplate>
<a href="javascript:expandcollapse('div<%# Eval("ChildID") %>', 'one');">
<img id="imgdiv<%# Eval("ParentID") %>" alt="Click to show/hide Child - <%# Eval("ChildName") %>"
width="9" border="0" src="../Images/plus.gif" />
</a>
</ItemTemplate>
<ItemStyle Wrap="False" />
</asp:TemplateField>

Comments or Responses

Login to post response