dynamically resize gantt control without reload all page

[Aza]

Hi, 

When trying Div size altering, changes only upper side of gantt control and internal elements dont change (picture is shown below).

The question is how to activate function or event in order to update Gantt visually without refreshing the page. 

How to update Gantt manually so it will correspond to div size . In project i using angular route.

It is the div where placed gantt control "  <div id="GanttContainer" style="height:450px; width:100%" />"

Thanks!

Attachment: gantt_question_e147c550.rar

[Aza]

if i set  enableResize: true, when div resize i get an error

"ej.web.all.min.js:10 Uncaught ejGanttChart: methods/properties can be accessed only after plugin creation
Error: ejGanttChart: methods/properties can be accessed only after plugin creation"

[Jonesherine Stephen]

Hi Aza, 

Thanks for contacting Syncfusion support. 

Please find the responses for the queries below: 

Query1: if i set enableResize: true, when div resize i get an error 

"ej.web.all.min.js:10 Uncaught ejGanttChart: methods/properties can be accessed only after plugin creation
Error: ejGanttChart: methods/properties can be accessed only after plugin creation", When trying Div size altering, changes only upper side of gantt control and internal elements dont change 

 

Solution:We regret for the inconvenience caused. 

We have analysed the reported issue with our sample. We are unable to reproduce the issue. Can you please revert us by modifying the sample based on your application along with the replication procedure? This would be helpful for us to serve you. 

Query2: The question is how to activate function or event in order to update Gantt visually without refreshing the page.  

How to update Gantt manually so it will correspond to div size. In project i using angular route. 

It is the div where placed gantt control " <div id="GanttContainer" style="height: 450px; width: 100%" />" 

Solution:  

We can change the size settings dynamically using the sizeSettings Properties. 

Using click event we can change the “sizeSettings” dynamically by assigning its “height” and “width” in model. 

Please find the code snippet below: 

<button onclick="size()" style="margin-bottom:10px">click</button> 

                    <div id="angulargantt"  

ej-gantt e-datasource="data"  

e-toolbarsettings="toolbarsettings" 

e-enableresize="true"  

style="width:100%;height:450px;"> 

                </div> 

  <script> 

              function size() { 

            //To change the height and width dynamically using sizeSettings 

            var gantt = $("#angulargantt").data("ejGantt"); 

            gantt.model.sizeSettings.height = "80%"; 

            gantt.model.sizeSettings.width = "80%"; 

            gantt.windowResize(); 

        } 

    </script> 

We have also prepared a sample for your reference. Please find the sample in the following URL. 

Sample: http://jsplayground.syncfusion.com/4dauvyzl 

Please let us know if you need more information on this.
Regards,
Jone sherine P S 

[Aza]

Thank you for help to solve the problem. But still drawing in the monitors with a diagonal of 22 going awry. In monitors with a diagonal of 15-19 takes place normally. Days of the week are displaced.

Please explain why occurs so, and how to resolve this issue?

Thank you!

Attachment: _1e44d23f.rar

[Mahalakshmi Karthikeyan]

Hi Aza, 

Sorry for the inconvenience, 

We have tested the reported behavior with the mentioned screen resolution (22` diagonal) but we were not able to reproduce the issue. Please find the sample for this from the following link. 

Sample: http://jsplayground.syncfusion.com/xv53n4ps 

If you still facing any issues then please get back to us by modifying this sample along with the replication procedure to reproduce it. 

Regards, 

Mahalakshmi K. 

[Aza]

Thanks guys for the quick response, I'll check my example again

[Mahalakshmi Karthikeyan]

Hi Aza, 

Thanks for the update. 

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

Regards, 

Mahalakshmi K.