1. Home
  2. Forum
  3. jQuery
  4. Hiding tasks

Hiding tasks

Hello,

I have tasks of different type and I want to hide the ones of a type when pushing a button. How can I hide a task without deleting it?

Thanks.

7 Replies
PE Punniyamoorthi Elangovan Syncfusion Team May 4, 2018 01:09 PM UTC

Hi Oscar, 
Thank you for contacting Syncfusion support. 
We have analyzed your requirement, but we are unable to understand your requirement clearly, Can you please confirm whether you need to hide the entire row or hide the taskbar from the Gantt. This would be helpful for us to serve you better. We have prepared the sample for hiding the taskbar in the Gantt Chart side based upon the Progress value by using queryTaskbarInfo client side event, please refer the below code snippet. 
<script type="text/javascript"> 
       queryTaskbarInfo: function (args) { 
                    if (args.data.item.Progress == 100) { 
                        $(args.taskbar).find(".e-chartcell").find(".e-childContainer").find(".e-gantt-childtaskbar").css("display", "none") 
                        $(args.taskbar).find(".e-chartcell").find(".e-tasknameContainer").find(".e-taskbarname").css("display", "none") 
                    } 
                }, 
</script> 
Please find the sample link below 
Please let us know if you require further assistance on this 
Regards, 
Punniyamoorthi 


OB oscar bartolome May 7, 2018 06:00 AM UTC

Hello,

I want to hide only the taskbar, in a gantt resources view type. With the solution provided it hides all tasks in the same row.

Any other option?

Thanks

JS Jonesherine Stephen Syncfusion Team May 8, 2018 01:02 PM UTC

Hi Oscar, 
To customize the taskbar in resource view Gantt, we need to apply style to specific taskbar element based on its index from the provided row element. 
Please find the code example below. 
 
queryTaskbarInfo: function (args) { 
    var taskbarElement = args.taskbar; 
    if (args.data.eResourceTaskType == "resourceChildTask") { 
        var index = args.data.parentItem.eResourceChildTasks.indexOf(args.data); 
        taskbarElement = $(taskbarElement).find(".e-childContainer")[index]; 
        if (args.data.taskId % 2 == 0) { 
            $(taskbarElement).css("display", "none"); 
        } 
    } 
}, 
We have also prepared the sample for this, please find the sample from below location. 
 
Regards, 
Jone sherine P S. 


OB oscar bartolome May 9, 2018 06:18 AM UTC

Ok, that's what I was looking for. The only remaining issue is that if the task was overallocated the red brackets still appear and the row exists even there is no task. Is ther any way to delete them?

Thanks

PE Punniyamoorthi Elangovan Syncfusion Team May 9, 2018 01:40 PM UTC

Hi Oscar, 
Thank you for your update. 
As per your requirement, we have hidden the over allocated lines present in the Gantt chart side by using create client side event. Please refer the below code snippet. 
<style> 
     .customcolor { 
            background: transparent; 
        } 
 
   </style> 
 
<script type="text/javascript"> 
     create: function () { 
                    $("#ganttViewTablebodyejGanttChartresourceGantt").find(".e-chartcell").find(".e-rangecontainer").find(".e-rg-rangdiv").addClass("customcolor"); 
                }, 
</script> 
We have prepared the JS Playground sample for your reference please find the sample link below 
Please let us know if you require further assistance on this. 
Regards, 
Punniyamoorthi 


OB oscar bartolome May 15, 2018 07:09 AM UTC

Hello, this code hides the overallocation red lines, but thats not the thing I want to do. I want to hide the task as if it was deleted, but without deleting it. The taskbar must dissapear and the rest of the components of the gantt control must behave as if it doesn't exist. 
I don't know if this is possible. Is there any form to do this?

Thanks.

PE Punniyamoorthi Elangovan Syncfusion Team May 17, 2018 08:43 AM UTC

Hi Oscar, 
In Resource allocation view while deleting the task following actions are performed in chart part. 
  1. Group task will be updated according to new child collections.
  2. Height of row will be updated and scroller also refreshed with new height.
  3. Over allocation indicator lines also updated with new tasks.
These action are cannot done properly by using queryTaskbarInfo event. We recommended following solution to achieve your requirement. 
We have added property called hide in data source for all task with proper value and rendered visible records alone in Gantt by using data manager and query property. 
And we have prepared a sample for this with hidden tasks at load time and on button click action, we have changed the visibility of some other tasks, please find the code snippets for this below. 
 
<button id="check"> 
        show/hide 
    </button> 
 
<script type="text/javascript"> 
$("#resourceGantt").ejGantt({ 
                dataSource: ej.DataManager(resourceGanttData), 
                query: ej.Query().where("hide", "equal", false, false), 
                 //.. 
        }); 
 
      $("#check").click(function() { 
       resourceGanttData[0].hide = true; 
        resourceGanttData[1].hide = true; 
        resourceGanttData[3].hide = false; 
        resourceGanttData[4].hide = false; 
         $("#resourceGantt").ejGantt("model.dataSource",ej.DataManager(resourceGanttData)); // Dynamically updating the data source 
      }); 
</script> 
 
We have prepared the JS Playground sample for your reference, please find the sample link below 
Please let us know if you require further assistance on this. 
Regards, 
Punniyamoorthi 


Loader.
Up arrow icon