Gantt Chart-My Own Resources Dialog

21 posts, 1 answers
  1. Nabil
    Nabil avatar
    29 posts
    Member since:
    Dec 2017

    Posted 27 Dec 2017 Link to this post

    Hey Telerik team .

    i'm using Telerik Gantt Chart. it's great really awesome.

    I have a requirement to add my custom Recources dialog in the Gantt chart or populate existing resources dialog based on the StartDate and EndDate of the selected task.

    when dialog is open to assign resources to task based on the StartDate and EndDate of the selected task the resources dialog will be populated after checking from the server that is the resources are available on the  selected DateTime or not. if available then all will be in the dialog box to be selected as a assignee which are not available on that date will not be there in the list !

    is that possible in this gantt chart with the existing resources dialog or not ? or is this possible to use my own resource dialog box and do all this stuff ?

    please let me know.

    Thankyou.

    Regards: Nabil Nawaz

  2. Answer
    Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    1053 posts

    Posted 28 Dec 2017 Link to this post

    Hi Nabil,

    As far as I can understand, you need to alter the available resources options in the Assign resources dialog depending on the Start and End time of the Task, that is being edited. If this is the case, the required could be achieved by handling the Gantt chart edit event. In that event you could retrieve and store in global variables the start and end date and trigger the read() call on the Resources DataSource:
    function onEdit(e) {
      var task = e.task;
      var gantt = e.sender;
       
      window.start = task.start;
      window.end = task.end;
       
      gantt.resources.dataSource.read();
    }

    Then, a Data() function for the Resources Read action should be configured:
    .Resources(r => r
        .Field("resources")
        .DataColorField("Color")
        .DataTextField("Name")
        .DataSource(d => d
            .Custom()
            .Schema(s => s
                .Model(m => m.Id("ID"))
                .Data("Data")
            )
            .Transport(t =>
            {
                t.Read("ReadResources", "Gantt").Data("onResourcesRead");
            })
        )
    )

    and:
    function onResourcesRead() {
      return {
        start: window.start,
        end: window.end
      }
    }

    This will allow you to filter on the server the returned Resources based on start and end time of the Task.

    Regards,
    Veselin Tsvetanov
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Nabil
    Nabil avatar
    29 posts
    Member since:
    Dec 2017

    Posted 29 Dec 2017 in reply to Veselin Tsvetanov Link to this post

    yes you are right but in this case when user double click the ResourceAssignment column at tree side of chart at that time the edit event of task is not fired and user can select the Assignments without the Resource Dialog refresh?

    how to handle that double click event ? need to pass dates at that double click event too to the server.

  4. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    1053 posts

    Posted 02 Jan 2018 Link to this post

    Hi Nabil,

    I am afraid that currently, the Gantt chart does not expose an edit event for the Assigned Resources column in the treelist of the widget. Therefore, I would suggest you to disable the editing on that column. This way the Assigned Resources change will only be allowed from the Task edit pop-up:
    @(Html.Kendo().Gantt<TaskViewModel, DependencyViewModel>()
        .Name("gantt")
        .Columns(columns =>
        {
            columns.Bound("title").Editable(true).Sortable(true);
            columns.Resources("resources").Editable(false).Title("Assigned Resources");
        })
    ...........

    Regards,
    Veselin Tsvetanov
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Nabil
    Nabil avatar
    29 posts
    Member since:
    Dec 2017

    Posted 02 Jan 2018 in reply to Veselin Tsvetanov Link to this post

    ohh no event for that double click. BTW the way you told me i did that in that way when i asked you how double click event will be catch for resource assignment
  6. Nabil
    Nabil avatar
    29 posts
    Member since:
    Dec 2017

    Posted 03 Jan 2018 in reply to Veselin Tsvetanov Link to this post

    can you please tell me how can i catch the date event ? means what i want to do is when user changes the date in the textbox. i also want to update the resources dialog box data. based on the StartDate and EndDate i want to reload resources .

  7. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    1053 posts

    Posted 04 Jan 2018 Link to this post

    Hi Nabil,

    To reload the resources upon start or end date change, I would suggest you to attach a change event handler to those two DateTimePickers. You could do that by extending the logic of the edit event handler:
    function onEdit(e) {
      var container = e.container;
      var startPicker = container.find('div[data-container-for="start"] input[data-role="datetimepicker"]').data('kendoDateTimePicker');
      var endPicker = container.find('div[data-container-for="end"] input[data-role="datetimepicker"]').data('kendoDateTimePicker');
      var task = e.task;
      var gantt = e.sender;
     
      startPicker.bind('change', function(e) {
        var newValue = e.sender.value();
        window.start = newValue;
        gantt.resources.dataSource.read();
      });
       
      endPicker.bind('change', function(e) {
        var newValue = e.sender.value();
        window.end = newValue;
        gantt.resources.dataSource.read();
      });
     
      window.start = task.start;
      window.end = task.end;
      gantt.resources.dataSource.read();
    };

    Regards,
    Veselin Tsvetanov
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  8. Nabil
    Nabil avatar
    29 posts
    Member since:
    Dec 2017

    Posted 05 Jan 2018 in reply to Veselin Tsvetanov Link to this post

    Thankyou Veselin.

    i'm facing a problem with the TIME in my chart.

     

    the problem is if i'm having time at server side    Start -> 1:00:00 and End -> 3:00:00 then in the browser in time field the time is showing like 1:00:00 is being shown as 6:00 and 3:00:00 is being shown as  8:00 . But when i update this task then at server side same time 1:00 and 3:00 is posted. i want to show same time which is at the server at the client side. how can i do that ?

  9. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    1053 posts

    Posted 05 Jan 2018 Link to this post

    Hello Nabil,

    I have just answered to your question in the other forum thread, that you have opened.

    Regards,
    Veselin Tsvetanov
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  10. Nabil
    Nabil avatar
    29 posts
    Member since:
    Dec 2017

    Posted 06 Jan 2018 in reply to Veselin Tsvetanov Link to this post

    thankyou Veselin

     

    can you please tell me how can i show message when user save/update tasks or it's resource assignments ? i want to show indication to user when he performs some action on Gantt Chart,

  11. Nabil
    Nabil avatar
    29 posts
    Member since:
    Dec 2017

    Posted 07 Jan 2018 in reply to Veselin Tsvetanov Link to this post

    as well as can you please tell me how can I bind more properties with resources datasource? other than Name ID Color,

    i want to show resource's image as well i tried by adding extra property in my data source for resources but could'nt do it. how can i add more property in resource datasource and catch it at client side in client template for showing image ?

     

    i saw your client template there you have done image functionality using the ID property. i want to do it with other property not the ID property

  12. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    1053 posts

    Posted 10 Jan 2018 Link to this post

    Hi Nabil,

    To notify the user after changes to a task have been saved, you could handle the Gantt dataBound event. Keep in mind, that the event will be fired also when a new task is being created and when the tasks are initially bound to the widget. To distinguish the save action, you could handle the save event, which will always be fired before the dataBound on modifying the task.

    Concerning the additional fields for resources question, I am afraid, that the Gantt would allow you to pass only the id, Text, Color and Format for each resource. Custom fields could not be passed to the widget.

    As a side-note, in case you have any further questions, which are not directly related to the topic of the current thread ("Gantt Chart-My Own Resources Dialog"), I would suggest you to log them in separate tickets / forum posts. This way we will be able to keep each thread focused and to provide you with the best targeted assistance for each case.

    Regards,
    Veselin Tsvetanov
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  13. Nabil
    Nabil avatar
    29 posts
    Member since:
    Dec 2017

    Posted 10 Jan 2018 in reply to Veselin Tsvetanov Link to this post

    okay thankyou. 
  14. Nabil
    Nabil avatar
    29 posts
    Member since:
    Dec 2017

    Posted 13 Jan 2018 in reply to Veselin Tsvetanov Link to this post

    hey Veselin

    how can i reload the assignments after saving the task ? read the assignments from database again after saving the task, kindly tell

  15. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    1053 posts

    Posted 17 Jan 2018 Link to this post

    Hello Nabil,

    Yes, you can reload the assignments from the remote source after a task has been saved. To do that you can handle the save and dataBound events of the widget:
    var shouldReload = false;
     
    function onSave(e) {
      shouldReload = true;
    }
     
    function onDataSound(e) {
      if (shouldReload) {
        shouldReload =  false;
     
        var gantt = e.sender;
        gantt.resources.dataSource.read();
      }
    }

    Regards,
    Veselin Tsvetanov
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  16. Ram
    Ram avatar
    4 posts
    Member since:
    Feb 2018

    Posted 09 May 2018 Link to this post

    how to open custom popup when click on assigned resources in tasks?
  17. Nencho
    Admin
    Nencho avatar
    1822 posts

    Posted 11 May 2018 Link to this post

    Hello Ram,

    You can find the Assign button element in the Edit Task window and subscribe for its keydown event. Then you, you can prevent the propagation of the event and open your own custom window:

    http://dojo.telerik.com/@nenchef/AfotO/10

    Hope this would help.

    Regards,
    Nencho
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  18. Ram
    Ram avatar
    4 posts
    Member since:
    Feb 2018

    Posted 16 May 2018 in reply to Nencho Link to this post

    Hi Nencho,

    Thanks for your reply. We don't want to open custom pop up on assign button click. We just want to open on Assign Resources column(after title column)in the left panel of gantt control. Can you help us?

  19. Nencho
    Admin
    Nencho avatar
    1822 posts

    Posted 18 May 2018 Link to this post

    Hello Ram,

    I am not sure that I had fully understood the scenario that you aim to achieve. Could you please send us a screenshot with some steps, describing the intentional functionality. Currently, the resources popup directly opens, when you click on the Resources column from the left-hand side of the widget. You can test this behavior in the demo below:

    https://demos.telerik.com/kendo-ui/gantt/resources

    Regards,
    Nencho
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  20. Ram
    Ram avatar
    4 posts
    Member since:
    Feb 2018

    Posted 22 May 2018 in reply to Nencho Link to this post

    when I click on the resource column in the left-hand of the widget, I need to open my custom pop up instead of default resource pop up. Is it possible ? How can we handle this popup? which event I need to use to achieve this? we are trying this functionality from last one week.Please help me

  21. Nencho
    Admin
    Nencho avatar
    1822 posts

    Posted 23 May 2018 Link to this post

    Hello Ram,

    In this case, you can set the editable option to false and subscribe for the dblclick event of the Resources column, using the dataBound event of the widget:

    dataBound: function(e){
          $(".k-grid-content").eq(0).find("tr").find("td:eq(1)").dblclick(function(e){             
          alert("Custom Popup Here")               
    })

    Here is a dojo example, where the above suggestion is demonstrated:

    https://dojo.telerik.com/ejIDujUW

    Regards,
    Nencho
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top