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

  1. #1

    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

    .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
    Attached Thumbnails Click image for larger version. 

Name:	ExpandCollapse.png 
Views:	95 
Size:	55.5 KB 
ID:	3856  
    Last edited by Daniil; Feb 24, 2012 at 7:41 AM. Reason: Please use [CODE] tags

Similar Threads

  1. [CLOSED] Icon in Grid Column header
    By FAS in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Mar 14, 2012, 1:30 PM
  2. Replies: 1
    Last Post: Nov 24, 2011, 6:48 AM
  3. [CLOSED] [1.0] Possible to Add Icon to Grid Column Header?
    By bsnezw in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Sep 14, 2010, 2:34 PM
  4. icon in the header column
    By maxdiable in forum 1.x Help
    Replies: 1
    Last Post: Jul 09, 2009, 10:30 AM
  5. Column header icon
    By methode in forum Feature Requests
    Replies: 0
    Last Post: Mar 28, 2009, 7:24 AM

Posting Permissions