Grid column header with Icon(should be toggled when clicked)

[rameshisin]

I am using Ext.net Mvc.

I have a grid which has list of tasks and grouped based on a task type. I need to add expand all/collapse all icon in the grid column. Initially the grid rows are collapsed so i need show expand all icon first and toggle the icon on user click event.

I have attached the mockup of what I am looking for.

i have added two class for expand and collapse

.tool-expand-all-16
{
    background-image: url(../img/tool-expand-all-16.png);
}
.tool-collapse-all-16
{
    background-image: url(../img/tool-collapse-all-16.png);
}

In the grid column header i have added the image.

Header=" <img id='imgExpandCollapse' class='tool-expand-all-16' height='16' width='16' onclick='planSummary.expandCollapseAll();'/>"

In the initial load the Expand image is displayed but when the user clicks i try to toggle the image by removing the expand all class and replace it with the collapse class.

i tried using javascript like

var imgExpandCollapse = document.getElementById("imgExpandCollapse");
   imgExpandCollapse.className = "tool-collapse-all-16";

Also tries using Jquery

var imgExpandCollapse = jQuery("#imgExpandCollapse");
  imgExpandCollapse.removeClass("tool-expand-all-16").addClass("tool-collapse-all-16");

But nothing works. Please help me out to solve this issue.

Thanks,
Ramesh