Configuration

dhtmlxGrid possesses flexible configuration that let you get desired look and feel via a collection of versatile properties.

Columns

It is possible to adjust the configuration of grid columns via the corresponding option columns. As a value it takes an array with objects each of which contains config of a column. The full list of properties you can set for a column is given in the API reference.

var grid = new dhx.Grid("grid_container", {
    columns: [
        { width: 100, id: "a", header: [{ text: "#" }] },
        { width: 100, id: "b", header: [{ text: "Title" }] },
        { width: 200, id: "c", header: [{ text: "Name" }] },
        { width: 200, id: "d", header: [{ text: "Address" }] }
    ],
    data: dataset
});

Each column object may contain a set of properties described below:

  • id - (string|number) the id of a column
  • width - (number) the width of a column
  • header - (array) an array of objects with header rows configuration. Each header object may include:
    • text - (string|number) the text of a header
    • colspan - (number) the number of columns in a colspan
    • css - (any) styling to be applied to a header
    • content - (string) additional content of a header, which can be:
      • a filter: "inputFilter" or "selectFilter"
      • one of the methods that process values in a column and show result in the header:
        "avg" | "sum" | "max" | "min"
      • some other string
  • footer - (array) an array of objects with footer rows configuration. Each footer object may include:
    • text - (string|number) the text of a header
    • colspan - (number) the number of columns in a colspan
    • css - (any) styling to be applied to a header
    • content - (string) additional content of a header, which can be:
      • a filter: "inputFilter" or "selectFilter"
      • one of the methods that process values in a column and show result in the footer:
        "avg" | "sum" | "max" | "min"
      • some other string
  • maxWidth - (number) the maximal width to be set for a column
  • mark - (object|function) returns a template for marking a cell(s)
    • as an object contains min and max properties, to apply desired CSS classes to cells with minimal|maximal values in a column
    • as a function takes several parameters:
      • cell - (string) the value of a cell
      • columnCells - (array) an array of all cell values in the specified column
      • row - (object) an object with all cells in a row
      • col - (object) the config of a column (see the columns config)
  • type - (string) the type of a column: "string"|"number"|"boolean"|"any"
  • template - (function) returns a template with content for a cell(s). Takes 3 parameters:
    • cellValue - (any) the value of a cell
    • row - (object) an object with all cells in a row
    • col - (object) the config of a column (see the columns config)

Data

You can specify data for your grid before initialization via the data configuration property. There are also API methods for loading data into grid on the fly. Check the details in the article Data Loading.

var grid = new dhx.Grid("grid_container", {
    columns: [// columns config],
    data: dataset });

Width/height

You can specify necessary size of your Grid via the configuration properties width and height:

var grid = new dhx.Grid("grid_container", {
    columns: [// columns config],
    width: 400,       height: 400,      data: dataset
});

In case these options aren't set in the Grid configuration, the component will take the size of the container.

Fitting container size

It is possible to adjust the size of grid to the size of its container with the help of the fitToContainer configuration option, like this:

<div id="grid_container" style="width:600px;height:400px;"></div>
var grid = new dhx.Grid("grid_container", {
    columns: [// columns config],
    // grid will be adjusted to the size of container
    fitToContainer:true, 
    data: dataset
});

If grid has its own width and height specified, setting the fitToContainer property won't have any effect.

Selection

dhtmlxGrid includes the selection feature that allows higlighting a selected cell and the row it belongs to. Use the selection property to enable selection in a grid.

var grid = new dhx.Grid("grid_container", {
    columns: [// columns config],
    selection:true,        data: dataset
});

Spans

The component has the spans property that allows you to specify all necessary columns and rows spans right through the initial configuration. It represents an array with spans objects. Each span object contains the following properties:

  • row - (string|number) obligatory, the id of a row
  • column - (string|number) obligatory, the id of a column
  • rowspan - (number) optional, the number of rows in a span
  • colspan - (number) optional, the number of columns in a span
  • text - (string|number) optional, the content of a span
  • css - (string) optional, the name of a CSS class applied to a span
var grid = new dhx.Grid("grid_container", {
    columns: [// columns config],
    spans: [
        {row:"0", column:"a", rowspan:5 },
        {row:"0", column:"b", rowspan:9, text:"<h2>Some content here</h2>"},
        {row:"0", column:"c", colspan:2, text:"Some content"},
        {row:"10", column:"a", colspan:4, text:"Some header", css:"myCustomColspan"}
    ],
    data: dataset
});

Header/footer height

The height of the header/footer of Grid is calculated as a sum of rows which are included into it. To set the height of a row inside the header/footer, use the headerRowHeight/footerRowHeight properties, correspondingly.

var grid = new dhx.Grid("grid_container", {
    columns: [// columns config],
    // footerRowHeight:50       headerRowHeight: 50    });

The default value of the mentioned properties is 40.

Autowidth for columns

You can configure columns' settings so that their width would automatically adjust to their content. Set the columnsAutoWidth property to true for this purpose.

var grid = new dhx.Grid("grid_container", {
    columns: [// columns config],
    columnsAutoWidth: true,     data: dataset
});

Header sorting

You can sort content of each Grid column by clicking on its header. However, if you want to disable this feature, you need to set the headerSort to false.

var grid = new dhx.Grid("grid_container", {
    columns: [// columns config],
    headerSort:false,       data: dataset
});

Frozen columns

You can fix (or "freeze") a column or several columns, so that they will become static, while the rest of columns remain scrollable. There is the splitAt property that splits grid columns into the frozen and movable parts. Just set the number of columns (from the left side of the grid) you want to freeze as a value of the property in the Grid configuration.

var grid = new dhx.Grid("grid_container", {
    columns: [// columns config],
    splitAt:1,       data: dataset
});

Row height

The default height of a grid row is 40. You can change it and set any other height via the rowHeight property, e.g.:

var grid = new dhx.Grid("grid_container", {
    columns: [// columns config],
    rowHeight: 30,      data: dataset
});

Row style

There is a possibility to apply some styling to a row via the rowCss property. It is a function that takes the id of a row as a parameter and returns a string with the name of a CSS class.

<style>
    .my_custom_row {
        background: coral;
    }
</style>
 
 
var grid = new dhx.Grid("cont", {
    columns: [// columns config],
    rowCss: function (row) { return row.custom ? "my_custom_row" : "" },     data: dataset
});
Back to top