Gantt edit-dialog ready or load events

[yaaami]

I need to listen to any event that fire when user open (edit or add) dialog, so that I can attach some js-functions to do validation on form inputs.

[Mahalakshmi Karthikeyan]

Hi Yaami,

Thanks for contacting Syncfusion support.

We can validate add / edit Dialog data with the help of “actionBegin” client side event. Please refer the below code example for details.

<div id="gantt"></div>   

   

    <script type="text/javascript">

        $("#gantt").ejGantt({

                dataSource: projectData,

                //…

                 beginEdit: function (args) {

                    if (args.requestType == "openAddDialog") {

                        // will be fired before edit Dialog get rendered.

                    }

                },

                actionBegin: function (args) {

                    if (args.requestType == "openAddDialog") {

                        // will be fired before Add Dialog get rendered.

                    }

                    if (args.requestType == "save") {

                        // this will be fired when we save task in Add / Edit dialog

                    }

                }

            });

        });

    </script>

This event will be fired before Add dialog get rendered. Here we can get all the available fields in the Add dialog arguments (args.data). And it will be fired when “args.requestType == "openAddDialog"”. We can assign data to these fields before Add dialog get rendered.

And args.requestType == "save" will be fired when saving the data for both Add and Edit dialog.

Regards,

Mahalakshmi K.

[yaaami]

Thank you, but this is not what I need. I need an event that fire after (not before) dialog has been rendered, in order to validate input controls. Ex: check when user change some custom fields to make sure their values in proper state.

[Mahalakshmi Karthikeyan]

Hi Yaaami,

We can also get the event when we press the save button in add / edit dialog before and after the new row added or existing row modified. Please refer the below code example for details.

<div id="gantt"></div>    
    
    <script type="text/javascript">
        $("#gantt").ejGantt({

                dataSource: projectData,

                //…

                 actionBegin: function (args) {

                    if (args.requestType == "save") {

                        // this will be fired when we press the save task in Add / Edit dialog                       

                    }

                },

                actionComplete: function (args) {

                    if (args.requestType == "save"){

                        //This will be fired after the new row added or the edited.

                    }
                }
            });
        });
    </script>

actionBegin client side event with requestType as “save” will be fired when we press the save button in the add / edit dialog. At this point the new row or edited row will not be saved so you can validate the available fields from the “args.data” which can be get from event argument.

actionComplete client side event with requestType as “save” also will be fired when we press the save button in add / edit dialog. At this point the new row or modified row will be saved, so if you change any value in this event, you need to reload the Gantt to view the changes.

Regards,

Mahalakshmi K.

[yaaami]

Thank you for all these answers, but I'll clarify what I need with following example.
We have two custom properties, say: (estimated time & actual time) and I need (edit-add) dialog to do validation on actual-time input field to assure it is not greater than estimated-time, and let user correct value on the same time like in picture.

http://jsplayground.syncfusion.com/ccy45ihj

So, what I need is an event that is fired when dialog has been rendered.

[Jayakumar Duraisamy]

Hi Yaaami,

Query:  We have two custom properties, say: (estimated time & actual time) and I need (edit-add) dialog to do validation on actual-time input field to assure it is not greater than estimated-time, and let user correct value on the same time like in picture.

Solution:  As we suggested in the previous solution, actionBegin client side event with requestType as “save” will be fired when we press the save button in add / edit dialog. At this point the new row or edited row will not be saved so you can validate the available fields from the “args.data” which can be get from event argument.

            Suppose actual time is greater than estimated time then Cancel the event as “args.cancel = true”. In order to alert user, we can use either alert box or Jquery popup window for more interactive.

            Please refer the following code snippet to validate user inputs

<div id="gantt"></div>    
    
    <script type="text/javascript">
        $("#gantt").ejGantt({

                dataSource: projectData,

                //…

                 actionBegin: function (args) {

                 if (args.requestType == "save") {

                  if (Date.parse(args.data.ActualDate) >=

                             Date.parse(args.data.EstimateDate)) {

                            args.cancel = true;

                            window.alert("Actual Date should not be greater than Estimated Date");

                        }

                    }                },               

        });
    </script>

We have also prepared a sample for your reference. Please find the sample in the following URL.
Sample:  http://jsplayground.syncfusion.com/Sync_ak2a4wbt
Please let us know if you require further assistance on this.

Regards,
Jayakumar Duraisamy

[sam]

I like syncfusion books.

[Padmini Ramamurthy]

Hi Sam, 

  

Thanks for your feedback. 

  

Regards, 

  

Padmini R