Skip to content

[fix] correct typo and wrong words in List guides #156

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
serhiipylypchuk1991 wants to merge 6 commits into
base: next
Choose a base branch
from
Open

[fix] correct typo and wrong words in List guides #156

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
24e77c5
[fix] correct typo and wrong words in List config
serhiipylypchuk1991 Sep 18, 2026
bfca8c8
[fix] correct wrong term in List customization
serhiipylypchuk1991 Sep 19, 2026
667ce14
[fix] correct idioms and articles in List features
serhiipylypchuk1991 Sep 21, 2026
d672741
[update] grammar and style in List overview
serhiipylypchuk1991 Sep 21, 2026
69f9ef5
[fix] correct grammar errors in List selection
serhiipylypchuk1991 Sep 21, 2026
cb7f25e
[fix] correct tense and articles in Work with List
serhiipylypchuk1991 Sep 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 29 additions & 25 deletions docs/list/configuration.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,13 @@ description: You can explore the configuration of List in the documentation of t

## Arrow keys navigation

The List component provides the possibility to navigate its items with arrow keys. You can enable this functionality using the [](list/api/list_keynavigation_config.md) property:
The List component lets you navigate its items with arrow keys. You can enable this functionality using the [](list/api/list_keynavigation_config.md) property:

~~~js
const list = new dhx.List("list_container", {keyNavigation:true});
~~~

As a value of this option you can use either *true/false* to switch it on/off, or specify a *function* that will define some custom navigation logic.
As a value of this option you can use either `true`/`false` to switch it on/off, or specify a *function* that defines custom navigation logic.

### Default shortcut keys

Expand Down Expand Up @@ -45,19 +45,19 @@ As a value of this option you can use either *true/false* to switch it on/off, o

## Drag-n-drop of items

DHTMLX List supports drag-n-drop of items between lists in several modes. To begin with, you should specify the [](list/api/list_dragmode_config.md) property in the configuration object of List. Then define which mode you need:
DHTMLX List supports drag-n-drop of items between lists in several modes. To begin with, specify the [](list/api/list_dragmode_config.md) property in the configuration object of List. Then define which mode you need:

- "target" - a list takes items from other lists, while its items can't be dragged out of it
- "source" - a list allows dragging its items out and can't take items from other lists
- "both" - a list both takes items from other lists and allows dragging its items out as well
- `target` - a list takes items from other lists, while its items can't be dragged out of it
- `source` - a list allows dragging its items out and can't take items from other lists
- `both` - a list both takes items from other lists and allows dragging its items out

~~~js
const list = new dhx.List("list_container", {
dragMode:"source"
});
~~~

In order to provide the possiblity of dragging several items between lists, you should enable the [](list/api/list_multiselection_config.md) in addition to the [](list/api/list_dragmode_config.md):
To drag several items between lists, enable the [](list/api/list_multiselection_config.md) in addition to the [](list/api/list_dragmode_config.md):

~~~js
const list = new dhx.List("list_container", {
Expand All @@ -72,9 +72,9 @@ Read more about multiselection in List [below](#multiple-selection-of-items).

## Dynamic rendering of items

All data is loaded into List and rendered at once. In case you use large amounts of data in the list, it may slow down the work of your app.
List loads and renders all data at once. If you use large amounts of data in the list, it may slow down your app.

There is a possibility to increase the speed of your application containing a List by enabling dynamic data rendering. It presupposes that data is rendered by parts and on demand.
You can increase the speed of an application that contains a List by enabling dynamic data rendering. This means that List renders data in parts and on demand.
To make use of dynamic data rendering, switch the [](list/api/list_virtual_config.md) property on.

~~~js
Expand All @@ -91,7 +91,7 @@ const list = new dhx.List("list_container", {

**Related sample**: [List. Inline editing](https://snippet.dhtmlx.com/f26lfcai)

You can enable the possibility to edit List items with the help of the [](list/api/list_editable_config.md) configuration option:
You can make List items editable with the help of the [](list/api/list_editable_config.md) configuration option:

~~~js
const list = new dhx.List("list_container", {editable:true});
Expand All @@ -103,7 +103,7 @@ const list = new dhx.List("list_container", {editable:true});

**Related sample**: [List. Setup list item height](https://snippet.dhtmlx.com/89buovn2)

You can specify the necessary height of an item and set it before initialization of List via the [itemHeight](list/api/list_itemheight_config.md) property either as a number:
You can specify the necessary height of an item and set it before List initialization via the [itemHeight](list/api/list_itemheight_config.md) property either as a number:

~~~js {3}
// sets the height of an item as a number
Expand All @@ -112,7 +112,7 @@ const list = new dhx.List("list_container", {
});
~~~

or as a string value
or as a string value:

~~~js {3}
// sets the height of an item as a string value
Expand All @@ -121,46 +121,50 @@ const list = new dhx.List("list_container", {
});
~~~

{{note The usage of the *CSS calc() function* within the [](list/api/list_itemheight_config.md) property is not possible.}}
:::note
The usage of the *CSS calc() function* within the [](list/api/list_itemheight_config.md) property is not possible.
:::

When the [virtual](list/api/list_virtual_config.md) property is set to *true*, the default height of a list item is 37. To change this value, make use of the **itemHeight** property, as described above.
When the [virtual](list/api/list_virtual_config.md) property is set to `true`, the default height of a list item is 37. To change this value, make use of the `itemHeight` property, as described above.

## Height of the List

![Scrollable List with a fixed height showing book titles and categories in DHTMLX Suite](/img/list/list_height.png)

**Related sample**: [List. Setup list height](https://snippet.dhtmlx.com/k2mj2sz7)

You can define the desired height of a list via the [height](list/api/list_height_config.md) configuration option as easy as that:
You can define the desired height of a list via the [height](list/api/list_height_config.md) configuration option:

~~~js
const list = new dhx.List("list_container", {height: 700});
~~~

You can also use a string value for setting the height of List:
You can also use a string value to set the height of List:

~~~js
const list = new dhx.List("list_container", {height: "700px"});
~~~

{{note The usage of the *CSS calc() function* within the [](list/api/list_height_config.md) property is not possible.}}
:::note
The usage of the *CSS calc() function* within the [](list/api/list_height_config.md) property is not possible.
:::

## Multiple selection of items

![List with multiple selected book items highlighted at once in DHTMLX Suite](/img/list/multiselection.png)

**Related sample**: [List. Multiselection](https://snippet.dhtmlx.com/0sorkczm)

By default, you can select only one item in a list, since selection of another item resets selection of the previous one. To enable the possibility to select several List items, make use of the
By default, you can select only one item in a list, since selecting another item resets the previous selection. To select several List items, make use of the
[](list/api/list_multiselection_config.md) configuration option:

~~~js
const list = new dhx.List("list_container", {multiselection:true});
~~~

Setting the **multiselection** property to *true* presupposes selection of multiple items by using Ctrl key.
It is also possible to use the "Ctrl+click" combination to select several items. For this, you need to set the
[](list/api/list_multiselection_config.md) configuration option to *"ctrlClick"*:
Setting the `multiselection` property to `true` lets you select multiple items with the Ctrl key.
It is also possible to use the "Ctrl+click" combination to select several items. For this, you need to set the
[](list/api/list_multiselection_config.md) configuration option to `ctrlClick`:
~~~js
const list = new dhx.List("list_container", {
multiselection:"ctrlClick"
Expand All @@ -173,7 +177,7 @@ const list = new dhx.List("list_container", {

**Related sample**: [List. Disable selection](https://snippet.dhtmlx.com/dk4czs1z)

The default configuration of List provides you with the selection feature that allows highlighting a List item. To disable selection in a List you need to set the [](list/api/list_selection_config.md) configuration property to *false*:
The default configuration of List provides you with the selection feature that allows you to highlight a List item. To disable selection in a List, set the [](list/api/list_selection_config.md) configuration property to `false`:

~~~js
const list = new dhx.List("list_container", {selection: false});
Expand All @@ -185,7 +189,7 @@ const list = new dhx.List("list_container", {selection: false});

**Related sample**: [List. HTML template for item](https://snippet.dhtmlx.com/gtzdwpj4)

You can define a template for rendering items in a List with the help of the [](list/api/list_template_config.md) configuration property. Set as its value a function that takes one parameter:
You can define a template for rendering items in a List with the help of the [](list/api/list_template_config.md) configuration property. Set its value to a function that takes one parameter:

- **item** - (*object*) an object of a data item

Expand Down Expand Up @@ -214,7 +218,7 @@ const list = new dhx.List("list_container", {

## Event handlers for the template

Starting from v7.0, it is possible to assign event handlers to HTML elements of a custom template of List items by using the [](list/api/list_eventhandlers_config.md) configuration option:
Starting from v7.0, it is possible to assign event handlers to HTML elements of a custom List item template by using the [](list/api/list_eventhandlers_config.md) configuration option:

~~~js {1-13,18-29}
function template(item) {
Expand Down Expand Up @@ -255,7 +259,7 @@ const list = new dhx.List("list_container", {

By default, List displays HTML content if it is specified for its options.

In case you need to disable rendering of HTML content and show it as plain text to keep your application safe, set the [htmlEnable](list/api/list_htmlenable_config.md) property to *false*.
If you need to disable rendering of HTML content and show it as plain text to keep your application safe, set the [htmlEnable](list/api/list_htmlenable_config.md) property to `false`.

~~~js
const list = new dhx.List("list_container", {
Expand Down
8 changes: 4 additions & 4 deletions docs/list/customization.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,9 @@ description: You can explore the customization of List in the documentation of t

**Related sample**: [List. Styling (custom CSS)](https://snippet.dhtmlx.com/s461f09w)

There is a possibility to make changes in the look and feel of a list. For this you need to take the following steps:
You can change the look and feel of a list. To do this, take the following steps:

- add a new CSS class(es) with desired settings in the <style> section of your HTML page or in your file with styles (don't forget to include your file on the page in this case):
- add a new CSS class (or classes) with the desired settings in the <style> section of your HTML page or in your file with styles (don't forget to include your file on the page in this case):

~~~html
<style>
Expand Down Expand Up @@ -59,7 +59,7 @@ For example:

## Styling items

You can style particular cells in the list.
You can style particular items in the list.

![List with custom CSS applied to alternating numbered book items in DHTMLX Suite](/img/list/custom_css.png)

Expand Down Expand Up @@ -88,7 +88,7 @@ For example, apply some color to each even item, as in:

## Adding custom selection

It is also possible to customize selection of an item.
It is also possible to customize the selection of an item.

![List with a custom highlighted selected book item in DHTMLX Suite](/img/list/custom_selection.png)

Expand Down
18 changes: 9 additions & 9 deletions docs/list/features.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ description: You can explore the features of List in the documentation of the DH

# Features

This page contains structured information that will help you to start working with DHTMLX List and go into deep dive on its functionality.
This page contains structured information that will help you to start working with DHTMLX List and dive deep into its functionality.

## How to start with DHTMLX List

Expand All @@ -24,10 +24,10 @@ In this section you can find out how to initialize List, how to load data into t
| Topic | Description |
| ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
| [Loading data into List](list/load_data.md) | Read how to load the initial data into List |
| [Initialization with config.data](https://snippet.dhtmlx.com/kzg2fza0) | The example shows how to load data into List on the initialization stage |
| [Initialization with data.load()](https://snippet.dhtmlx.com/1it5kfhq) | The example shows how to load data from external file |
| [Initialization with config.data](https://snippet.dhtmlx.com/kzg2fza0) | The example shows how to load data into List at the initialization stage |
| [Initialization with data.load()](https://snippet.dhtmlx.com/1it5kfhq) | The example shows how to load data from an external file |
| [Initialization with data.parse()](https://snippet.dhtmlx.com/anj2keoc) | The example shows how to load data from a local data source |
| [Initialization with external DataCollection](https://snippet.dhtmlx.com/20i6vbtj) | The example shows how to load data from external DataCollection |
| [Initialization with external DataCollection](https://snippet.dhtmlx.com/20i6vbtj) | The example shows how to load data from an external DataCollection |
| [Rendering a large data set](list/configuration.md#dynamic-rendering-of-items) | Learn how to enable dynamic loading of data on scrolling the list ([Example](https://snippet.dhtmlx.com/x4gxy38e)) |
| [Lazy loading](https://snippet.dhtmlx.com/list_lazy_loading) | The example shows how to render data dynamically |

Expand All @@ -36,7 +36,7 @@ In this section you can find out how to initialize List, how to load data into t
| Topic | Description |
| ------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
| [Backend integration](integration/suite_and_backend.md) | Learn how to connect DHTMLX Suite to a backend ([Demo](https://github.com/DHTMLX/nodejs-suite-demo)) |
| [Optimus](/optimus_guides/) | Learn how to use DHTMLX Optimus framework for creating DHTMLX-based app <br>(recommended framework for creating apps with Suite components) |
| [Optimus](/optimus_guides/) | Learn how to use the DHTMLX Optimus framework for creating a DHTMLX-based app <br>(recommended framework for creating apps with Suite components) |
| [React integration](integration/suite_and_react.md) | Learn how to use DHTMLX List with React ([Demo](https://github.com/DHTMLX/react-suite-demo)) |
| [Angular integration](integration/suite_and_angular.md) | Learn how to use DHTMLX List with Angular ([Demo](https://github.com/DHTMLX/angular-suite-demo)) |
| [Vue integration](integration/suite_and_vue.md) | Learn how to use DHTMLX List with Vue.js ([Demo](https://github.com/DHTMLX/vue-suite-demo)) |
Expand Down Expand Up @@ -71,7 +71,7 @@ In this section you can learn how to configure the height and style of List and

## How to work with data in List

This section will tell you how to use [DataCollection API](guides/datacollection_guide.md) for working with data of List, i.e. edit, add, remove, sort data, etc.
This section will tell you how to use [DataCollection API](guides/datacollection_guide.md) to work with List data, such as editing, adding, removing and sorting it.

### How to edit, add, remove data

Expand Down Expand Up @@ -106,7 +106,7 @@ In this section you may study how to work with selection functionality.
| [Enabling/disabling selection](list/usage_selection.md#enablingdisabling-selection-object) | Learn how to enable/disable the ability to select items via the selection object |
| [Setting selection](list/usage_selection.md#selecting-an-item) | Learn how to select a particular item or all items ([Example](https://snippet.dhtmlx.com/io8oxxg2)) |
| Getting selection | Learn how to get the [id](list/usage_selection.md#getting-id-of-a-selected-item) or [an object](list/usage_selection.md#getting-object-of-a-selected-item) of a selected item ([Example](https://snippet.dhtmlx.com/elonnovx)) |
| [Removing selection](list/usage_selection.md#unselecting-an-item) | Learn how to remove selection from a selected item(s) |
| [Removing selection](list/usage_selection.md#unselecting-an-item) | Learn how to remove selection from a selected item (or items) |


## How to work with item in focus
Expand All @@ -129,7 +129,7 @@ This section explains how to work with List events.

## API reference

In this section you can find out corresponding references of List API.
In this section you can find the corresponding List API references.

| Topic | Description |
| -------------------------------------------------- | ------------------------------------------------------ |
Expand All @@ -148,7 +148,7 @@ In this section you will learn about common functionality of the library which c
| [Touch support](common_features/touch_support.md) | Learn how to work with touch support |
| [TypeScript support](common_features/using_typescript.md) | Learn how to work with TypeScript |
| [Custom scroll](common_features/custom_scroll.md) | Learn how to use custom scroll in List |
| [AwaitRedraw](helpers/await_redraw.md) | Learn how to perform the code after the component’s rendering |
| [AwaitRedraw](helpers/await_redraw.md) | Learn how to run the code after the component’s rendering |

## Any questions left?

Expand Down
Loading