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) mandatory, the id of a column
  • width - (number) the width of a column
  • header - (array) mandatory, an array of objects with header rows configuration. Each header object may include:
    • text - (string|number) the text of a header
    • align - (string) aligns data in the header: "left"|"center"|"right"
    • colspan - (number) the number of columns in a colspan
    • rowspan - (number) the number of rows in a rowspan
      Related sample:  Grid. Header Spans
    • css - (any) styling to be applied to a header
    • content - (string) additional content of a header, which can be:
      • a filter: "inputFilter" | "selectFilter" | "comboFilter"
      • one of the methods that process values in a column and show result in the header:
        "avg" | "sum" | "max" | "min"
      • some other string
    • filterConfig - (object) optional, a configuration object for "comboFilter". It can contain a set of properties:
      • filter - (function) sets a custom function for filtering Combo Box options
      • readonly - (boolean) makes ComboBox readonly (it is only possible to select options from the list, without entering words in the input)
      • template - (function) sets a template of displaying options in the popup list
      • placeholder - (string) sets a placeholder in the input of ComboBox
      • virtual - (boolean) enables dynamic loading of data on scrolling the list of options
  • htmlEnable - (boolean) if set to true, specifies the HTML content (inner HTML) of a column. If set to false, the content of the column cells will be displayed as a string value
    Related sample:  Grid. Html In Data
  • footer - (array) an array of objects with footer rows configuration. Each footer object may include:
    • text - (string|number) the text of a header
      Related sample:  Grid. Grid With Footer
    • colspan - (number) the number of columns in a colspan
    • rowspan - (number) the number of rows in a rowspan
    • css - (any) styling to be applied to a header
    • content - (string) additional content of a header, which can be:
      • a filter: "inputFilter" | "selectFilter" | "comboFilter"
      • 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
    Related sample:  Grid. Max Width
  • minWidth - (number) the minimal width to be set for a column
    Related sample:  Grid. Min Width
  • 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)
        Related sample:  Grid. Mark Cells
  • resizable - (boolean) defines whether a column can be resized
  • type - (string) the type of a column: "string"|"number"|"boolean"|"any"|"date"
  • dateFormat - (string) defines the format of dates (type:"date")
  • editorType - (string) the type of an editor used in a column: "input"|"select"|"datePicker"|"checkbox"|"combobox"
  • options - (array) a set of options to be displayed in the editor of a cell (editorType: "select"|"combobox")
  • template - (function) returns a template with content for a cell(s). Takes 3 parameters:
  • hidden - (boolean) defines whether a column is hidden
    Related sample:  Grid. Hidden Columns
  • draggable - (boolean) defines whether a column is draggable
  • editable - (boolean) defines whether a column is editable
  • sortable - (boolean) defines whether a column is sortable
  • adjust - (boolean|string) defines whether the width of a column is automatically adjusted to its content
  • autoWidth - (boolean) enables/disables the ability of a column to adjust its size to the size of Grid
  • align - (string) aligns data in a column: "left" | "center" | "right"
  • tooltip - (boolean) enables a tooltip on hovering over the content of a column, true by default

Alignment

Starting from v6.5, there is the ability to align data in a column as well as to align data in the column's header via the align option:

var grid = new dhx.Grid("grid_container", {
    columns: [
        { id: "name", header:  [{ title: "Name", align: "center" }], align: "right"}         // more options
    ],
    data: dataset
});

Related sample:  Content align - DHTMLX Grid

The available values of the option are "left", "center" and "right".

Automatic adding of empty row into Grid

There is a possibility to automatically add an empty row after the last filled row in the grid. Use the autoEmptyRow property in the Grid configuration object to enable this feature:

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

Related sample:  Grid. Auto Empty Row

Autosize for columns

You can configure columns' settings so that their width would automatically adjust to their content. Use the adjust property for this purpose. The property can take one of three values:

  • "header" - adjusts the columns to the width of their header
  • "footer" - adjusts the columns to the width of their footer
  • "data" - adjusts the columns to the width of their content
  • true - combines the above mentioned modes and adjusts the column to the bigger value
var grid = new dhx.Grid("grid_container", {
    columns: [// columns config],
    adjust: "header",     data: dataset
});

Related sample:  Grid. Adjust Columns

It is also possible to set the adjust property to true in the configuration of a separate column to make its width adjust automatically to the content:

var grid = new dhx.Grid("grid_container", { 
    columns: [
        { id: "country", header: [{ text: "Country" }], adjust: "header" },         { id: "population", header: [{ text: "Population" }] }
    ],
    adjust: false,     data: dataset
});

In case complex HTML content is added into a column, the column width may be calculated incorrectly.

Autowidth for columns

It is possible to adjust the size of Grid columns to the size of Grid with the help of the autoWidth configuration option, like this:

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

Related sample:  Auto width - DHTMLX Grid

You can disable this functionality for a specified column via setting the autoWidth property to false in the configuration of the column:

var grid = new dhx.Grid("grid", {
    columns: [
        { width: 200, id: "country", header: [{ text: "Country" }], autoWidth: false },         { width: 150, id: "population", header: [{ text: "Population" }] },
    ],
    autoWidth: true,     data: dataset
});

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 });

Drag-n-drop of Grid columns

This functionality requires PRO version of the dhtmlxGrid (or DHTMLX suite) package.

Starting from v6.5, you can add the ability to reorder columns of Grid by drag and drop via using the dragItem configuration property and setting its value to "column".

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

You can disable this functionality for a separate column via the draggable configuration option of the column:

var grid = new dhx.Grid("grid_container", {
    columns: [
        { width: 200, id: "country", header: [{ text: "Country" }], draggable: false },         { width: 150, id: "land", header: [{ text: "Land" }] },
        { width: 150, id: "density", header: [{ text: "Density" }], draggable: false }     ],
    data: dataset,
    dragItem: "column",    });

Related sample:  Setup drag column (Pro)

To make the process of reordering columns by drag and drop more flexible, apply the related beforeColumnDrag and beforeColumnDrop events.

Drag-n-drop of Grid rows

dhtmlxGrid supports drag-n-drop of rows between grids in several modes. To begin with, you should specify the dragMode property in the configuration object of Grid. Then define which mode you need:

  • "target" - a grid takes rows from other grids, while its row can't be dragged out of it
  • "source" - a grid allows dragging its rows out and can't take rows from other grids
  • "both" - a grid both takes rows from other grids and allows dragging its rows out as well
var grid = new dhx.Grid("grid_container", { 
    columns: [
        { id: "country", header: [{ text: "Country" }] },
        { id: "population", header: [{ text: "Population" }] }
    ],
    data: dataset,
    dragMode: "source" });

Related sample:  Grid. Setup Drag Mode

Editing Grid and separate columns

dhtmlxGrid provides the editing feature that includes two options:

  • editing of the whole Grid, i.e. of all its columns

To make all columns of the Grid editable, specify the editable option in the configuration of Grid:

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

Related sample:  Grid. Editable Data

  • editing of the specified columns only

This option implies that you can enable/disable editing of particular columns by setting the editable: true property in the configuration of a column:

In the example below all columns will be editable, except for the first one:

var grid = new dhx.Grid("grid", {
    columns: [
        { 
            width:150,id:"project",
            editable:false,             header: [
              {text:"Project"}, {content:"selectFilter"}
            ]
        },
        { width:150, id:"owner", header: [{text:"Owner"},{content:"inputFilter"}]},
        { width:150, id:"hours", header: [{text:"Hours"}, {content:"inputFilter"}]},
        // more columns
    ],
    data: data,
    editable: true
});

And the following example demonstrates an opposite situation when only the first column is editable:

var grid = new dhx.Grid("grid", {
    columns: [
        { 
           width:150,id:"project",
           editable:true,            header: [
            {text:"Project"}, {content:"selectFilter"}
           ]
        },
        { width:150, id:"owner", header: [{text:"Owner"},{content:"inputFilter"}]},
        { width:150, id: "hours", header: [{text:"Hours"}, {content:"inputFilter"}]},
        // more columns
    ],
    data: data
});

Setting type of column editor

You can specify the way of editing the cells of a Grid column depending on its content as simple input, select control, date picker, checkbox or combobox. The type of the used editor is defined by the editorType property of a column. There are five types of column editors:

  • input - an editor for cells with a simple text (the default one, unless a column has type:"date")
// cells of the "project" column will be edited as inputs
var grid = new dhx.Grid("grid", {
    columns: [
        {
            width: 150,
            id: "project",
            header: [{ text: "Project" }, { content: "selectFilter" }]
        }
    // more columns
    ],
    data: data,
    editable: true
});

Related sample:  Grid. Editable Data

  • datePicker - an editor for cells with dates (default for a column with type:"date")

To use this editor, you should specify the type:"date" property for a column. It is also possible to set the necessary format of date while editing a cell content with the help of the dateFormat option.

{ 
    // if the type:"date" config is set in the column config, 
    // there's no need to specify the type of the editor
    width: 150, id: "start_date", 
    header: [{ text: "Calendar", colspan: 2 }, { text: "Start date" }], 
    type: "date", dateFormat: "%d/%m/%Y"  }

Related sample:  Grid. Editable Data

  • select - an editor for cells that should contain several options to choose from

To set this editor type you need to provide the options property with an array of options to be displayed in the editor, e.g.:

{
    width: 150, id: "status", header: [{text: "Status"}, {content: "selectFilter"}],
    editorType: "select", options: ["Done", "In Progress", "Not Started"] }

Related sample:  Grid. Editable Data

  • checkbox - an editor for cells with a two-state check box

To use this editor, you need to specify the type: "boolean" property for a column.

{ 
    // if the type:"boolean" config is set in the column config, 
    // there's no need to specify the type of the editor
    width: 160, id: "test", 
    header: [{ text: "Test" }], 
    type: "boolean" }

Related sample:  Grid. Editable Data

If you specify the editing option in the configuration of Grid, then editing of a column with checkbox will always be enabled.

  • combobox - an editor for cells that should contain several options to choose from. There is a possibility to find an option by entering text in the edit control

To use this editor you need to specify the editorType: "combobox" property for a column and provide the options property with an array of options to be displayed in the editor, e.g.:

{
    width: 160, id: "test", header: [{ text: "Test" }], type: "string", 
    editorType: "combobox", options: ["1 time", "1-2 times", "more than 5 times"]  }

Related sample:  Grid. Editable Data

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
});

Related sample:  Grid. Frozen Columns

Header/footer content

There are three types of filters that you can specify in the header/footer content of a Grid column:

  • inputFilter - provides a way of filtering data of a Grid column by using a text field
{ 
    width: 160, id: "budget", 
    header: [{ text: "Budget" }, { content: "inputFilter" }] }

Related sample:  Grid. Header Filter

  • selectFilter - allows end users to filter data of a column by choosing an option from a presented dropdown list
{ 
    width: 160, id: "status", 
    header: [{ text: "Status" }, { content: "selectFilter" }],     editorType: "select", 
    options: ["Done", "In Progress", "Not Started"] 
}

Related sample:  Grid. Header Filter

  • comboFilter - provides a way to filter data of a column by choosing an option from a presented dropdown list. To find an option quickly you can enter text into the edit control.
{
    width: 160, id: "renewals", 
    header: [{ text: "Number of renewals" }, { content: "comboFilter" }],     type: "string", editorType: "combobox", 
    options: ["1 time", "1-2 times", "more than 5 times"] 
}

Related sample:  Grid. Header Filter

If you specify comboFilter as the header or footer content of a column, you can set an additional config with properties for it.

var grid = new dhx.Grid("grid_container", {
    columns: [
        {
            width: 150, 
            id: "migrants", 
            header: [
                { text: "Migrants (net)" }, 
                { content: "comboFilter", filterConfig: {readonly: true }}             ] 
        }   
    ],
    data: dataset
}

The list of configuration properties for comboFilter

  • filter - (function) sets a custom function for filtering Combo Box options
  • readonly - (boolean) makes ComboBox readonly (it is only possible to select options from the list, without entering words in the input)
  • template - (function) sets a template of displaying options in the popup list
  • placeholder - (string) sets a placeholder in the input of ComboBox
  • virtual - (boolean) enables dynamic loading of data on scrolling the list of options

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    });

Related sample:  Grid. Rows Height

The default value of the mentioned properties is 40.

Hidden columns

You can set the hidden:true property in the config of a column so that it doesn't appear on a page.

{ 
    width: 150, id: "population", header: [{ text: "Population" }] 
},
{ 
    hidden: true, width: 150, id: "yearlyChange", header: [{ text: "Yearly Change" }] }

Related sample:  Grid. Hidden Columns

HTML content of Grid columns

dhtmlxGrid allows adding an image or an icon into Grid cells in two ways:

  • by specifying the HTML content of all Grid columns

This way presupposes making each cell of Grid capable of displaying the HTML content via using the htmlEnable property in the configuration object of Grid.

var dataset = [
    {
        "country": "China",
        "flag": "<img src='../flags/cn.jpg' />",
        "id": "1"
    }
];
 
var grid = new dhx.Grid("grid", {
    columns: [// columns config],
    data: dataset,
    htmlEnable: true });
  • by specifying the HTML content of a separate column

If you want to add custom elements into cells of the specified column, you need to set the htmlEnable:true property in the configuration of a column:

var dataset = [
    {
        "country": "<span>China</span><img src='../flags/cn.jpg' />",
        "id": "1"
    }
];
 
var grid = new dhx.Grid("grid", {
    columns: [
        {
            width: 200, id: "country", header: [{ text: "Country" }],
            htmlEnable: true         }, 
        { 
            width: 150, id: "urban", header: [{ text: "Urban Pop" }] 
        }, 
        // more columns 
    ],
    data: dataset
});

Related sample:  Grid. Html In Data

Keyboard Navigation

dhtmlxGrid provides the keyboard navigation that will help you manipulate your grid faster.

Default shortcut keys

There are four navigation keys that Grid enables by default:

  • PageUp - scroll Grid up to the height of the visible content (without change the selected cell)
  • PageDown - scroll Grid down to the height of the visible content (without change the selected cell)
  • Home - navigate to the beginning of the Grid content (without change the selected cell)
  • End - navigate to the end of the Grid content (without change the selected cell)

If you need to disable this functionality, set the keyNavigation property to false.

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

Related sample:  Grid. Key Navigation

Arrow shortcut keys

In case you want to enable the arrow keys that allow moving the selection between cells, you need to specify the selection property for Grid.

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

Related sample:  Grid. Key Navigation

The list of the arrow shortcut keys:

  • ArrowUp - move selection to the previous vertical cell
  • ArrowDown - move selection to the next vertical cell
  • ArrowLeft - move selection to the previous horizontal cell
  • ArrowRight - move selection to the next horizontal cell
  • Ctrl+ArrowUp - move selection to the first vertical cell
  • Ctrl+ArrowDown - move selection to the last vertical cell
  • Ctrl+ArrowLeft - move selection to the first horizontal cell
  • Ctrl+ArrowRight - move selection to the last horizontal cell
  • Tab - move selection to the next horizontal cell or the first cell of the next row
  • Shit+Tab - move selection to the previous horizontal cell or to the first cell of the previous row

The arrow shortcut keys listed below do not work when the selection property is set to "complex". Use another mode ("cell" or "row") in case you you want to activate this navigation keys:

  • Shift+ArrowUp - move selection to the previous vertical cell with the change of the selected cells
  • Shift+ArrowDown - move selection to the next vertical cell with the change of the selected cells
  • Shift+ArrowLeft - move selection to the previous horizontal cell with the change of the selected cells
  • Shift+ArrowRight - move selection to the next horizontal cell with the change of the selected cells
  • Ctrl+Shift+ArrowUp - move selection to the first vertical cell with the change of the selected cells
  • Ctrl+Shift+ArrowDown - move selection to the last vertical cell with the change of the selected cells
  • Ctrl+Shift+ArrowLeft - move selection to the first horizontal cell with the change of the selected cells
  • Ctrl+Shift+ArrowRight - move selection to the last horizontal cell with the change of the selected cells

Shortcut keys for editing

It is also possible to use shortcut keys for editing a cell in Grid by setting editable:true property in the configuration object of Grid.

var grid = new dhx.Grid("grid", {
    columns: [// columns config],
    data: dataset,
    selection: "complex",     editable: true,     keyNavigation: true // true - by default
});

Related sample:  Grid. Key Navigation

The list of the shortcut keys for editing:

  • Enter - open the editor in the selected cell. If the editor is currently opened - close the editor and save changes
  • Escape - close the editor of the selected cell without saving

Multiple selection of Grid cells

While setting the selection property either to "row" or to "cell" value, you can enable the multiselection property to allow a user to select multiple Grid elements:

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

Related sample:  Grid. Multiselection

Since the multiselection configuration option is set to true, using the "Ctrl + Click" combination allows selecting the desired cells or rows. A range of Grid cells/rows can be selected by clicking the first element to select and then, while holding down the Shift key, clicking the last element to select.

Resizing

Columns of Grid have fixed width with no possibility to change them from UI. You can switch on the corresponding configuration option to make all columns of Grid resizable.

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

Then you will be able to change the width of columns using the mouse. With the cursor grab the right border and drag to the desired width.

If you also set the autoWidth configuration option, you will be able to change the width of columns only inside the container of Grid.

You can disable the resizing of any column by setting the resizable:false property in the config of a column.

var grid = new dhx.Grid("grid_container", {
    columns: [
        { width: 150, id: "test1", header: [{ text: "Test1" }] },
        { width: 150, id: "test2", header: [{ text: "Test2" }], resizable: false }     ],
    data: dataset,
    resizable: true }

Related sample:  Grid. Resizable Columns

To define the resizing limits, set necessary values to the minWidth/maxWidth properties in the config of a column.

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
});

Related sample:  Grid. Rows Height

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("grid_container", {
    columns: [// columns config],
    rowCss: function (row) { return row.custom ? "my_custom_row" : "" },     data: dataset
});

Related sample:  Grid. Custom Row Style

Selection

dhtmlxGrid includes the selection feature that allows highlighting Grid elements depending on the chosen mode. The selection property enables selection in a grid. It can take three values:

  • row - to move selection between Grid rows
  • cell - to move selection between Grid cells
  • complex - to highlight both a selected cell and the row it belongs to
var grid = new dhx.Grid("grid_container", {
    columns: [// columns config],
    selection:"complex",        data: dataset
});

Related sample:  Grid. Selection

Sorting columns

By default, dhtmlxGrid allows sorting content of any Grid column by clicking on its header.

To disable this option, set the sortable property in the Grid configuration to false:

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

Related sample:  Grid. Sortable Columns

Sorting separate columns

You can make separate columns sortable by specifying the sortable:true property in the configuration of a column:

In the example below all columns will be sortable, except for the second one:

var grid = new dhx.Grid("grid_container", {
    columns: [
        { width: 200, id: "country", header: [{ text: "Country" }], sortable: true },         { width: 150, id: "land", header: [{ text: "Land" }] },
        { width: 150, id: "density", header: [{ text: "Density" }], sortable: true }     ],
    data: dataset,
    sortable: false,    });

The following sample demonstrates the same situation:

var grid = new dhx.Grid("grid_container", {
    columns: [
        { width: 200, id: "country", header: [{ text: "Country" }] },
        { width: 150, id: "land", header: [{ text: "Land" }], sortable: false },         { width: 150, id: "density", header: [{ text: "Density" }] }
    ],
    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
  • tooltip - (boolean) enables a tooltip on hovering over the content of a span, true by default
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
});

Related sample:  Grid. Spans Cells

Note, that if both the spans and splitAt properties are set in the Grid config, the following rules will be applied:

  • All necessary columns or rows will be in a span if the spans property is set for the columns located within the frozen area.
  • If the spans property is set for a number of columns or rows placed as in the frozen part as in the movable one, then the columns remained in the movable part only will be in a span.

Tooltip

The default configuration of Grid provides tooltips that are rendered when a user hovers over the content of a column. Starting from v6.5, you can hide the tooltips via setting the tooltip configuration property of Grid to false:

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

Related sample:  Hiding tooltips - DHTMLX Grid

There is also the possibility to enable/disable tooltips for separate columns or spans by using the tooltip option in the configuration object of the columns or spans accordingly:

var grid = new dhx.Grid("grid", {
    columns: [
        { width: 200, id: "country", header: [{ text: "Country" }], tooltip: true },         { width: 150, id: "population", header: [{ text: "Population" }] },
    ],
    spans: [
        { row: "1", column: "country", rowspan: 5, tooltip: true },     ],
    data: dataset,
    tooltip: false });

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
});

Related sample:  Grid. Custom Sizes

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

Back to top