From 24e77c5b17c8f60bc7be42f6ae9c0f1ce2569eac Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Fri, 18 Sep 2026 13:08:24 +0300 Subject: [PATCH 1/6] [fix] correct typo and wrong words in List config Wrong, not merely clumsy: - "the possiblity of dragging" was misspelled. 1 such misspelling remains in the docs, in 1 file - "It presupposes that data is rendered by parts" and "Setting the multiselection property to true presupposes selection of multiple items" both used presupposes for "means". The first also said by parts where it meant in parts, the only such phrase in the docs - "as easy as that" would need to be as easily; the phrase is dropped rather than corrected, since it adds nothing Names and literals: - itemHeight and multiselection were bold in running prose and now use code formatting, as the api formatting rule requires - true, false and ctrlClick moved from italics and quotes to code - the drag mode values target, source and both moved from quotes to code, the dominant form for a value list: 229 against 39 Wording: - "provides the possibility to navigate" became "lets you navigate" - "All data is loaded into List and rendered at once" became "List loads and renders all data at once" - "There is a possibility to increase the speed of your application containing a List" became "You can increase the speed of an application that contains a List", the modifier having attached to the wrong noun - "allows highlighting a List item" became "allows you to highlight", the form the gerunds rule prescribes - "In case you use" and "In case you need" became If - "Set as its value a function" became "Set its value to a function" - "of a custom template of List items" became "of a custom List item template" - two sentences lost a repeated word: selection twice in one clause, and "enable the possibility to select" - added a colon before a code block, removed three trailing spaces - the two brace notes became the triple-colon form. This is NOT a rendering fix, the macro expands correctly; it follows the dominant syntax, now 467 triple-colon against 133 brace blocks Measured and left alone: make use of (60 hits in 38 files), the italic type names, since function is italic 42 times and never in code format, and the italic CSS calc() function phrase, 7 uses against 0 for a code-formatted calc(). The hyphen separating a value from its description is also the house form and stays. No heading was touched: 32 links point here and nearly every heading carries an anchor. Left for the author: this page and list_itemheight_config.md both give a default item height of 37 with no unit. Verified with a docusaurus build, and the rendered page was checked to confirm both notes became admonitions and every literal became code. --- docs/list/configuration.md | 54 ++++++++++++++++++++------------------ 1 file changed, 29 insertions(+), 25 deletions(-) diff --git a/docs/list/configuration.md b/docs/list/configuration.md index d9c5a08c5..cc5159a1e 100644 --- a/docs/list/configuration.md +++ b/docs/list/configuration.md @@ -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 @@ -45,11 +45,11 @@ 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", { @@ -57,7 +57,7 @@ const list = new dhx.List("list_container", { }); ~~~ -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", { @@ -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 @@ -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}); @@ -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 @@ -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 @@ -121,9 +121,11 @@ 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 @@ -131,19 +133,21 @@ When the [virtual](list/api/list_virtual_config.md) property is set to *true*, t **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 @@ -151,16 +155,16 @@ const list = new dhx.List("list_container", {height: "700px"}); **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" @@ -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}); @@ -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 @@ -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) { @@ -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", { From bfca8c8dec19b2a8e7c800ecbde135e16815fb75 Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Sat, 19 Sep 2026 08:33:04 +0300 Subject: [PATCH 2/6] [fix] correct wrong term in List customization - "You can style particular cells in the list" said cells, a thing List does not have. The word appears 0 times in all of docs/list, and the heading directly above the sentence reads Styling items, while the next paragraph says each even item. Now items - "add a new CSS class(es)" did not agree in number; it now reads "a new CSS class (or classes)", matching the parenthetical of the next bullet - "make changes in the look and feel of a list. For this you need to take the following steps" became "You can change the look and feel of a list. To do this, take the following steps": changes in takes to, the opener was padding, and the introductory phrase needed its comma - "customize selection of an item" was missing an article The Styling section is a template shared by twenty component pages, so only its outright errors were touched. Left as they are, being clumsy rather than wrong: "your file with styles" (20 uses), "include your file on the page", and "the name of the created CSS class". The escaped style element also stays: 20 pages write it that way against 1 that puts it in code format. After this commit the template still carries 19 copies of the class(es) mismatch in 19 files, 19 of "make changes in the look and feel", and 33 of "There is a possibility to" across 30 files. That last construction sits above the threshold at which house forms are normally left alone; it is corrected here because the same construction was corrected in the previous commit, and being consistent inside one branch matters more than the threshold. Same defect elsewhere, not touched: dataview/customization.md says "style particular cells in the dataview", and cell appears 0 times in docs/dataview against 192 for item. CSS classes on this page were checked and are sound: every class the samples define is used and every class used is defined, with no look-alike characters. That is the defect found earlier in the Grid and Layout customization pages; it is not present here. Verified with a docusaurus build, and the rendered page carries no occurrence of the word cell. --- docs/list/customization.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/list/customization.md b/docs/list/customization.md index fe80389dc..cba84a8ad 100644 --- a/docs/list/customization.md +++ b/docs/list/customization.md @@ -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