This is a migrated thread and some comments may be shown as answers.

Mark field Dirty in Gantt chart

4 Answers 227 Views
Gantt
This is a migrated thread and some comments may be shown as answers.
Vaishali
Top achievements
Rank 1
Vaishali asked on 13 Jun 2019, 01:47 PM

In a simple example like this - https://dojo.telerik.com/UViBAZAP How to mark the field dirty? I want to make changes first and then save at one go.

Also, If I set the field value, the field should be marked dirty, for the user to know it was changed. Is there any way to achieve this?

var data = $('#gantt').data().kendoGantt.dataSource.data()[0];
data.set(start, new Date('06/13/2019');

 

4 Answers, 1 is accepted

Sort by
0
Petar
Telerik team
answered on 17 Jun 2019, 12:00 PM
Hello Vaishali,

Thank you for the provided Dojo example. Below is a code snippet which could be used to add “dirty-field” class to the edited by the user task fields. This snippet will be executed on every save event in the Gantt component:
function onSave(e) {
    $(e.sender.element[0]).find(".k-task-template:contains(" + e.task.title + ")").addClass("dirty-field");
}

To mark the newly added tasks we could use the below code on every add event:
function onAdd(e) {
    setTimeout(function () {
        $(e.sender.element[0]).find(".k-task-template:contains('New task')").addClass("dirty-field");
    }, 0)
}

Here is a modification of the provided Dojo. In this demo, the modified fields are being set with a red background. The desired "dirty" indication could be set by changing the "dirty-field" CSS class. 

Please check the above Dojo and let me know if you have questions regarding the implementation or need further assistance. 

Regarding your second question, the Gantt component is designed to save the changes in the existing events when the “save” button in the “Task” popup window is pressed and add the new tasks directly when the “Add Task” button is clicked. This is about to say that the asked functionality for saving all new changes at once is not a supported one. 
 
Regards,
Petar
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Vaishali
Top achievements
Rank 1
answered on 17 Jun 2019, 03:37 PM
Is there any way to edit the grid part of the gantt chart and not the timeline?
0
Vaishali
Top achievements
Rank 1
answered on 17 Jun 2019, 05:13 PM
I meant to say, is there any way to add the dirty field css to the grid part of the kendo
0
Petar
Telerik team
answered on 18 Jun 2019, 08:28 AM
Hello Vaishali,

Based on the provided information, I would suggest that the desired functionality is to have a red triangle added to the modified tasks in a Gantt chart - the same triangles which are added when a .k-dirty class is added to a Grid cell. The .k-dirty class cannot be used in Gantt, but we can define a new class which is formatting the DOM in a similar way as it. 

Based on my previous Dojo, here is a new one, demonstrating the described above functionality. 

The changes made in the JavaScript, compared to the previous Dojo are:
function onAdd(e) {
    setTimeout(function () {
        $(e.sender.element[0]).find(".k-task-template:contains('New task')").parent().parent().addClass(
            "dirty-field");
    }, 0)
}
 
function onSave(e) {
    $(e.sender.element[0]).find(".k-task-template:contains(" + e.task.title + ")").parent().parent().addClass(
        "dirty-field");
}
The marked in yellow selectors are selecting the wrapper element of the Tasks inside the Gantt and add the dirty-field CSS class to them.

The CSS defining the dirty-field class style is:
.dirty-field::before,
.dirty-field::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    border-color: transparent;
    border-style: solid;
}
 
.dirty-field::before {
    border-width: 0.3em;
    border-right-color: #FF0000;
    border-top-color: #FF0000;
}
 
.dirty-field::after {
    border-radius: 0.4em;
    border-width: 0.3em;
    border-right-color: #FF0000;
    border-top-color: #FF0000;
}

Please, check the provided Dojo and the description above and let me know if the proposed solution is the one you are looking for. 

If you have any further questions, please let me know

Regards,
Petar
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Gantt
Asked by
Vaishali
Top achievements
Rank 1
Answers by
Petar
Telerik team
Vaishali
Top achievements
Rank 1
Share this question
or