Change cell width dinamically

[oscar bartolome]

Hi,

I'm planning to implement a zooming system for the gantt control in Angular framework.

The idea is two buttons, one for increasing zoom and the other for removing zoom. The zoom system will be as simple as making the grid cells wider, how can I access to the cell width property in Angular framework?

Thanks.

[Punniyamoorthi Elangovan]

Hi Oscar, 

Thank you for contacting Syncfusion support 

We have analyzed your requirement. In Resourceview Gantt we can increase the cell width by using timescaleUnitSize property and by using this property we can set a maximum with as “500%” and we can also set the values in pixels. Please refer the below code snippet. 

[TS] 

constructor() { 

    this.toolbarSettings = { 

            showToolbar: true, 

            customToolbarItems: [{ 

                templateID: "#ZoomIn", 

                tooltipText: "ZoomIn" 

            }, 

               { 

                templateID: "#ZoomOut", 

                tooltipText: "ZoomOut" 

              }, 

            ], 

        } 

 

toolbarClick(sender) { 

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

      if (sender.itemName == "ZoomIn") 

          ganttObj.setModel({ "scheduleHeaderSettings": this.scheduleHeaderZoomIn }); 

      else 

          ganttObj.setModel({ "scheduleHeaderSettings": this.scheduleHeaderZoomOut }); 

} 

public scheduleHeaderZoomIn = { 

       timescaleUnitSize: "500%" 

   } 

   public scheduleHeaderZoomOut = { 

       timescaleUnitSize: "100%" 

   } 

} 

 

[HTML] 

<ej-gantt id="resourceGantt"  

                 [dataSource]="resourceGanttData" 

           (toolbarClick)="toolbarClick($event)" 

  > 

</ej-gantt> 

 

 

If you want to increase the width more than “500px” we suggest you to change the schedule mode using the scheduleHeaderType property in scheduleHeaderSettings property. 

We have also prepared a sample for your reference, in this sample we have set two custom icons (ZoomIn/ZoomOut) by using custom toolbar support. The ZoomIn icon is used to increase the cell width of the Gantt control and ZoomOut icon is used to decrease the cell with of the Gantt control. 

Please find the sample link below 

http://www.syncfusion.com/downloads/support/forum/138055/ze/Sample_with_Zooming-1163140869 

Please let us know if you require further assistance on this. 

Regards, 

Punniyamoorthi 

[oscar bartolome]

Ok, great! That's exactly what I was looking for.

Thanks!!

[Punniyamoorthi Elangovan]

Hi Oscar, 

Thank you for your update 

Please let us know if you require further assistance on this. 

Regards, 

Punniyamoorthi