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
20 Answers, 1 is accepted
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
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.
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
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 .
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
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 ?
I have just answered to your question in the other forum thread, that you have opened.
Regards,
Veselin Tsvetanov
Progress Telerik
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,
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
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
hey Veselin
how can i reload the assignments after saving the task ? read the assignments from database again after saving the task, kindly tell
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
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
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?
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
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
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