1 Attachment(s)
Grid column header with Icon(should be toggled when clicked)
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
Code:
.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.
Code:
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
Code:
var imgExpandCollapse = document.getElementById("imgExpandCollapse");
imgExpandCollapse.className = "tool-collapse-all-16";
Also tries using Jquery
Code:
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