Skip to content

Commit 24d3901

Browse files
mafanya23mafanya23
authoredFeb 24, 2025··
Merge pull request #54 from DHTMLX/grid-column-properties-guide-4802
2 parents d31fc8e + 2e51167 commit 24d3901

39 files changed

+1502
-263
lines changed
 

‎docs/grid/api/api_gridcolumn_properties.md

+36-246
Large diffs are not rendered by default.

‎docs/grid/api/grid_adjust_config.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -48,17 +48,17 @@ The property can be specified to one of the available adjustment modes:
4848
</tbody>
4949
</table>
5050

51-
The **adjust** property has a priority over the [autoWidth](../../../grid/configuration/#autowidth-for-columns) property if it is specified either for a grid or for its column, and over the [width](../../../grid/api/api_gridcolumn_properties/) property of the column.
51+
The `adjust` property has a priority over the [`autoWidth`](../../../grid/configuration/#autowidth-for-columns) property if it is specified either for a grid or for its column, and over the [`width`](../../../grid/api/api_gridcolumn_properties/) property of the column.
5252

53-
The width the columns will be adjusted to also depends on the values of the [minWidth/maxWidth](../../../grid/api/api_gridcolumn_properties/) properties if they are set for a column.
53+
The width the columns will be adjusted to also depends on the values of the [`minWidth/maxWidth`](../../../grid/api/api_gridcolumn_properties/) properties if they are set for a column.
5454

5555
**Note** that:
5656

5757
- to optimize performance, you should specify `htmlEnable: true` in the configuration object of the column which contains HTML content
5858
- you can also specify `htmlEnable:true` in the configuration object of Grid
5959
- `htmlEnable: true` allows calculating the content of simple HTML templates by excluding HTML markup and calculating internal content
60-
- in case of complex HTML data, usage of the **adjust** config may lead to incorrect size calculations
61-
- the enabled **adjust** config (including the "header", "footer", "data" modes) adjusts the width of columns taking into account the [template](grid/api/api_gridcolumn_properties.md) added to cells. You need to set the **content** attribute of the [header/footer](grid/api/api_gridcolumn_properties.md) properties to one of the following modes: "avg" | "sum" | "max" | "min" | "count", otherwise **text** will be calculated
60+
- in case of complex HTML data, usage of the `adjust` config may lead to incorrect size calculations
61+
- the enabled `adjust` config (including the "header", "footer", "data" modes) adjusts the width of columns taking into account the [`template`](grid/api/api_gridcolumn_properties.md) added to cells. You need to set the **content** attribute of the [`header/footer`](grid/api/api_gridcolumn_properties.md) properties to one of the following modes: "avg" | "sum" | "max" | "min" | "count", otherwise **text** will be calculated
6262

6363
@changelog: added in v6.4
6464

‎docs/grid/api/grid_autoheight_config.md

+6-4
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,9 @@ description: You can explore the autoHeight config of Grid in the documentation
66

77
# autoHeight
88

9-
{{pronote This functionality requires PRO version of the DHTMLX Grid (or DHTMLX Suite) package.}}
9+
:::tip Pro version only
10+
This functionality requires PRO version of the DHTMLX Grid (or DHTMLX Suite) package.
11+
:::
1012

1113
@short: Optional. Makes long text split into multiple lines based on the width of the column, controls the automatic height adjustment of the header/footer and cells with data
1214

@@ -29,8 +31,8 @@ const grid = new dhx.Grid("grid_container", {
2931

3032
You can control the autoheight of the header/footer separately with the help of the [](grid/api/grid_headerautoheight_config.md) and [](grid/api/grid_footerautoheight_config.md) configuration options of Grid. For example, you can disable autoheight of the header and the footer, while it is enabled for the whole Grid:
3133

32-
~~~js
33-
const grid = new dhx.Grid("grid", {
34+
~~~jsx
35+
const grid = new dhx.Grid("grid_container", {
3436
columns: [
3537
// columns config
3638
],
@@ -46,7 +48,7 @@ const grid = new dhx.Grid("grid", {
4648
- to optimize performance, you should specify `htmlEnable: true` in the configuration object of the column which contains HTML content
4749
- you can also specify `htmlEnable:true` in the configuration object of Grid
4850
- `htmlEnable: true` allows calculating the content of simple HTML templates by excluding HTML markup and calculating internal content
49-
- in case of complex HTML data, usage of the **autoHeight** config may lead to incorrect size calculations
51+
- in case of complex HTML data, usage of the `autoHeight` config may lead to incorrect size calculations
5052
- note that if you decide to change the font type, its size and offsets, correct calculation of the cell's autoHeight can't be ensured
5153

5254
@changelog: added in v7.1

‎docs/grid/api/grid_autowidth_config.md

+7-3
Original file line numberDiff line numberDiff line change
@@ -25,11 +25,15 @@ const grid = new dhx.Grid("grid_container", {
2525

2626
**Related sample**: [Grid. Columns auto width](https://snippet.dhtmlx.com/4as4y3l4)
2727

28-
{{note The property is ignored if the [adjust](../../../grid/configuration/#autosize-for-columns) property is used.}}
28+
:::note
29+
The property is ignored if the [`adjust`](../../../grid/configuration/#autosize-for-columns) property is used.
30+
:::
2931

30-
The width of the columns is calculated on the base of the sizes of the container of the grid and the values of the [minWidth/maxWidth](../../../grid/api/api_gridcolumn_properties/) properties if they are set for the columns.
32+
The width of the columns is calculated on the base of the sizes of the container of the grid and the values of the [`minWidth/maxWidth`](../../../grid/api/api_gridcolumn_properties/) properties if they are set for the columns.
3133

32-
{{note If the **width** property is specified in the configuration object of a column, the **autoWidth** property won't work for this column.}}
34+
:::note
35+
If the `width` property is specified in the configuration object of a column, the `autoWidth` property won't work for this column.
36+
:::
3337

3438

3539
@changelog: added in v6.4

‎docs/grid/api/grid_css_config.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ description: You can explore the css config of Grid in the documentation of the
4444

4545
Note, that the DHTMLX library provides [a set of own CSS classes](helpers/base_elements.md#list-of-css-classes-for-styling-a-widget) that you can also apply to change the appearance of Grid:
4646

47-
~~~js
47+
~~~jsx
4848
const grid = new dhx.Grid("grid_container", {
4949
css: "dhx_widget--bg_white"
5050
});

‎docs/grid/api/grid_dragitem_config.md

+3-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,9 @@ description: You can explore the dragItem config of Grid in the documentation of
66

77
# dragItem
88

9-
{{pronote This functionality requires PRO version of the DHTMLX Grid (or DHTMLX Suite) package. <br>In case you use GPL version, you will be able to reorder rows only.}}
9+
:::tip pro version only
10+
This functionality requires PRO version of the DHTMLX Grid (or DHTMLX Suite) package. <br>In case you use GPL version, you will be able to reorder rows only.
11+
:::
1012

1113
@short: Optional. Enables the possibility to reorder grid columns or (and) rows by drag and drop
1214

‎docs/grid/api/grid_summary_config.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ console.log(summary); // { totalPopulation: 1000000, totalArea: 50000, density:
8282

8383
@descr:
8484

85-
**Related article:** [Summary of calculated values](grid/configuration.md#custom-statistics-in-the-column-headerfooter-and-spans)
85+
**Related article:** [Custom statistics in the column header/footer and spans](../../configuration/#custom-statistics-in-the-column-headerfooter-and-spans)
8686

8787
**Related API**: [getSummary](grid/api/grid_getsummary_method.md)
8888

‎docs/grid/api/gridcolumn_properties/gridcolumn_adjust_property.md

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
---
2+
sidebar_label: adjust
3+
title: JavaScript Grid column - adjust Config
4+
description: You can explore the adjust config of Grid column in the documentation of the DHTMLX JavaScript UI library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite.
5+
---
6+
7+
# adjust
8+
9+
@short: Optional. Defines whether the width of a column is automatically adjusted to its content
10+
11+
### Usage
12+
13+
~~~jsx
14+
adjust?: "data" | "header" | "footer" | boolean;
15+
~~~
16+
17+
@default: false
18+
19+
@descr:
20+
### Example
21+
22+
~~~jsx
23+
const grid = new dhx.Grid("grid_container", {
24+
columns: [
25+
{ id: "country", header: [{ text: "Country" }], adjust: "header" },
26+
{ id: "population", header: [{ text: "Population" }] }
27+
],
28+
adjust: false,
29+
data: dataset
30+
});
31+
~~~
32+
33+
- The `adjust` property has a priority over the `autoWidth` property if it is specified either for the grid or for the column, and over the `width` property of the column.
34+
- The width the columns will be adjusted to also depends on the values of the `minWidth/maxWidth` properties if they are set for a column.
35+
36+
**Related article**: [Autosize for columns](grid/configuration.md#autosize-for-columns)
37+

‎docs/grid/api/gridcolumn_properties/gridcolumn_align_property.md

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
---
2+
sidebar_label: align
3+
title: JavaScript Grid column - align Config
4+
description: You can explore the align config of Grid column in the documentation of the DHTMLX JavaScript UI library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite.
5+
---
6+
7+
# align
8+
9+
@short: Optional. Aligns data in a column
10+
11+
### Usage
12+
13+
~~~jsx
14+
align?: "left" | "center" | "right";
15+
~~~
16+
17+
@default: "left"
18+
19+
@descr:
20+
### Example
21+
22+
~~~jsx
23+
const grid = new dhx.Grid("grid_container", {
24+
columns: [
25+
{ id: "name", header: [{ text: "Name", align: "center" }], align: "right"}
26+
// more options
27+
],
28+
data: dataset
29+
});
30+
~~~
31+
32+
**Related article**: [Alignment](grid/configuration.md#alignment)
33+
34+
**Related sample**: [Grid. Content align](https://snippet.dhtmlx.com/eyreddku)

‎docs/grid/api/gridcolumn_properties/gridcolumn_autowidth_property.md

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
---
2+
sidebar_label: autoWidth
3+
title: JavaScript Grid column - autoWidth Config
4+
description: You can explore the autoWidth config of Grid column in the documentation of the DHTMLX JavaScript UI library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite.
5+
---
6+
7+
# autoWidth
8+
9+
@short: Optional. Enables/disables the ability of a column to adjust its size to the size of Grid
10+
11+
### Usage
12+
13+
~~~jsx
14+
autoWidth?: boolean;
15+
~~~
16+
17+
@default: false
18+
19+
@descr:
20+
### Example
21+
22+
~~~jsx
23+
const grid = new dhx.Grid("grid_container", {
24+
columns: [
25+
{ width: 200, id: "country", header: [{ text: "Country" }], autoWidth: false },
26+
{ width: 150, id: "population", header: [{ text: "Population" }] },
27+
],
28+
autoWidth: true,
29+
data: dataset
30+
});
31+
~~~
32+
33+
Also note:
34+
35+
- If `autoWidth` is set for a column, the width of the column is calculated on the base of the sizes of the container of the grid and the values of the `minWidth/maxWidth` properties if they are set for the column.
36+
- The property is ignored if the [`adjust`](grid/configuration.md#autosize-for-columns) property is used.
37+
- If the `width` property is specified in the configuration object of a column, the `autoWidth` property won't work for this column.
38+
39+
**Related article**: [Autowidth for columns](grid/configuration.md/#autowidth-for-columns)

‎docs/grid/api/gridcolumn_properties/gridcolumn_closable_property.md

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
---
2+
sidebar_label: closable
3+
title: JavaScript Grid column - closable Config
4+
description: You can explore the closable config of Grid column in the documentation of the DHTMLX JavaScript UI library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite.
5+
---
6+
7+
# closable
8+
9+
@short: Optional. Either allows closing a particular element of the group panel or makes it permanently enabled
10+
11+
:::tip pro version only
12+
The described functionality requires PRO version of the DHTMLX Grid (or DHTMLX Suite) package.
13+
:::
14+
15+
### Usage
16+
17+
~~~jsx
18+
closable?: boolean;
19+
~~~
20+
21+
@default: true
22+
23+
@descr:
24+
### Example
25+
26+
~~~jsx
27+
const grid = new dhx.Grid("grid_container", {
28+
columns: [
29+
{
30+
width: 150,
31+
id: "country",
32+
header: [{ text: "Country" }],
33+
// grouping of the "country" column is permanently enabled
34+
// and can't be switched off via the group panel
35+
closable: false,
36+
},
37+
{
38+
width: 150,
39+
id: "population",
40+
header: [{ text: "Population" }],
41+
groupable: true,
42+
},
43+
{ width: 150, id: "destiny", header: [{ text: "Density (P/Km²)" }] },
44+
{ width: 150, id: "area", header: [{ text: "Land Area (Km²)" }] },
45+
],
46+
group: {
47+
order: ["country", "population"]
48+
},
49+
groupable: true,
50+
data: dataset
51+
});
52+
~~~
53+
54+
**Related article**: [Making group panel elements closable](grid/usage.md#making-group-panel-elements-closable)

‎docs/grid/api/gridcolumn_properties/gridcolumn_dateformat_property.md

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
---
2+
sidebar_label: dateFormat
3+
title: JavaScript Grid column - dateFormat Config
4+
description: You can explore the dateFormat config of Grid column in the documentation of the DHTMLX JavaScript UI library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite.
5+
---
6+
7+
# dateFormat
8+
9+
@short: Optional. Defines the format of dates
10+
11+
:::note
12+
The date format must include delimiters (spaces or symbols), otherwise an error will be thrown
13+
:::
14+
15+
### Usage
16+
17+
~~~jsx
18+
dateFormat?: string;
19+
~~~
20+
21+
@default: "%M %d %Y"
22+
23+
@descr:
24+
### Example
25+
26+
~~~jsx
27+
const grid = new dhx.Grid("grid_container", {
28+
columns: [
29+
{
30+
width: 150, id: "date", header: [{ text: "Date" }],
31+
type: "date", dateFormat: "%M %d %Y"
32+
},
33+
// more columns
34+
],
35+
data: dataset
36+
});
37+
~~~
38+
39+
**Related article**: [Setting the format for dates](grid/configuration.md#setting-the-format-for-dates)
40+
41+
**Related sample**: [Grid. Data formats (percent, currency, date and combination with templates)](https://snippet.dhtmlx.com/ox37nvdm)
42+
43+
44+

‎docs/grid/api/gridcolumn_properties/gridcolumn_draggable_property.md

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
---
2+
sidebar_label: draggable
3+
title: JavaScript Grid column - draggable Config
4+
description: You can explore the draggable config of Grid column in the documentation of the DHTMLX JavaScript UI library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite.
5+
---
6+
7+
# draggable
8+
9+
@short: Optional. Defines whether a column is draggable
10+
11+
### Usage
12+
13+
~~~jsx
14+
draggable?: boolean;
15+
~~~
16+
17+
@default: false
18+
19+
@descr:
20+
### Example
21+
22+
~~~jsx
23+
const grid = new dhx.Grid("grid_container", {
24+
columns: [
25+
{ width: 200, id: "country", header: [{ text: "Country" }]},
26+
{ width: 150, id: "land", header: [{ text: "Land" }] },
27+
{ width: 150, id: "density", header: [{ text: "Density" }], draggable: false }
28+
],
29+
data: dataset,
30+
dragItem: "column",
31+
});
32+
~~~
33+
34+
**Related article**: [Drag-n-drop inside the grid](grid/configuration.md#drag-n-drop-inside-the-grid)
35+

‎docs/grid/api/gridcolumn_properties/gridcolumn_editable_property.md

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
---
2+
sidebar_label: editable
3+
title: JavaScript Grid column - editable Config
4+
description: You can explore the editable config of Grid column in the documentation of the DHTMLX JavaScript UI library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite.
5+
---
6+
7+
# editable
8+
9+
@short: Optional. Defines whether a column is editable
10+
11+
### Usage
12+
13+
~~~jsx
14+
editable?: boolean;
15+
~~~
16+
17+
@default: false
18+
19+
@descr:
20+
### Example
21+
22+
~~~jsx
23+
const grid = new dhx.Grid("grid_container", {
24+
columns: [
25+
{
26+
width: 150, id:"project",
27+
editable: false,
28+
header: [{text: "Project"}, {content: "selectFilter"}]
29+
},
30+
{ width:150, id: "owner", header: [{text: "Owner"},{content: "inputFilter"}]},
31+
{ width:150, id: "hours", header: [{text: "Hours"}, {content: "inputFilter"}]},
32+
// more columns
33+
],
34+
data: data,
35+
editable: true
36+
});
37+
~~~
38+
39+
**Related article**: [Editing Grid and separate columns](grid/configuration.md#editing-grid-and-separate-columns)
40+
41+

0 commit comments

Comments
 (0)