Datasource connection

[sravanthi]

Hi,

 I am new to gantt chart. I am trying to integrate gantt chart into php application. To integrate this I have done the changes in demo code like below

   $result = new DataSourceResult('mysql:host=localhost;dbname=sample;', 'root', '', array(PDO::ATTR_PERSISTENT => true)); By changing I can see the data in
  console but it is not displaying in UI.Can any one help me in this

[Dimitar]

Hi Sravanthi,

In general, the provided code snippet shows a correct usage of the DataSourceResult(). A possible reason why the data is not being displayed in the Gantt widget is if the model schema is not specified correctly. Refer to the following section of the documentation where mapping of the PDO arrays is demonstrated:

• https://docs.telerik.com/kendo-ui/php/widgets/gantt/remote-binding#bind-to-pdo-returned-arrays

The Gantt widgets expects to receive the data in a particular format - id, orderId, parentId, start, end, percentComplete, summary, title. If the PDO returned array contains data with different properties, then the Gantt Schema should be configured as demonstrated in the above-linked article so that the widget is able to properly map the remote data and display the events.

I hope this helps. 

Regards,
Dimitar
Progress Telerik

[sravanthi]

Hi Dimitar,

Thanks for your replay It is working fine now.

[sravanthi]

Is there any way to customize the lable names in gantt UI PHP. Eg Add task will open popup how to customize the label names in that popup and also how we can give the permissions like only view the task not to edit

[Dimitar]

Hi Sravanthi,

You could use the Gantt editable.template to set a custom HTML markup for the edit popup:

• https://docs.telerik.com/kendo-ui/api/php/Kendo/UI/GanttEditable#template

The configuration should look as follows:

<?php
  $editable = new \Kendo\UI\GanttEditable();
  $editable->template('my-edit-template');
?>

<script id="my-edit-template" type="text/x-kendo-template">
   <h3>Edit meeting</h3>
   <p>
       <label>Title: <input name="title" /></label>
   </p>
   <p>
       <label>Start: <input data-role="datetimepicker" name="start" /></label>
   </p>
   <p>
       <label>End: <input data-role="datetimepicker" name="end" /></label>
   </p>
</script>

Important to note is that the template should contain elements whose name HTML attributes are set as the editable fields in order for the Gantt to know which field to update. The other option is to use MVVM bindings in order to bind HTML elements to data item fields.

Regards,
Dimitar
Progress Telerik

[sravanthi]

Thanks this will work for complete new form. but If I want to keep existed fields  which are coming from gantt and in addition to that if I want to add extra dropdown how can I add . Like append is there any option here?

[Dimitar]

Hi Sravanthi,

When using a template for the editor popup, you have to define the standard fields that are normally available in the standard edit popup by making sure that the name of the inputs matches the Gantt fields:

<script id="my-edit-template" type="text/x-kendo-template">
   <h3>Edit meeting</h3>
   <p>
       <label>Title: <input name="title" /></label>
   </p>
   <p>
       <label>Start: <input data-role="datetimepicker" name="start" /></label>
   </p>
   <p>
       <label>End: <input data-role="datetimepicker" name="end" /></label>
   </p>
</script>

There is no append alternative that allows adding new fields dynamically to the form, as the popup editor works with MVVM internally.

Regards,
Dimitar
Progress Telerik

[sravanthi]

Thanks for the replay. I want to  display the resources list according to the availability of the resources. Eg : If one resource is assigned to one task within 11th june 10.00AM to 12th june 12.00PM. I should not allow user to pick the same resource for another task between 11th june 10.00AM to 12th june 12.00PM. Is there any method  in kendo for this

[sravanthi]

Hi ,

Is there any way to show the all days in month view . Default gantt is  showing week wise

[Dimitar]

Hi Sravanthi,

You could fetch the Gantt dependencies by configuring a separate DataSource as demonstrated in the following demo:

• Gantt Resources Demo for PHP.

In terms of customizing the displayed resources in the assign resources dialog based on the start and end time of the task, you could try the following:

1) Use Gantt edit event to store the start and end time of the task in global variables and call the read() method on the gantt resources:

function onEdit(e) {
  var task = e.task;
  var gantt = e.sender;

  window.start = task.start;
  window.end = task.end;

  gantt.resources.dataSource.read();
}

2) Use the data() method to pass the saved start and end time as additional parameters with each request to the service:

<?php
$transport = new \Kendo\Data\DataSourceTransport();

$read = new \Kendo\Data\DataSourceTransportRead();

$read->url('resources.php?type=resource&operation=read')
         ->data('onResourcesRead');
...
?>

<script>
  function onResourcesRead() {
    return {
      start: window.start,
      end: window.end
    }
  }
</script>

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

Regards,
Dimitar
Progress Telerik

 

[sravanthi]

Thanks for your replay. Can you please reply to my previous post "Is there any way to show the all days in month view . Default gantt is  showing week wise"

[Dimitar]

Hi Sravanhthi,

The Gantt does not have a built-in view that displays the desired layout of the days. However, you could try creating a custom view based on the project requirements by extending the current Gantt Views as demonstrated in the following HowTo example:

• https://docs.telerik.com/kendo-ui/controls/scheduling/gantt/how-to/creating-custom-view

Regards,
Dimitar
Progress Telerik

[sravanthi]

Hi

I have few questions

1.I am using gantt now in codigantor application.As per my requirement for any child task If I am adding  2 resources I am creating this task as two records in database. It was working nicely but once i reload the page then only i can see two separate task in front end without refreshing is is showing as single task with 2 resources . so is there anyway to refresh the gantt chart once resources added

 

2. How to set the specific timezone in gantt

 

3. How can I change the time format to 24 hours  while creating the task

[Dimitar]

Hi Sravanthi,

1 ) In order to force a full refresh of the Gantt, the read() method of the dataSource could be called:

<script>
  var gantt = $("#gantt").getKendoGantt();
  gantt.dataSource.read()
  gantt.dependencies.read()
</script>

Alternatively, all tasks and dependencies using the current data items could be re-rendered through the refresh() method.

2) The Gantt uses the Browser timezone, in order to render the events. In such a manner, we aim to achieve unification in terms of starting time of a certain task, around the world (the different time zones).

3) Changing the format of the pickers inside the edit dialog could be changed through the edit event as follows:

var gantt = $("#gantt").kendoGantt({
  ...
  edit: function(e) {
    setTimeout(function() {
      var editWindow = $(".k-gantt-edit-form");

      if(editWindow.length) {
        var pickers = editWindow.find("[data-role='datetimepicker']");

        for (var i = 0; i < pickers.length; i += 1) {
          var picker = $(pickers[i]).getKendoDateTimePicker();

          picker.setOptions({
            timeFormat: "HH:mm"
          });
        }
      }
    });
  },
})

Regards,
Dimitar
Progress Telerik

[sravanthi]

Thank its working fine .Can you also help me in one more thing

We we hover the task in gantt it will show cross mark to delete the task . I want to hide that cross icon. I tried from css but it is now workin. Can you please provide a solution for it

 

 

 

[Dimitar]

Hello Sravanthi,

The Gantt has a built-in editable.destroy option that allows to prevent tasks from being deleted. This option also removed the cross icon from the task in the Gantt timeline, as well as the 'Delete' button from the edit popup:

$("#gantt").kendoGantt({
  ...
  editable: {
    destroy: false
  }
});

Regards,
Dimitar
Progress Telerik

[sravanthi]

Hi

 

Actually I am using php version

If I add above code it is showing two Add task buttons

[sravanthi]

Hi

Can anyone help me on this.

In DataSourceResults.php page inside  public function destroy($table, $models, $key) { I am writing my custom code to delete the parent task also incase if parent dont have any child .this code is working in backend but until unless I refresh the page parent task is not disappearing from gantt UI. I have tired $gantt->remove('ondelete'); in javascript ondelete function I am refreshing the page by using  location. reload(true); . But it is running before exceuting my code in destroy function how can resolve this issue

 

 

[Dimitar]

Hi Sravanthi,

The PHP wrapper equivalent for setting the editable.destroy property is the following:

<?php
    $gantt = new \Kendo\UI\Gantt('gantt');

    $gantt->editable(array('destroy' => false));
?>

Concerning removing a task from the UI, this could be achieved through the removeTask() method:

• Gantt removeTask() API Reference.

Regards,
Dimitar
Progress Telerik

[sravanthi]

Thanks .It is working fine. Can you please provide solution for my previous post also(releated to reload the gantt)

[Dimitar]

Hello Sravanthi,

If I can understand correctly, the issue where the Gantt UI needs to be refreshed appears when a task is removed. In order to avoid the need of a refresh, you could use the removeTask() client-side method for removing the tasks:

• https://docs.telerik.com/kendo-ui/api/javascript/ui/gantt/methods/removetask

In case a refresh is needed, you could use the refresh() method to render all tasks and dependencies using the current data items. Alternatively, you could use the dataSource.read() method to update the Gantt data from the remote service.

Regards,
Dimitar
Progress Telerik

[sravanthi]

Hi

Can anyone provide a solution make add task button customization. I want to allow user to create only child task

[Dimitar]

Hi Sravanthi,

There is no built-in property that allows to modify the 'Add Task' button configuration. Thus, a possible option is to alter the Gantt widget implementation and implement the desired logic for the 'Add Task' button. 

Also, as this thread diverged from the initial issue, I would suggest to open separate threads for different issues. In this way, we can keep each thread focused on resolving a specific issue and provide you with a more efficient assistance.

Regards,
Dimitar
Progress Telerik

[sravanthi]

Thanks I will create a new thread next time .but can you please help to add filters in gantt. I can see the the demo with dates range .But I need filter for resource when we select the resource it should display the task which are assigned to that particular resource.

[Dimitar]

Hi Sravanthi,

The Gantt resources popup is currently could not be re-configured. This is logged as a feature request in the Kendo UI Feedback Portal from where you could start tracking this request:

• https://feedback.telerik.com/kendo-jquery-ui/1360264-gantt-resource-template-should-be-configurable

Regards,
Dimitar
Progress Telerik

[sravanthi]

If I correclty understood your reply I am not asking about resource popup . I want add resource filter above the gantt and task name filter . SO if select anything it should display the tasks in gantt UI accroding to the selected filter

[Dimitar]

Hello Sravanthi,

I would suggest to try the following approach for achieving the desired result:

1) Initialize a MultiSelect widget above the Gantt.

2) Subscribe to the MultiSelect change event.

3) Inside the change event handler get a reference to the Gantt widget and use the dataSource.filter() method as follows:

function onChange(e) {
    var value = e.sender.value();
    var gantt = $("#gantt").getKendoGantt();

    gantt.dataSource.filter({
      operator: function(event) {

      var resourcesIds = event.resources ? event.resources.map(a => a.id) : [];

      var found = false;
      for (var i = 0; i < resourcesIds.length; i++) {
        if (value.indexOf(resourcesIds[i]) > -1) {
          found = true;
          break;
        }
      }

      return found;
    }
  });
}
</script>

Regards,
Dimitar
Progress Telerik

[sravanthi]

currently in gantt task editor we have start and end date as mandatory . I want to add resource adding also manadatory how Can i make resource mandatory

[Dimitar]

Hello Sravanthi,

You could utilize the Gantt edit event to retrieve the active Kendo Validator instance and add custom validation rules and messages.

Also, as this thread diverged from the initial issue, for any further questions, please open separate support or forum threads.

Regards,
Dimitar
Progress Telerik