We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Hiding other resourceCenters with a specific background color when dragging a task

Hi syncfusion supporter

How hiding other resource centers with a specific background color when dragging a task?

Simple demonstration -- https://drive.google.com/open?id=1qttzkaQQg6Ew4AWHvZ1G9FIx4KJdWeNj

3 Replies

PP Pooja Priya Krishna Moorthy Syncfusion Team August 11, 2019 07:41 PM

Hi Xia,

 

Greetings from Syncfusion support.

 

We have prepared a sample in which, we can restrict the dragging of taskbar from one group to another by setting args.cancel as true in taskbarEdited event. But we can drag to different resources of same group. In the provided sample we differentiate, the different groups while dragging, by highlighting the restricted area. Please find the below code example.

 

  <style>

       .e-hiddenarea {

              background: pink

       }            

  </style>

  <script>

          var isUpdateHideArea = false;

          $("#resourceGantt").ejGantt({

                //...

                taskbarEdited: function(args) {

                      isUpdateHideArea = false;

                      $("#resourceGantt").find(".e-ganttrowcell").removeClass("e-hiddenarea");

                      if(args.assignedResource.groupId != args.previousResource.groupId) {

                             args.cancel = true;

                      }

                            

                },

              taskbarEditing: function(args) {

                      if(!isUpdateHideArea){

                             isUpdateHideArea = true;

                             updateHiddenArea(args.rowData);

                      }

              },              

         });

        });

       function updateHiddenArea(data){

                      var object =  $("#resourceGantt").ejGantt("instance");

                      var chartRows = $("#resourceGantt").find(".e-ganttrowcell");

                             chartRows.addClass("e-hiddenarea");

                      if(data.eResourceTaskType == "resourceChildTask"){

                             var parent = data.parentItem.parentItem;

                             var childs = parent.childRecords.slice();

                             childs.push(parent);

                             for(var i=0;i< childs.length;i++ ){

                                    var index= object.model.currentViewData.indexOf(childs[i]);

                                    $(chartRows[index]).removeClass("e-hiddenarea");

                             }

                      }

 

              }

        </script>

 

Please find the below sample link.

Link - https://jsplayground.syncfusion.com/grgjoue4

 

Regards,

Pooja Priya K.

 



XI xia replied to Pooja Priya Krishna Moorthy August 20, 2019 06:30 PM

Hi Xia,

 

Greetings from Syncfusion support.

 

We have prepared a sample in which, we can restrict the dragging of taskbar from one group to another by setting args.cancel as true in taskbarEdited event. But we can drag to different resources of same group. In the provided sample we differentiate, the different groups while dragging, by highlighting the restricted area. Please find the below code example.

 

  <style>

       .e-hiddenarea {

              background: pink

       }            

  style>

  <script>

          var isUpdateHideArea = false;

          $("#resourceGantt").ejGantt({

                //...

                taskbarEdited: function(args) {

                      isUpdateHideArea = false;

                      $("#resourceGantt").find(".e-ganttrowcell").removeClass("e-hiddenarea");

                      if(args.assignedResource.groupId != args.previousResource.groupId) {

                             args.cancel = true;

                      }

                            

                },

              taskbarEditing: function(args) {

                      if(!isUpdateHideArea){

                             isUpdateHideArea = true;

                             updateHiddenArea(args.rowData);

                      }

              },              

         });

        });

       function updateHiddenArea(data){

                      var object =  $("#resourceGantt").ejGantt("instance");

                      var chartRows = $("#resourceGantt").find(".e-ganttrowcell");

                             chartRows.addClass("e-hiddenarea");

                      if(data.eResourceTaskType == "resourceChildTask"){

                             var parent = data.parentItem.parentItem;

                             var childs = parent.childRecords.slice();

                             childs.push(parent);

                             for(var i=0;i< childs.length;i++ ){

                                    var index= object.model.currentViewData.indexOf(childs[i]);

                                    $(chartRows[index]).removeClass("e-hiddenarea");

                             }

                      }

 

              }

        script>

 

Please find the below sample link.

Link - https://jsplayground.syncfusion.com/grgjoue4

 

Regards,

Pooja Priya K.

 


Thank you Pooja Priya K! Your code is working fine. I'm sorry to reply to you not in time, busy recently :)


GA Gurunathan A Syncfusion Team August 20, 2019 10:14 PM

Hi Xia, 
  
Thanks for the reply.  
  
We are always happy to assist you. 
  
Regards, 
Gurunathan 


Loader.
Live Chat Icon For mobile
Up arrow icon