How to get a reference to Grid?

I have seen a few examples of manipulating the grid in the gantt using mygrid. How does one get a reference to mygrid?

Hello Stephen,
Do you mean DHTMLX Grid (part of DHTMLX Suite)? Or mygrid is another library?

In any case, you need to use the Gantt API to obtain the task objects and modify them. I don’t have examples with DHTMLX Grid, but here is an example with the ad-grid library:
https://snippet.dhtmlx.com/h2hbz8cs
It shows how to display the task data in the grid, but you cannot modify tasks from that grid, and the data is not updated. That part should be implemented manually.

First, thank you for responding to my question. I would like to modify the “grid” section of the gantt component after the data has been loaded into the component. I am trying to understand how to get access to data and styles associated with individual cells as shown in picture.

I was able to use this code snippet to change the background color of individual cells in the grid - DHTMLX Snippets.

Is there anyway to change the borders for a cell grid?

Hello Stephen,
Thank you for the clarification.

By default, Gantt uses the column name to show a task property. But you can show any other text or HTML by using the template function in the column configuration:
https://docs.dhtmlx.com/gantt/desktop__specifying_columns.html#datamappingandtemplates

Here are examples:
https://snippet.dhtmlx.com/t5ba0gzu
https://snippet.dhtmlx.com/gfsdp121
https://snippet.dhtmlx.com/5/c7fd80439

The styles are specified in the dhtmlxgantt.css file, but you can add custom styles.
There is no specific template for the cell except the template function in the column configuration. But you can use the grid_row_class that will be called for the whole task row:
https://docs.dhtmlx.com/gantt/api__gantt_grid_row_class_template.html

In that template, you can check the task object and return a custom class name. Then you can use that class name as a selector and add the styles you need.

Here are examples:
https://snippet.dhtmlx.com/5/194ec0e28
https://snippet.dhtmlx.com/zietxgrd

If you want to add a specific style for a cell, you can combine the grid_row_class with the cell selector that will use the column name or index:


It is similar to what you implemented in the snippet:
https://snippet.dhtmlx.com/rm57vwh6

To change borders, you need to modify the border style rule:

    .wheat [data-column-name="start_date"]{
        background: wheat;
        border: 2px dashed olivedrab;
    }

    .coral [data-column-name="duration"]{
        background: coral;
        border: 2px groove blueviolet;
    }

Here is an example:
https://snippet.dhtmlx.com/lo26nea2

Hi Ramil, I was able to get the grid styling I wanted using the information you provided. First, I applied a style to remove the top and bottom borders for the grid rows.

   .gantt_row  {
   border-top: 0px;
   border-bottom: 0px;			
   }

I then created two styles for each column - a gridcell and gridcellmerged class

   .gridcell0 [data-column-name="columnname0"] {
      border-top: 0px; 
      border-left: 1px solid #ebebeb;
   } 
   .gridcellmerged0 [data-column-name="columnname0"] {
      border-top: 0px; 
      border-left: 1px solid #ebebeb;
   } 
   ...

I then applied the styles using the gantt.templates.grid_row_class function

gantt.templates.grid_row_class = function(start, end, task){
     
     var gridcols = gantt.getGridColumns();
     var styles = "";
     
     for (i=0;i<gridcols.length;i++){
        if (task[gridcols[i].name] == ""){
           styles += " gridcellmerged" + i.toString();
        } else {
           styles += " gridcell" + i.toString();
        }
     }
     return styles;
  };

Using the styles and the logic, I visually “merged” grid cells with no text with the last cell in the column that did have content. Worked out really well.