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

Conditional Editing of a node

Hi,

Is is possible to conditionally edit a node?

Specifically, I need the How To for the following...

1) If the task has been completed (progress = 100) then I should not be allowed to change anything

2) If the node has progress >0, then I want to limit the fields that can be edited (e.g. make start date ReadOnly)


regards
Pankaj

3 Replies

MK Mahalakshmi Karthikeyan Syncfusion Team July 1, 2015 10:02 AM UTC

Hi Pankaj,

For your kind information, it is possible to restrict editing a specific node or a cell based on a condition by using the “BeginEdit” client side event. Please refer the below code snippet to cancel the editing with condition.

@(Html.EJ().Gantt("Gantt"). @(Html.EJ().Gantt("Gantt").

      //...

      ClientSideEvents(eve =>

      {

           eve.ActionComplete("ActionComplete");

           eve.BeginEdit("BeginEdit");

      })

)

<script type="text/javascript">

    function BeginEdit(args) {

        var columns = this.getColumns();

        if (args.data.status == 100)

             args.cancel = true;

         else if (args.data.status > 0 && columns[args.columnIndex].field == "startDate")

             args.cancel = true;

    }

}

</script>

In the above code snippet we have restricted editing a cell with progress value equal to 100 and restricted editing a Start date cell of a task with progress value greater than 0 .

We have also prepared a sample based on this , please find the sample in the below location.

Sample: http://www.syncfusion.com/downloads/support/forum/119502/ze/RestrictEdit1331243618

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

Regards,

Mahalakshmi K.



PC Pankaj Chatterjee July 6, 2015 04:43 AM UTC

Hi Mahalaxmi,

I have had a look at the demo provided.

Now, while this does what you suggest, but the main issue is that the 'Details' dialog box does not appear. The only allowable option for me is to click on the relevant columns on the grid and edit.

Since the user experience should be uniform, I was looking at an option where the fields get disabled in the popup dialog as well. Is this possible?

regards



MK Mahalakshmi Karthikeyan Syncfusion Team July 7, 2015 11:26 AM UTC

Hi Pankaj,

Sorry for the inconvenience caused.

At present there is no support to disable the particular field in Gantt. And hence we have logged a feature report on “support to disable a particular field in Gantt”. A support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates.

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents

And for your kind information, as for now we can give workaround for this requirement. Please follow the below code snippet to hide the particular field in edit popup.

@(Html.EJ().Gantt("Gantt").

    //…

    .EditDialogFields(co => {

        co.Field("TaskId").Add();

        co.Field("TaskName").Add();

        co.Field("StartDate").Add();

        co.Field("EndDate").Add();

        co.Field("Duration").Add();

        co.Field("Progress").Add();

    })

    .ClientSideEvents(eve => {

        eve.ActionComplete("ActionComplete");

        eve.BeginEdit("BeginEdit");

    })

    //… 

)

<script type = "text/javascript" >

    function BeginEdit(args) {

        var ganttObject = $("#Gantt").data("ejGantt");

        var columns = this.getColumns();


        //To cancel the editing if status is equal to 100

        if (args.data.status == 100)

            args.cancel = true;


        //To cancel the start date editing if status > 0

        else if ((args.data.status > 0 && args.columnIndex && columns[args.columnIndex].field == "startDate"))

            args.cancel = true;


        //To remove the Start Date from edit popup

        else if (args.data.status > 0 && !args.columnIndex) {

            var editDialogFields = [

            { field: "TaskId" },

            { field: "TaskName" },

            { field: "EndDate" },

            { field: "Duration" },

            { field: "Progress" }, ];

            ganttObject.setModel({

                "editDialogFields": editDialogFields

            });

        }


    }

  < /script>

We have also prepared a sample based on this and you can find the sample under the following location.

Sample: http://www.syncfusion.com/downloads/support/forum/119502/ze/DialogCustomization-1109287077

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

Regards,

Mahalakshmi K.


Loader.
Up arrow icon