Skip to content

Commit

Permalink
[update] grid/treegrid editorConfig props lists
Browse files Browse the repository at this point in the history
  • Loading branch information
@mafanya23
mafanya23 committed Aug 31, 2023
1 parent 733bfe1 commit 48aaaf9
Show file tree
Hide file tree
Showing 4 changed files with 94 additions and 12 deletions.
25 changes: 20 additions & 5 deletions docs/grid/api/api_gridcolumn_properties.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ columns:[
format?: string,
options?: (string | { id: string | number, value: string })[] |
(col: object, row?: object) => (string | { id: string | number, value: string })[],
editorConfig?: { newOptions?: boolean } | ICalendarConfig,
editorConfig?: obj,
adjust?: "data" | "header" | "footer" | boolean,
align?: "left" | "center" | "right",
htmlEnable?: boolean,
Expand Down Expand Up @@ -126,7 +126,7 @@ columns:[
<ol>- <b>placeholder</b> - (optional) sets a placeholder in the input of ComboBox</ol>
<ol>- <b>virtual</b> - (optional) enables dynamic loading of data on scrolling the list of options</ol>
<ol>- <b>template</b> - (optional) a function which returns a template with content for the filter options. Takes an option item as a parameter:
<ul>- <b>item</b> - (object) option item</ul></ol>
<ul>- <b>item</b> - (object) an option item</ul></ol>
</li>
<li><a href="../../configuration#customizing-headerfooter-filters"><b>customFilter</b></a> - (optional) a custom function for extended filtering. It takes two parameters:
<ol> - <b>item</b> - (required) a data item the value of which should be compared</ol>
Expand Down Expand Up @@ -196,11 +196,26 @@ columns:[
</td>
</tr>
<tr>
<td><b>editorConfig</b></td>
<td>(optional) an object with configuration settings of the column's editor. <br>If <b>editorType: "combobox"</b> is specified, the <b>editorConfig</b> object can include the following property:
<td id="editorconfig"><b>editorConfig</b></td>
<td>(optional) an object with configuration settings of the column's editor.
<br><br>If <b>editorType: "combobox/multiselect"</b> is specified, the <b>editorConfig</b> object can include the following properties:
<ul>
<li><b>css</b> - (optional) styling to be applied to an option</li>
<li><b>itemHeight</b> - (optional) the height of an option</li>
<li><b>listHeight</b> - (optional) the height of the list of options</li>
<li><a href="../../configuration/#editable-combobox"><b>newOptions</b></a> - (optional) allows end users to add new values into the list of combobox options from UI. The new options will also appear in the drop-down list of the header/footer filters (<i>content: "selectFilter" | "comboFilter"</i>).</li>
</ul>If <b>type: "date"</b> is specified, the <b>editorConfig</b> object can include <a href="https://docs.dhtmlx.com/suite/category/calendar-properties/">a set of properties of Calendar</a> (except for the <b>value</b>, <b>range</b>, and <b>dateFormat</b> ones)
<li><b>placeholder</b> - (optional) sets a placeholder in the editor's input</li>
<li><b>readonly</b> - (optional) makes the editor readonly (it is only possible to select options from the list, without entering words in the input)</li>
<li><b>template</b> - (optional) a callback function which returns a string. It is called with an object argument which contains two properties:
<ul>- <b>id</b> - the id of the selected option</ul>
<ul>- <b>value</b> - the value of the selected option</ul>
</li>
</ul>
<br>In case of <b>editorType: "multiselect"</b>, the <b>editorConfig</b> object can include one more property:
<ul>
<li><b>selectAllButton</b> - (optional) adds a button that allows selecting all the options in the editor</li>
</ul><br>
If <b>type: "date"</b> is specified, the <b>editorConfig</b> object can include <a href="https://docs.dhtmlx.com/suite/category/calendar-properties/">a set of properties of Calendar</a> (except for the <b>value</b>, <b>range</b>, and <b>dateFormat</b> ones)
<br><br><b>Related Sample: </b><a href="https://snippet.dhtmlx.com/1mxmshax" target="_blank">Grid. Rich example with templates and different editors</a>
</td>
</tr>
Expand Down
26 changes: 26 additions & 0 deletions docs/grid/configuration.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -732,6 +732,20 @@ const data = [
];
~~~

#### Configuring the multiselect editor

There is a list of [configuration settings](grid/api/api_gridcolumn_properties.md#editorconfig) you may provide for the **multiselect** editor type. Use the **editorConfig** property to specify the desired settings:

~~~js
{
id: "renewals", type: "string",
header: [{ text: "Number of renewals" }],
editorType: "multiselect",
options: ["1 time", "1-2 times", "more than 5 times"],
editorConfig: {selectAllButton:true}
}
~~~

- #### 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.
Expand Down Expand Up @@ -774,6 +788,18 @@ Or define unique lists of options for different column cells. For that, use a fu

**Related sample**: [Grid. Individual option lists for select, multiselect and combobox editors](https://snippet.dhtmlx.com/i22fg83z)

#### Configuring the combobox editor

There is a list of [configuration settings](grid/api/api_gridcolumn_properties.md#editorconfig) you may provide for the **combobox** editor type. Use the **editorConfig** property to specify the desired settings:

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

### Editable combobox

From v7.3, you may allow end users to add new options into the combobox editor ([editorType: "combobox"](#types-of-column-editor)) from UI. To activate the functionality, specify the **newOptions: true** attribute of the **editorConfig** property in the configuration of the [column](grid/api/api_gridcolumn_properties.md):
Expand Down
25 changes: 20 additions & 5 deletions docs/treegrid/api/api_treegridcolumn_properties.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ columns:[
format?: string,
options?: (string | { id: string | number, value: string })[] |
(col: object, row?: object) => (string | { id: string | number, value: string })[],
editorConfig?: { newOptions?: boolean } | ICalendarConfig,
editorConfig?: obj,
adjust?: "data" | "header" | "footer" | boolean,
align?: "left" | "center" | "right",
htmlEnable?: boolean,
Expand Down Expand Up @@ -196,11 +196,26 @@ columns:[
</td>
</tr>
<tr>
<td><b>editorConfig</b></td>
<td>(optional) an object with configuration settings of the column's editor. <br>If <b>editorType: "combobox"</b> is specified, the <b>editorConfig</b> object can include the following property:
<td id="editorconfig"><b>editorConfig</b></td>
<td>(optional) an object with configuration settings of the column's editor.
<br><br>If <b>editorType: "combobox/multiselect"</b> is specified, the <b>editorConfig</b> object can include the following properties:
<ul>
<li><a href="../../configuration/#editable-combobox"><b>newOptions</b></a> - (optional) allows end users to add new values into the list of combobox options from UI. The new options will also appear in the drop-down list of the header/footer filters (<i>content: "selectFilter" | "comboFilter"</i>).</li>
</ul>If <b>type: "date"</b> is specified, the <b>editorConfig</b> object can include <a href="https://docs.dhtmlx.com/suite/category/calendar-properties/">a set of properties of Calendar</a> (except for the <b>value</b>, <b>range</b>, and <b>dateFormat</b> ones)
<li><b>css</b> - (optional) styling to be applied to an option</li>
<li><b>itemHeight</b> - (optional) the height of an option</li>
<li><b>listHeight</b> - (optional) the height of the list of options</li>
<li><a href="../../configuration/#editable-combobox"><b>newOptions</b></a> - (optional) allows end users to add new values into the list of combobox options from UI. The new options will also appear in the drop-down list of the header/footer filters (<i>content: "selectFilter" | "comboFilter"</i>).</li>
<li><b>placeholder</b> - (optional) sets a placeholder in the editor's input</li>
<li><b>readonly</b> - (optional) makes the editor readonly (it is only possible to select options from the list, without entering words in the input)</li>
<li><b>template</b> - (optional) a callback function which returns a string. It is called with an object argument which contains two properties:
<ul>- <b>id</b> - the id of the selected option</ul>
<ul>- <b>value</b> - the value of the selected option</ul>
</li>
</ul>
<br>In case of <b>editorType: "multiselect"</b>, the <b>editorConfig</b> object can include one more property:
<ul>
<li><b>selectAllButton</b> - (optional) adds a button that allows selecting all the options in the editor</li>
</ul><br>
If <b>type: "date"</b> is specified, the <b>editorConfig</b> object can include <a href="https://docs.dhtmlx.com/suite/category/calendar-properties/">a set of properties of Calendar</a> (except for the <b>value</b>, <b>range</b>, and <b>dateFormat</b> ones)
<br><br><b>Related Sample: </b><a href="https://snippet.dhtmlx.com/0gd4dn8p" target="_blank">TreeGrid. Rich example with templates and different editors</a>
</td>
</tr>
Expand Down
30 changes: 28 additions & 2 deletions docs/treegrid/configuration.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -725,7 +725,7 @@ Or define unique lists of options for different column cells. For that, use a fu

If you use the **multiselect** editor, you can predefine several options to be shown in a cell. You should separate the options in the dataset using the `,` separator.

```js
~~~js
const data = [
{
renewals: "1 time" // one option is shown in a cell
Expand All @@ -736,7 +736,21 @@ const data = [
...
}
];
```
~~~

#### Configuring the multiselect editor

There is a list of [configuration settings](treegrid/api/api_treegridcolumn_properties.md#editorconfig) you may provide for the **multiselect** editor type. Use the **editorConfig** property to specify the desired settings:

~~~js
{
id: "renewals", type: "string",
header: [{ text: "Number of renewals" }],
editorType: "multiselect",
options: ["1 time", "1-2 times", "more than 5 times"],
editorConfig: {selectAllButton:true}
}
~~~

- #### combobox

Expand Down Expand Up @@ -780,6 +794,18 @@ Or define unique lists of options for different column cells. For that, use a fu

**Related sample**: [TreeGrid. Individual option lists for select, multiselect and combobox editors](https://snippet.dhtmlx.com/1t8vvm07)

#### Configuring the combobox editor

There is a list of [configuration settings](treegrid/api/api_treegridcolumn_properties.md#editorconfig) you may provide for the **combobox** editor type. Use the **editorConfig** property to specify the desired settings:

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

### Editable combobox

From v7.3, you may allow end users to add new options into the combobox editor ([editorType: "combobox"](#types-of-column-editor)) from UI. To activate the functionality, specify the **newOptions: true** attribute of the **editorConfig** property in the configuration of the [column](treegrid/api/api_treegridcolumn_properties.md):
Expand Down

0 comments on commit 48aaaf9

Please sign in to comment.