Mark field Dirty in Gantt chart

5 posts, 0 answers
  1. Vaishali
    Vaishali avatar
    32 posts
    Member since:
    Jun 2019

    Posted 13 Jun 2019 Link to this post

    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');

     

  2. Petar
    Admin
    Petar avatar
    511 posts

    Posted 17 Jun 2019 Link to this post

    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.
  3. Vaishali
    Vaishali avatar
    32 posts
    Member since:
    Jun 2019

    Posted 17 Jun 2019 in reply to Petar Link to this post

    Is there any way to edit the grid part of the gantt chart and not the timeline?
  4. Vaishali
    Vaishali avatar
    32 posts
    Member since:
    Jun 2019

    Posted 17 Jun 2019 in reply to Vaishali Link to this post

    I meant to say, is there any way to add the dirty field css to the grid part of the kendo
  5. Petar
    Admin
    Petar avatar
    511 posts

    Posted 18 Jun 2019 Link to this post

    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.
Back to Top