Gantt Chart-My Own Resources Dialog

[Nabil]

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

[Veselin Tsvetanov]

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

[Nabil]

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.

[Veselin Tsvetanov]

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

[Nabil]

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

[Nabil]

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 .

[Veselin Tsvetanov]

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

[Nabil]

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 ?

[Veselin Tsvetanov]

Hello Nabil,

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

Regards,
Veselin Tsvetanov
Progress Telerik

[Nabil]

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,

[Nabil]

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

[Veselin Tsvetanov]

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

[Nabil]

okay thankyou. 

[Nabil]

hey Veselin

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

[Veselin Tsvetanov]

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

[Ram]

how to open custom popup when click on assigned resources in tasks?

[Nencho]

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

[Ram]

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?

[Nencho]

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

[Ram]

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

[Nencho]

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