Colorize Tasks

2 posts, 0 answers
  1. Valerius
    Valerius avatar
    14 posts
    Member since:
    Oct 2017

    Posted 23 Nov Link to this post

    Hi Admins, is there any possible to Colorize Tasks in gantt [PHP] FOR EXAMPLE:

     <script>
          function onDataBound() {
            var gantt = this;

            gantt.element.find(".k-task").each(function(e) {
              var dataItem = gantt.dataSource.getByUid($(this).attr("data-uid"));

              // colorize task per business requirements
              if (dataItem.id = 904) {
                this.style.backgroundColor = "#f99";
              } else {
                this.style.backgroundColor = "#9f9";
              }
            });
          }
    </script>

     

    But this dosen't work in php gantt, can you please help, and tell what is the way to get colored tasks depending on values for example:

     

    $idField = new \Kendo\Data\DataSourceSchemaModelField('id');
    $idField->type('number')
            ->from('ID')
            ->nullable(true);

     

    Thanks

  2. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    619 posts

    Posted 27 Nov Link to this post

    Hi Valerius,

    The approach, that you have chosen to alter the Gantt Task background color depending on the Task ID is appropriate. Only a small change in the implementation is needed in order to execute the dataBound handler properly:
    function onDataBound() {
      var gantt = this;
      gantt.element.find(".k-task").each(function(e) {
        var dataItem = gantt.dataSource.getByUid($(this).attr("data-uid"));
         
        // colorize task per business requirements
        if (dataItem.id === 904) {
          this.style.backgroundColor = "#f99";
        } else {
          this.style.backgroundColor = "#9f9";
        }
      });
    }

    Also, do not forget to attach the event handler explicitly:
    $gantt
        ->dataBound("onDataBound")
    ?>

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