From b45a96f2a1131e64bd0578e5becf347f419b804f Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Thu, 17 Sep 2026 12:30:02 +0300 Subject: [PATCH 1/9] [update] grammar and style in Layout cell configuration First file outside docs/grid/ in this pass. Typos and agreement: - "attribute into the the object of a cell(s)" - doubled "the" - "if there is no any component or HTML content attached" - "no any" - "there is no space and borders between cells" - singular verb with a plural subject, and a missing comma before the following clause Wrong verb: - "the second one checks whether a cell is collapsed during the initialization of a layout". The `collapsed` property sets the initial state, it does not test it. Now "the second defines whether a cell is collapsed when a layout is initialized", which also drops the weak "There are two attributes of..." opener Rendering: - the two {{note ...}} macros on lines 140 and 231 printed literally, braces and all; converted to :::note. Line 140 also lost a redundant "Note, that" inside the note itself and a stray trailing space. 127 occurrences across 94 files remain elsewhere Grammar and style: - "make use of" -> "use"; "with the help of corresponding attributes" was also missing its article - "You can easily control and change the size of a cell via the" - a filler adverb, a redundant pair, and via - "As you can see from the code example above" -> "In the example above"; the rules list that opener explicitly - "width/ height" carried stray spaces after the slashes, and "would automatically adjust" was hypothetical where the present tense belongs - future tense on lines 87 and 213, and "Note," -> "Note that" Reported, not fixed - a genuinely broken anchor: - layout_cell_headerimage_config.md:22 and layout_cell_headericon_config.md:24 link to cell_configuration.md#cellheader, but the heading "Cell header" slugifies to #cell-header, which is what layout/features.md:49 uses. This file is the only cell_configuration.md in the tree, so it is not a name collision. Both links sit in other files, inside [comment]: lines the review excludes, and a fix may not change a link target Left alone, each measured rather than assumed: - "maximal and minimal sizes" on line 124 stays. Site-wide those forms lead 49/46 against 14/14 for maximum/minimum, and the line uses both consistently. The same change was made in grid/features.md only because the adjacent row already said "minimum" - "By default" on lines 216 and 238 stays: 40 sentence openers and 793 mid-sentence uses across the tree No heading was touched, so all 11 inbound anchors stay valid. Frontmatter untouched. No link target changed. None of the 18 changed lines falls inside a code fence. Trailing whitespace is net zero. --- docs/layout/cell_configuration.md | 33 +++++++++++++++++-------------- 1 file changed, 18 insertions(+), 15 deletions(-) diff --git a/docs/layout/cell_configuration.md b/docs/layout/cell_configuration.md index bf890d15a..952d7a467 100644 --- a/docs/layout/cell_configuration.md +++ b/docs/layout/cell_configuration.md @@ -8,7 +8,7 @@ description: You can explore the configuration of a Cell of Layout in the docume ## HTML content -A layout cell can have any HTML content inside it. You can set it with the [](layout/api/cell/layout_cell_html_config.md) attribute in the object of a cell. +A layout cell can contain any HTML content. You can set it with the [](layout/api/cell/layout_cell_html_config.md) attribute in the object of a cell. ~~~js const layout = new dhx.Layout("layout_container", { @@ -22,7 +22,7 @@ const layout = new dhx.Layout("layout_container", { ## Hidden cell -It is possible to add the [](layout/api/cell/layout_cell_hidden_config.md) attribute into the the object of a cell(s) to render a layout with some cells hidden: +You can add the [](layout/api/cell/layout_cell_hidden_config.md) attribute to the object of a cell to render a layout with hidden cells: ~~~js const layout = new dhx.Layout("layout_container", { @@ -44,7 +44,7 @@ const layout = new dhx.Layout("layout_container", { }); ~~~ -You can also add an icon or an image into the header of a cell with the help of corresponding attributes - [](layout/api/cell/layout_cell_headericon_config.md) and [](layout/api/cell/layout_cell_headerimage_config.md). +You can also add an icon or an image into the header of a cell with the corresponding attributes - [](layout/api/cell/layout_cell_headericon_config.md) and [](layout/api/cell/layout_cell_headerimage_config.md). ~~~js const layout = new dhx.Layout("layout_container", { @@ -84,11 +84,11 @@ const layout = new dhx.Layout("layout_container", { **Related sample**: [Layout. Header](https://snippet.dhtmlx.com/bxqnzesl) -If the [](layout/api/cell/layout_cell_header_config.md) property is not set in the config of a cell, the [](layout/api/cell/layout_cell_headerheight_config.md) option will add a header without text for a cell. +If the [](layout/api/cell/layout_cell_header_config.md) property is not set in the config of a cell, the [](layout/api/cell/layout_cell_headerheight_config.md) option adds a header without text to a cell. ## Cell size -You can easily control and change the size of a cell via the [](layout/api/cell/layout_cell_width_config.md) and [](layout/api/cell/layout_cell_height_config.md) attributes of the object of a cell. +You can change the size of a cell with the [](layout/api/cell/layout_cell_width_config.md) and [](layout/api/cell/layout_cell_height_config.md) attributes of the object of a cell. ~~~js const layout = new dhx.Layout("layout_container", { @@ -137,7 +137,9 @@ const layout = new dhx.Layout("layout_container", { }); ~~~ -{{note Note, that [minWidth](layout/api/cell/layout_cell_minwidth_config.md)/[maxWidth](layout/api/cell/layout_cell_maxwidth_config.md) properties prevent [the width of a cell](layout/api/cell/layout_cell_width_config.md) from being less/greater than minWidth/maxWidth values accordingly. The [minHeight](layout/api/cell/layout_cell_minheight_config.md)/[maxHeight](layout/api/cell/layout_cell_maxheight_config.md) options work in the same way. }} +:::note +The [minWidth](layout/api/cell/layout_cell_minwidth_config.md)/[maxWidth](layout/api/cell/layout_cell_maxwidth_config.md) properties prevent [the width of a cell](layout/api/cell/layout_cell_width_config.md) from becoming less or greater than the minWidth/maxWidth values. The [minHeight](layout/api/cell/layout_cell_minheight_config.md)/[maxHeight](layout/api/cell/layout_cell_maxheight_config.md) options work in the same way. +::: ~~~js const layout = new dhx.Layout("layout_container", { @@ -151,11 +153,11 @@ const layout = new dhx.Layout("layout_container", { }); ~~~ -As you can see from the code example above, the width of the cell occupies 50% of the parent container width but is not larger than 200px. +In the example above, the width of the cell occupies 50% of the parent container width but is not larger than 200px. ### Autosize for cells -Starting with v7.0, you can configure a cell so that its width/ height would automatically adjust to the width/ height of the cell content. For this purpose, you need to set the [width](layout/api/cell/layout_cell_width_config.md)/ [height](layout/api/cell/layout_cell_height_config.md) options to *"content"*: +Starting with v7.0, you can configure a cell so that its width or height adjusts automatically to the width or height of the cell content. For this, set the [width](layout/api/cell/layout_cell_width_config.md)/[height](layout/api/cell/layout_cell_height_config.md) options to *"content"*: ~~~js {5} const layout = new dhx.Layout("layout_container", { @@ -171,8 +173,7 @@ const layout = new dhx.Layout("layout_container", { ## Collapsibility -There are two attributes of the object of a cell: [](layout/api/cell/layout_cell_collapsable_config.md) and [](layout/api/cell/layout_cell_collapsed_config.md). The first one defines whether a cell can be collapsed and expanded, and the second one checks whether a cell is collapsed during -the initialization of a layout. +The object of a cell has two related attributes: [](layout/api/cell/layout_cell_collapsable_config.md) and [](layout/api/cell/layout_cell_collapsed_config.md). The first defines whether a cell can be collapsed and expanded; the second defines whether a cell is collapsed when a layout is initialized. ~~~js const layout = new dhx.Layout("layout_container", { @@ -188,7 +189,7 @@ const layout = new dhx.Layout("layout_container", { ## Progress bar -You can configure a Layout cell so that it would render a progress bar (in other words, a loading spinner) if there is no any component or HTML content attached to the cell. To do that, enable the [progressDefault](layout/api/cell/layout_cell_progressdefault_config.md) attribute in the configuration object of the cell: +You can configure a Layout cell to render a progress bar (in other words, a loading spinner) if no component or HTML content is attached to the cell. To do that, enable the [progressDefault](layout/api/cell/layout_cell_progressdefault_config.md) attribute in the configuration object of the cell: ~~~js {9,14} const layout = new dhx.Layout("layout_container", { @@ -210,13 +211,13 @@ const layout = new dhx.Layout("layout_container", { }); ~~~ -Note, as soon as you attach a component or HTML content to the cell, the progress bar will be hidden. +Note that as soon as you attach a component or HTML content to the cell, Layout hides the progress bar. By default, the [progressDefault](layout/api/cell/layout_cell_progressdefault_config.md) attribute is disabled. ## Resizability -To allow resizing of a cell, make use of the [](layout/api/cell/layout_cell_resizable_config.md) option in the object of a cell. +To allow resizing of a cell, use the [](layout/api/cell/layout_cell_resizable_config.md) option in the object of a cell. ~~~js const layout = new dhx.Layout("layout_container", { @@ -228,11 +229,13 @@ const layout = new dhx.Layout("layout_container", { **Related sample**: [Layout. Collapsable and resizable](https://snippet.dhtmlx.com/f1f49n35) -{{note Starting from v7.0, you can define the resizing limits by setting necessary values to the [minWidth](layout/api/cell/layout_cell_minwidth_config.md)/[maxWidth](layout/api/cell/layout_cell_maxwidth_config.md), [minHeight](layout/api/cell/layout_cell_minheight_config.md)/[maxHeight](layout/api/cell/layout_cell_maxheight_config.md) properties in the config of a cell.}} +:::note +Starting from v7.0, you can define the resizing limits by setting the necessary values for the [minWidth](layout/api/cell/layout_cell_minwidth_config.md)/[maxWidth](layout/api/cell/layout_cell_maxwidth_config.md) and [minHeight](layout/api/cell/layout_cell_minheight_config.md)/[maxHeight](layout/api/cell/layout_cell_maxheight_config.md) properties in the config of a cell. +::: ## Setting borders for cells -By default, there is no space and borders between cells inside a layout and the cells look like they are merged. Starting from v7.0, it is possible to split the cells by adding borders or space between them via the [](layout/api/cell/layout_cell_type_config.md) configuration property of a Layout cell: +By default, there is no space or border between cells inside a layout, and the cells look merged. Starting from v7.0, it is possible to split the cells by adding borders or space between them via the [](layout/api/cell/layout_cell_type_config.md) configuration property of a Layout cell: ~~~js {2} const layout = new dhx.Layout("layout_container", { From c1aee21d094182167f748afc3167046081605750 Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Thu, 17 Sep 2026 12:44:16 +0300 Subject: [PATCH 2/9] [fix] correct two broken samples in Layout docs Samples that do not work as written: - line 37 used `row: [` where the Layout config property is `rows`. The API reference has layout_rows_config.md and layout_cols_config.md but no page for a singular `row`, and no file documents a 'row?:' signature. Across all of docs/layout/ the singular form appeared in exactly this one line, while line 82 of the same file already used `rows:`. Copying the sample would produce a layout with no rows - line 27 defined `.my_second-class` with a hyphen while the config sets css:"my_first_class my_second_class" with an underscore, so that class never applied. Of the 18 files carrying the identical config line, 12 define the underscore form and only 3 the hyphen, so the style block was the outlier. pagination/customization.md and tree/setting_tree_appearance.md still have the same mismatch Grammar and style in the shared opener: - "There is a possibility to make changes in the look and feel" -> "You can change the look and feel" - "For this you need to take the following steps:" - missing comma after the introductory phrase, and "you need to" padding an imperative - "add a new CSS class(es) with desired settings" put an article in front of a plural marker -> "add one or more CSS classes with the desired settings"; the parenthetical was reordered to read straight - [css] -> [`css`], a config property in a plain-text link label That opener is shared by 20 */customization.md files. They are untouched here, and none of them carries the corrected wording yet: the grid version was rewritten on sp-next-grid-article-grammar, which this branch does not contain. The work list is empty after the rewrite, with no dismissals required. No heading was touched and this page has no inbound anchors. Frontmatter untouched. No link target changed. Only lines 27 and 37 fall inside a code fence, which are the two intentional sample fixes. Trailing whitespace is net zero. --- docs/layout/customization.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/layout/customization.md b/docs/layout/customization.md index 3169dc655..9bf53c746 100644 --- a/docs/layout/customization.md +++ b/docs/layout/customization.md @@ -8,15 +8,15 @@ description: You can explore the customization of Layout in the documentation of ## Styling Layout cells -There is a possibility to make changes in the look and feel of a layout by styling its cells. +You can change the look and feel of a layout by styling its cells. ![Layout styled with custom CSS showing a dark header and pink, teal, and orange colored cells in DHTMLX Suite](/img/layout/custom_css.png) **Related sample**: [Layout. Styling (custom CSS)](https://snippet.dhtmlx.com/pwxmf0lx) -For this you need to take the following steps: +For 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 one or more CSS classes with the desired settings in the <style> section of your HTML page or in your file with styles (in this case, don't forget to include the file on the page): ~~~html ~~~ -- specify the name of the created CSS class (or names of classes separated by spaces) as the value of the [css](layout/api/cell/layout_cell_css_config.md) property in the configuration of a Layout cell: +- specify the name of the created CSS class (or names of classes separated by spaces) as the value of the [`css`](layout/api/cell/layout_cell_css_config.md) property in the configuration of a Layout cell: ~~~js const layout = new dhx.Layout("layout_container",{ - row: [ + rows: [ { header: "Sub Block Header row", css:"my_first_class my_second_class" From e285b78378ba6e9332a48f457b108f669f40508d Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Thu, 17 Sep 2026 13:03:43 +0300 Subject: [PATCH 3/9] [update] grammar and style in Layout event handling API name formatting, 3 occurrences: - **layout.events.on()**, **layout.events.detach()** and **layout.events.fire()** moved from bold to backticks Rendering: - the case-insensitivity note used the {{note ...}} macro, which Docusaurus prints literally. Converted to :::note. This page has the multi-line variant, which is the rare one: 9 across the tree against 112 single-line, so the replacement had to match the marker byte-exact, including its trailing space Address and voice: - line 11 said "The user can add ... To do this, the user can use", third person twice where the rest of the page addresses "you", and repeated "any ... to any of" - "Several handlers can be attached to one and the same event, and all of them will be executed" carried two passives, the redundant pair "one and the same", and the future tense. Now "You can attach several handlers to the same event, and Layout executes all of them" - "There is a simple way of removing an event handler via the ... method" -> "To remove an event handler, use the ... method" - "The names of the events are case-insensitive" -> "Event names are case-insensitive" On consistency: none of this could be justified by pointing at grid/events.md. The corrected wording exists in exactly one file tree-wide, and that file is on sp-next-grid-article-grammar, which this branch does not contain. Each change stands on its own rule. Trailing whitespace is -1 character. The only removed line ending in whitespace is '{{note ', and no added line carries any: that space belonged to the macro marker being replaced, not to surrounding prose. The sole remaining trailing space in the file is line 3, frontmatter. The same patterns remain elsewhere and are untouched: "The user can add any user-defined handler" in 3 files, "There is a simple way of removing an event handler" in 8, "The names of the events are case-insensitive" in 9, bold **x.events.on()** in 19 files, and {{note}} in 93. The work list is empty after the rewrite, with no dismissals required. No heading was touched and this page has no inbound anchors. Frontmatter untouched. No link target changed. No changed line falls inside a code fence. --- docs/layout/events.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/layout/events.md b/docs/layout/events.md index bed617005..dad51e4f3 100644 --- a/docs/layout/events.md +++ b/docs/layout/events.md @@ -8,7 +8,7 @@ description: You can explore the event handling of Layout in the documentation o ## Attaching event listeners -The user can add any user-defined handler to any of the available events. To do this, the user can use the **layout.events.on()** method with the following parameters: +You can add a user-defined handler to any of the available events. To do this, use the `layout.events.on()` method with the following parameters: @@ -29,17 +29,17 @@ layout.events.on("beforeHide", function(id){ }); ~~~ -Several handlers can be attached to one and the same event, and all of them will be executed. +You can attach several handlers to the same event, and Layout executes all of them. -{{note -The names of the events are case-insensitive. -}} +:::note +Event names are case-insensitive. +::: **Related sample**: [Layout. Events](https://snippet.dhtmlx.com/fyxw0map) ## Detaching event listeners -There is a simple way of removing an event handler via the **layout.events.detach()** method: +To remove an event handler, use the `layout.events.detach()` method: ~~~js layout.events.on("beforeHide", function(id){ @@ -51,7 +51,7 @@ layout.events.detach("beforeHide"); ## Calling events -To call events, use **layout.events.fire()**: +To call events, use the `layout.events.fire()` method: ~~~js layout.events.fire("beforeHide",args); From 0de8194506ab57f94590bade4a137fddab58439b Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Thu, 17 Sep 2026 13:54:57 +0300 Subject: [PATCH 4/9] [update] grammar and style in Layout features Broken wording carried by the features.md template: - "go into deep dive on its functionality" -> "dive deep into its functionality". Still present in 19 other features.md pages - "Learn how to perform the code after the component's rendering" -> "run the code after the component renders". "perform the code" was the only form in the tree, with no occurrence of "run the code"; 19 files still carry it A row that contradicted itself: - line 63 labelled the link "Height of the cell's header" while its description now reads "the height of a cell header". That possessive was the only one in the file and a lone outlier site-wide, 1 hit in 1 file against "cell header" 3 in 2. The label is prose and was changed; the link target was not. 0 files still use the possessive Grammar and style: - line 13 wrote "initialize Layout" and then "integrate a Layout" in one sentence - the Optimus row was missing two articles and carried a double space - "in the absence of the component/HTML content in the cell" was padded and repeated "in a cell ... in the cell" - "attach HTML content into a cell" takes "to", not "into" - "etc." closed an enumeration on line 79 - one row offered "Example 1" beside an unnumbered "Example" - line 142 was missing an article, and "Layout cells API" became "Layout cell API" to match the heading below it - restrictive "which" -> "that" on line 161 Left alone, measured rather than assumed: - the nine section introductions keep their five different phrasings. There is no house majority to harmonise toward: "you can find out" runs 46 hits across 20 files, "you will learn" 32/20, "you can learn" 25/18, "you will know" 7/7. The same change was made in grid/features.md only because that page had an internal outlier confined to a single file; no such outlier exists here - "by default" inside the label "Showing a progress bar by default" stays: 40 sentence openers and 793 mid-sentence uses tree-wide - the curly apostrophe is split 13 to 7 with no rule governing it, so it was not touched as typography; the line 168 rewrite removed that possessive anyway The work list is down to that one dismissal. No heading was touched and this page has no inbound anchors. Frontmatter untouched. No link target changed. No changed line falls inside a code fence. Trailing whitespace is net zero. --- docs/layout/features.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/docs/layout/features.md b/docs/layout/features.md index 1a6378be2..828ab0e1c 100644 --- a/docs/layout/features.md +++ b/docs/layout/features.md @@ -6,11 +6,11 @@ description: You can explore the features of Layout in the documentation of the # Features -This page contains structured information that will help you to start working with DHTMLX Layout and go into deep dive on its functionality. +This page contains structured information that helps you start working with DHTMLX Layout and dive deep into its functionality. ## How to start with DHTMLX Layout -In this section you can find out how to initialize Layout, how to attach the necessary components to its cells, and how to integrate a Layout into your applications. +In this section you can find out how to initialize Layout, how to attach the necessary components to its cells, and how to integrate Layout into your applications. ### Initialization @@ -24,7 +24,7 @@ In this section you can find out how to initialize Layout, how to attach the nec | 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
(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
(recommended framework for creating apps with Suite components) | | [React integration](integration/suite_and_react.md) | Learn how to use DHTMLX Layout with React ([Demo](https://github.com/DHTMLX/react-suite-demo)) | | [Angular integration](integration/suite_and_angular.md) | Learn how to use DHTMLX Layout with Angular ([Demo](https://github.com/DHTMLX/angular-suite-demo)) | | [Vue integration](integration/suite_and_vue.md) | Learn how to use DHTMLX Layout with Vue.js ([Demo](https://github.com/DHTMLX/vue-suite-demo)) | @@ -50,7 +50,7 @@ In this section you can find out how to configure the size and visibility of cel | [Configuring content alignment](layout/api/cell/layout_cell_align_config.md) | Learn how to set the alignment of content inside a cell ([Example](https://snippet.dhtmlx.com/4w1033c9)) | | [Configuring paddings](layout/api/cell/layout_cell_padding_config.md) | Learn how to configure the distance between a cell and the Layout border ([Example](https://snippet.dhtmlx.com/tk6tpwwv)) | | [Initializing a collapsed cell](layout/cell_configuration.md#collapsibility) | Learn how to initialize a collapsed cell and provide the ability to expand it ([Example 1](https://snippet.dhtmlx.com/f1f49n35), [Example 2](https://snippet.dhtmlx.com/r2e0y6n7)) | -|[Showing a progress bar by default](layout/cell_configuration.md#progress-bar)|Learn how to render the progress bar in a cell in the absence of the component/HTML content in the cell| +|[Showing a progress bar by default](layout/cell_configuration.md#progress-bar)|Learn how to render a progress bar in a cell that has no component or HTML content| ## How to configure sizes of Layout cells @@ -60,7 +60,7 @@ In this section you will learn how to configure sizes of Layout cells and their | -------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- | | [Width and height of a cell](layout/cell_configuration.md#cell-size) | Learn how to configure the width and height of a cell ([Example](https://snippet.dhtmlx.com/miej9gb9)) | | [Size of a cell within a row](layout/api/cell/layout_cell_gravity_config.md) | Learn how to define the "weight" of a cell in relation to other cells placed in the same row and within one parent ([Example](https://snippet.dhtmlx.com/1u521djj)) | -| [Height of the cell's header](layout/cell_configuration.md#height-of-a-header-cell) | Learn how to configure the height of the header of a cell | +| [Height of a cell header](layout/cell_configuration.md#height-of-a-header-cell) | Learn how to configure the height of a cell header | ## How to customize Layout and its cells @@ -69,21 +69,21 @@ In this section you can learn how to configure the style of Layout and its cells | Topic | Description | | -------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- | | [Rendering HTML content](layout/api/cell/layout_cell_html_config.md) | Learn how to render HTML content in a cell on Layout initialization ([Example](https://snippet.dhtmlx.com/6x76kgyq)) | -| [Attaching HTML content](layout/work_with_layout.md#attaching-an-html-content-to-a-cell) | Learn how to attach HTML content into a cell dynamically or detach it | +| [Attaching HTML content](layout/work_with_layout.md#attaching-an-html-content-to-a-cell) | Learn how to attach HTML content to a cell dynamically or detach it | | [Styling (custom CSS)](layout/customization.md) | Learn how to apply custom styles to a Layout cell ([Example](https://snippet.dhtmlx.com/pwxmf0lx)) | | [List of CSS classes](helpers/base_elements.md) | A set of CSS classes provided by the DHTMLX library | ## How to work with Layout cells -In this section you will learn how to get a cell object, how to add or remove, hide or show, expand or collapse a cell, etc. +In this section you will learn how to get a cell object, how to add or remove, hide or show, and expand or collapse a cell. | Topic | Description | | -------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | | [Removing a cell](layout/work_with_layout.md#removing-cells) | Learn how to remove a cell from Layout ([Example](https://snippet.dhtmlx.com/tnujp7jk)) | | [Iterating over all cells](layout/api/layout_foreach_method.md) | Learn how to iterate over Layout cells ([Example](https://snippet.dhtmlx.com/9hfntqpy)) | | [Getting a cell object](layout/api/layout_getcell_method.md) | Learn how to get a configuration object of a particular cell | -| [Showing/hiding a cell](layout/work_with_layout.md#hidingshowing-a-cell) | Learn how to hide/show a cell ([Example 1](https://snippet.dhtmlx.com/v0q7gq26), [Example](https://snippet.dhtmlx.com/u0jd8ah3)) | +| [Showing/hiding a cell](layout/work_with_layout.md#hidingshowing-a-cell) | Learn how to hide/show a cell ([Example 1](https://snippet.dhtmlx.com/v0q7gq26), [Example 2](https://snippet.dhtmlx.com/u0jd8ah3)) | | [Checking visibility of a cell](layout/work_with_layout.md#checking-visibility-of-a-cell) | Learn how to check whether a Layout cell is visible | | [Expanding/collapsing a cell](layout/work_with_layout.md#collapsingexpanding-a-cell) | Learn how to collapse/expand a cell ([Example 1](https://snippet.dhtmlx.com/h0wtlpyk), [Example 2](https://snippet.dhtmlx.com/t38tqk0k)) | |[Showing/hiding a progress bar](layout/work_with_layout.md#showinghiding-a-progress-bar)|Learn how to show/hide the progress bar in a Layout container or in a cell ([Example](https://snippet.dhtmlx.com/vzrvf4rm))| @@ -139,7 +139,7 @@ This section explains how to work with Layout events. ## API reference -In this section you can find out corresponding references of Layout and Layout cells API. +In this section you can find out the corresponding references of the Layout and Layout cell API. ### Layout API @@ -158,14 +158,14 @@ In this section you can find out corresponding references of Layout and Layout c ## Common functionality -In this section you will learn about common functionality of the library which can be useful while working with Layout. +In this section you will learn about the common functionality of the library that can be useful while working with Layout. | Topic | Description | | ------------------------------------------------------------- | ------------------------------------------------------------- | | [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 enable custom scroll in Layout cells | -| [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 renders | ## Any questions left? From bf5e577a49ec0385bd6224e51608a8c456e0db6d Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Thu, 17 Sep 2026 14:59:18 +0300 Subject: [PATCH 5/9] [update] grammar and style in Layout overview Opening paragraph, all three defects local rather than templated: - "DHTMLX Layout component lets you specify" had no article before "component". The corrected form "The DHTMLX X component" appears nowhere in the tree, and sibling overviews open with the bare product name as subject, so the stray "component" was dropped instead. 0 instances of that pattern remain - "Layout helps blend diverse types of data representation" was marketing phrasing with a single occurrence tree-wide; now "helps you combine different kinds of data" - the paragraph ended with a br tag welding two sentences together, where a paragraph break belongs. Only 1 index page still does this Related resources: - "as a part of the Suite library by [downloading DHTMLX Suite]" used a by-ing link. The surrounding sentence is template across many pages and was left alone; only the link construction changed. 16 files still carry the by-ing form Guides: - "how to add Layout on the page" takes "to", not "on". The site has no instance of "add X to the page" to defer to, so the grammar rule governs. 3 files still use the wrong preposition Left alone, with reasons: - the nine empty link labels are the site convention: Docusaurus fills them with the target page title - the two trailing spaces on the Related resources item are preserved, as all incidental trailing whitespace has been in this pass - the shape of the Related resources block is shared template and not this page's to change The work list is empty after the rewrite, with no dismissals required. No heading was touched and this page has no inbound anchors. Frontmatter untouched. No link target changed. No changed line falls inside a code fence. Trailing whitespace is net zero. --- docs/layout/index.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/docs/layout/index.md b/docs/layout/index.md index d1067608c..6fae2b202 100644 --- a/docs/layout/index.md +++ b/docs/layout/index.md @@ -6,7 +6,8 @@ description: You can have an overview of Layout in the documentation of the DHTM # Layout overview -DHTMLX Layout component lets you specify the main scheme of your application or web page, as it defines the arrangement of blocks with content. Layout helps blend diverse types of data representation on one page.
+DHTMLX Layout lets you specify the main scheme of your application or web page, as it defines the arrangement of content blocks. Layout helps you combine different kinds of data on one page. + Check [online samples for DHTMLX Layout](https://snippet.dhtmlx.com/f1f49n35?tag=layout). ![Layout structure with a header, sidebar, content, aside columns, and a footer in DHTMLX Suite](/img/layout/layout.png) @@ -23,12 +24,12 @@ You can check the following page to learn how to build a full-featured DHTMLX La ## Related resources -- You can get DHTMLX Layout as a part of the Suite library by [downloading DHTMLX Suite](https://dhtmlx.com/docs/products/dhtmlxSuite/download.shtml) +- You can get DHTMLX Layout as a part of the Suite library: [download DHTMLX Suite](https://dhtmlx.com/docs/products/dhtmlxSuite/download.shtml) - There are also [online samples for DHTMLX Layout](https://snippet.dhtmlx.com/f1f49n35?tag=layout) ## Guides -You can read the following articles to find out how to add Layout on the page and work with it. +You can read the following articles to find out how to add Layout to the page and work with it. - [](layout/initialization.md) - [](layout/layout_structure.md) From bae95f9b0d95c349e13b895ed38ae1c6d4de134c Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Thu, 17 Sep 2026 15:39:57 +0300 Subject: [PATCH 6/9] [update] grammar and style in Layout initialization - suite.js and suite.css were set in italics; api-formatting treats file names as code, so both bullets now use code formatting. 19 files across docs still carry the italic form, and calendar/how_to_start.md was already the counter-example - e.g. replaced with "for example". This was the last one in docs/layout, which now holds 0 - "place full paths to JS and CSS files of the DHTMLX Suite library" -> "place the full paths to the DHTMLX Suite JS and CSS files": a missing article and a chain of of-phrases - "The structure of a layout can be rather complex, since there can also be nested rows and columns" -> "A layout structure can be complex, because rows and columns can nest inside one another" - "a configuration object which contains" -> "that contains": the clause is restrictive - "The properties of the configuration object of Layout allow you to define the structure of Layout" -> "The properties of the Layout configuration object allow you to define its structure" - "There is also a set of properties you can specify" -> "You can also specify a set of properties" - "You will find the detailed information on configuration options of the cell object" -> "You can find detailed information on the cell object configuration options": future tense and another of-chain - "a container for the Layout" -> "a container for Layout": the page uses the zero article in every other sentence Left unchanged on purpose: - every heading, since 19 anchors across the docs point at #initialize-layout - "you need to take the following simple steps", a template shared by 18 files, matching what grid/initialization.md kept - [here] as a link label: 111 occurrences in 60 files, a site-wide habit rather than a defect of this page Verified with a docusaurus build. --- docs/layout/initialization.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/docs/layout/initialization.md b/docs/layout/initialization.md index b56099f5f..79c573d85 100644 --- a/docs/layout/initialization.md +++ b/docs/layout/initialization.md @@ -51,10 +51,10 @@ To add DHTMLX Layout into an application, you need to take the following simple Unpack the downloaded package into a folder of your project. -After that, create an HTML file and place full paths to JS and CSS files of the DHTMLX Suite library into the header of the file. The files are: +After that, create an HTML file and place the full paths to the DHTMLX Suite JS and CSS files into the header of the file. The files are: -- *suite.js* -- *suite.css* +- `suite.js` +- `suite.css` ~~~html @@ -63,7 +63,7 @@ After that, create an HTML file and place full paths to JS and CSS files of the ## Create a container -Add a container for the Layout and give it an id, e.g. "layout_container": +Add a container for Layout and give it an id, for example "layout_container": ~~~html
@@ -71,7 +71,7 @@ Add a container for the Layout and give it an id, e.g. "layout_container": ## Define Layout structure -Layout consists of a set of cells arranged either into rows or into columns. The structure of a layout can be rather complex, since there can also be nested rows and columns. +Layout consists of a set of cells arranged either into rows or into columns. A layout structure can be complex, because rows and columns can nest inside one another. For example, you can create a three-level layout structure: @@ -109,7 +109,7 @@ const cols = [ Initialize Layout with the `dhx.Layout` object constructor. The constructor takes two parameters: - the HTML object on the page that serves as the layout container -- a configuration object which contains the structure of Layout +- a configuration object that contains the structure of Layout ~~~js const layout = new dhx.Layout("layout_container", {cols}); @@ -119,15 +119,15 @@ const layout = new dhx.Layout("layout_container", {cols}); #### Layout object -The properties of the configuration object of Layout allow you to define the structure of Layout. +The properties of the Layout configuration object allow you to define its structure. See the list of Layout properties [here](layout/api/api_overview.md#layout-properties). #### Cell object -There is also a set of properties you can specify for a Layout cell to configure it according to your needs. +You can also specify a set of properties for a Layout cell to configure it according to your needs. -You will find the detailed information on configuration options of the cell object in the [Layout API overview](layout/api/api_overview.md#cell-properties) article. +You can find detailed information on the cell object configuration options in the [Layout API overview](layout/api/api_overview.md#cell-properties) article. ## Example From 81cb90e2f9276b78698bb30d5804514db0e68759 Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Thu, 17 Sep 2026 16:24:17 +0300 Subject: [PATCH 7/9] [fix] correct Layout pattern image descriptions 14 of the 30 image descriptions on this page named a different layout than the picture shows. Checked two ways that agree: by decoding every PNG and extracting the cell rectangles, and by reading the enlarged images. Three kinds of error: - inverted. 3T, 4T, 4U and 5U claimed columns above a full-width row where the image puts the full-width row on top, or the reverse - carrying another pattern's text. 3J held the description belonging to 3T, 4I the one belonging to 4J, and 4A and 4F described shapes the images do not contain - wrong cell counts. 5K has three cells on the left and two on the right, 5S the reverse, yet both claimed two and two. 4L, 5G and 5C said one column where the image has two The pairs 3T/3U and 5K/5S were byte-identical, which is what exposed the problem. After the fix all 30 descriptions are distinct (0 duplicates) and every cell count matches the digit in the pattern name. These strings look generated from a template, so the generator is likely wrong too; this commit only fixes the page. Prose, all of it unique to this file: - "provide you with various options of arranging cells inside of a layout in a neat structure" became "let you arrange cells inside a layout": a gerund chain, the wrong form inside of, and a phrase that promises neatness without describing it - "named in accordance with their structure. Each scheme is similar to a Latin letter" became "named after their structure. Each one resembles a Latin letter". The page says pattern everywhere else, so scheme was the only occurrence of that word - "Click on the desired pattern to see its example" became "Click the desired pattern to see an example". Click on has 1 occurrence left in the docs, so it was not a house form Left alone on purpose: the desired, which appears in 38 files; every heading; and all 29 image paths and snippet links, none of which changed in the diff. Verified with a docusaurus build. --- docs/layout/layout_patterns.md | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/docs/layout/layout_patterns.md b/docs/layout/layout_patterns.md index e086102b5..53d170bd3 100644 --- a/docs/layout/layout_patterns.md +++ b/docs/layout/layout_patterns.md @@ -6,9 +6,9 @@ description: You can explore the patterns of Layout in the documentation of the # Layout patterns -DHTMLX Layout patterns are predefined combinations of [rows and columns](layout/layout_structure.md) that provide you with various options of arranging cells inside of a layout in a neat structure. The patterns are named in accordance with their structure. Each scheme is similar to a Latin letter. +DHTMLX Layout patterns are predefined combinations of [rows and columns](layout/layout_structure.md) that let you arrange cells inside a layout. The patterns are named after their structure. Each one resembles a Latin letter. -**Click on the desired pattern to see its example in Snippet Tool.** +**Click the desired pattern to see an example in Snippet Tool.** [![1C layout pattern with a single cell in DHTMLX Suite](/img/layout/1c.png)](https://snippet.dhtmlx.com/mzlodj28) [![2E layout pattern with two stacked rows in DHTMLX Suite](/img/layout/2e.png)](https://snippet.dhtmlx.com/1oqx20ve) @@ -16,30 +16,30 @@ DHTMLX Layout patterns are predefined combinations of [rows and columns](layout/ [![3E layout pattern with three stacked rows in DHTMLX Suite](/img/layout/3e.png)](https://snippet.dhtmlx.com/v0w2p60c) [![3W layout pattern with three side-by-side columns in DHTMLX Suite](/img/layout/3w.png)](https://snippet.dhtmlx.com/ag01de2d) -[![3J layout pattern with a full-width top row over two columns in DHTMLX Suite](/img/layout/3j.png)](https://snippet.dhtmlx.com/p0fllgaa) +[![3J layout pattern with two stacked cells on the left and a full-height column on the right in DHTMLX Suite](/img/layout/3j.png)](https://snippet.dhtmlx.com/p0fllgaa) [![3L layout pattern with a left sidebar and two stacked cells on the right in DHTMLX Suite](/img/layout/3l.png)](https://snippet.dhtmlx.com/bozlxz69) -[![3T layout pattern with two top columns over a full-width bottom row in DHTMLX Suite](/img/layout/3t.png)](https://snippet.dhtmlx.com/jnq5cnc7) +[![3T layout pattern with a full-width top row over two columns in DHTMLX Suite](/img/layout/3t.png)](https://snippet.dhtmlx.com/jnq5cnc7) [![3U layout pattern with two top columns over a full-width bottom row in DHTMLX Suite](/img/layout/3u.png)](https://snippet.dhtmlx.com/678w7hgb) [![4E layout pattern with four stacked rows in DHTMLX Suite](/img/layout/4e.png)](https://snippet.dhtmlx.com/m6nlb0bf) [![4W layout pattern with four side-by-side columns in DHTMLX Suite](/img/layout/4w.png)](https://snippet.dhtmlx.com/uwb6hql7) -[![4T layout pattern with three top columns over a full-width bottom row in DHTMLX Suite](/img/layout/4t.png)](https://snippet.dhtmlx.com/4v52yj8w) -[![4U layout pattern with a full-width top row over three columns in DHTMLX Suite](/img/layout/4u.png)](https://snippet.dhtmlx.com/2s9pdfhv) +[![4T layout pattern with a full-width top row over three columns in DHTMLX Suite](/img/layout/4t.png)](https://snippet.dhtmlx.com/4v52yj8w) +[![4U layout pattern with three top columns over a full-width bottom row in DHTMLX Suite](/img/layout/4u.png)](https://snippet.dhtmlx.com/2s9pdfhv) [![4H layout pattern with side columns around a stacked center column in DHTMLX Suite](/img/layout/4h.png)](https://snippet.dhtmlx.com/5ekykk2n) -[![4I layout pattern with two full-width rows over two bottom columns in DHTMLX Suite](/img/layout/4i.png)](https://snippet.dhtmlx.com/1c9yzjeu) -[![4A layout pattern with two outer columns around two stacked center rows in DHTMLX Suite](/img/layout/4a.png)](https://snippet.dhtmlx.com/gjr6j6ud) -[![4L layout pattern with a left column beside three cells on the right in DHTMLX Suite](/img/layout/4l.png)](https://snippet.dhtmlx.com/1nqgjnqy) +[![4I layout pattern with two middle columns between a full-width top row and a full-width bottom row in DHTMLX Suite](/img/layout/4i.png)](https://snippet.dhtmlx.com/1c9yzjeu) +[![4A layout pattern with two stacked left cells beside two full-height columns in DHTMLX Suite](/img/layout/4a.png)](https://snippet.dhtmlx.com/gjr6j6ud) +[![4L layout pattern with two full-height columns beside two stacked cells on the right in DHTMLX Suite](/img/layout/4l.png)](https://snippet.dhtmlx.com/1nqgjnqy) [![4J layout pattern with two full-width top rows over two bottom columns in DHTMLX Suite](/img/layout/4j.png)](https://snippet.dhtmlx.com/8km3g1k2) -[![4F layout pattern with a full-width top row over a column and stacked cells in DHTMLX Suite](/img/layout/4f.png)](https://snippet.dhtmlx.com/l4q0cth9) +[![4F layout pattern with two top columns over two full-width rows in DHTMLX Suite](/img/layout/4f.png)](https://snippet.dhtmlx.com/l4q0cth9) [![4G layout pattern with three stacked rows beside a right column in DHTMLX Suite](/img/layout/4g.png)](https://snippet.dhtmlx.com/mwrfozsu) [![4C layout pattern with a left column beside three stacked rows on the right in DHTMLX Suite](/img/layout/4c.png)](https://snippet.dhtmlx.com/ww1qk9u7) [![5E layout pattern with five stacked rows in DHTMLX Suite](/img/layout/5e.png)](https://snippet.dhtmlx.com/wnn4xfu4) [![5W layout pattern with five side-by-side columns in DHTMLX Suite](/img/layout/5w.png)](https://snippet.dhtmlx.com/jo5z28kr) -[![5U layout pattern with a full-width top row over four columns in DHTMLX Suite](/img/layout/5u.png)](https://snippet.dhtmlx.com/khbg58k4) +[![5U layout pattern with four top columns over a full-width bottom row in DHTMLX Suite](/img/layout/5u.png)](https://snippet.dhtmlx.com/khbg58k4) [![5H layout pattern with side columns around three stacked center rows in DHTMLX Suite](/img/layout/5h.png)](https://snippet.dhtmlx.com/xr6jv9kk) -[![5I layout pattern with a full-width top row over two rows and bottom columns in DHTMLX Suite](/img/layout/5i.png)](https://snippet.dhtmlx.com/873bxvak) -[![5K layout pattern with two stacked left cells beside two stacked right cells in DHTMLX Suite](/img/layout/5k.png)](https://snippet.dhtmlx.com/v81rvnep) -[![5S layout pattern with two stacked left cells beside two stacked right cells in DHTMLX Suite](/img/layout/5s.png)](https://snippet.dhtmlx.com/udo1jwmw) -[![5G layout pattern with three stacked left rows beside a right column in DHTMLX Suite](/img/layout/5g.png)](https://snippet.dhtmlx.com/v8zw7jzr) -[![5C layout pattern with a left column beside stacked rows on the right in DHTMLX Suite](/img/layout/5c.png)](https://snippet.dhtmlx.com/rkpj3k4h) +[![5I layout pattern with three middle columns between a full-width top row and a full-width bottom row in DHTMLX Suite](/img/layout/5i.png)](https://snippet.dhtmlx.com/873bxvak) +[![5K layout pattern with three stacked left cells beside two stacked right cells in DHTMLX Suite](/img/layout/5k.png)](https://snippet.dhtmlx.com/v81rvnep) +[![5S layout pattern with two stacked left cells beside three stacked right cells in DHTMLX Suite](/img/layout/5s.png)](https://snippet.dhtmlx.com/udo1jwmw) +[![5G layout pattern with three stacked left cells beside two full-height columns in DHTMLX Suite](/img/layout/5g.png)](https://snippet.dhtmlx.com/v8zw7jzr) +[![5C layout pattern with two full-height columns beside three stacked cells on the right in DHTMLX Suite](/img/layout/5c.png)](https://snippet.dhtmlx.com/rkpj3k4h) From b652cdd374cec5df68b74bee464d4bfd0bc028ad Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Thu, 17 Sep 2026 18:43:54 +0300 Subject: [PATCH 8/9] [update] grammar and style in Layout structure - "of cells which are placed horizontally" became "that are placed horizontally". The clause is restrictive, and line 28 of this same file already wrote "that are located vertically", so the page was inconsistent with itself - "In this layout type both rows and columns are used, i.e. a row may include several columns" became "This layout type uses both rows and columns: a row may include several columns". Drops a passive whose actor is the layout type itself and the i.e. abbreviation, which still has 19 occurrences in 18 files elsewhere. The bold on both rows and columns is unchanged - removed a trailing space at the end of line 28, the only one in the prose of this file. The one in the title on line 3 belongs to the generated frontmatter and stays Checked and deliberately left alone: - the empty link label on line 13. It is not a broken link but a site-wide macro that fills the label from the target: the built page renders it as the word rows, and the docs contain 2291 such links. Both forms are house style, so neither line 13 nor line 28 is an outlier - calling rows horizontal and columns vertical. It reads oddly next to the layout patterns page, where 2E is two stacked rows, but the text describes the orientation of each band rather than the order of the cells, and it is consistent within the page. The two API pages define only an array of rows objects, so they settle nothing - "the necessary composition of blocks", in 39 files, and "There are three common types", in 56 files: house habits, not defects here - the three single-item bullet lists. They read as subheadings, but turning them into headings would add anchors and change the sidebar, which is a structural edit rather than a wording one Verified with a docusaurus build, and the rendered page was re-checked to confirm the bold and the generated link label survived. --- docs/layout/layout_structure.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/layout/layout_structure.md b/docs/layout/layout_structure.md index 6bfc5d6b3..9ae294de3 100644 --- a/docs/layout/layout_structure.md +++ b/docs/layout/layout_structure.md @@ -10,7 +10,7 @@ You can use DHTMLX Layout to build the necessary composition of blocks to arrang - horizontal layout -This type of layout contains several [](layout/api/layout_rows_config.md) of cells which are placed horizontally. +This type of layout contains several [](layout/api/layout_rows_config.md) of cells that are placed horizontally. ~~~js const layout = new dhx.Layout("layout_container", { @@ -25,7 +25,7 @@ const layout = new dhx.Layout("layout_container", { - vertical layout -This type of layout includes a set of [columns](layout/api/layout_cols_config.md) of cells that are located vertically. +This type of layout includes a set of [columns](layout/api/layout_cols_config.md) of cells that are located vertically. ~~~js const layout = new dhx.Layout("layout_container", { @@ -40,7 +40,7 @@ const layout = new dhx.Layout("layout_container", { - mixed layout -In this layout type **both rows and columns** are used, i.e. a row may include several columns and a column may have rows inside. +This layout type uses **both rows and columns**: a row may include several columns and a column may have rows inside. ~~~js const layout = new dhx.Layout("layout_container", { From d061b9b42735f5741554fb3e96ea1797cfe4a73b Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Thu, 17 Sep 2026 21:17:08 +0300 Subject: [PATCH 9/9] [update] grammar and style in Work with Layout - "To remove a certain cell" lost certain, a vague word the style rules name outright, and "As a parameter it takes the id" became "It takes as a parameter the id". The fronted form appears 3 times in the docs against 32 for the one now used - "Use the getCell() method for this purpose" dropped the closing phrase, which says nothing the sentence has not already said - the note about Message, Popup and Window moved from the brace macro to the triple-colon form. This is NOT a rendering fix: the macro expands correctly, as the built page shows. It aligns the page with the dominant syntax, which on master stands at 465 triple-colon blocks against 135 brace ones. 123 brace notes remain in 91 files - the literals true and false moved from italics to code formatting, which leads 313 to 156 for true - a hyphen standing in for punctuation before two links became a comma; the sentence already ends in a colon, and the docs use a colon before a link 2961 times against 42 for that hyphen - "a visual component which informs users" became "that informs users", the clause being restrictive - "You may show or hide" became "You can", You may having only 10 occurrences in the docs - "can be also shown" became "can also be shown" - the last Related sample line had its colon inside the bold rather than after it, unlike the other six on the page. 61 such lines are left elsewhere - removed three trailing spaces, none of them a deliberate line break Measured and deliberately left alone, all house forms rather than defects of this page: via (416), with the help of (132), It is possible to (101), easily (68), and by default mid-sentence, which runs 793 against 45 as a sentence opener. Every heading is untouched: 25 links point at this page, most of them at its anchors. One of those headings, Attaching an HTML content to a cell, is itself ungrammatical, but correcting it would break the anchors used by features.md and by the cell detach method page, so it needs its own change together with those links. Verified with a docusaurus build, and the rendered page was checked to confirm the note became a real admonition and the two literals became code. --- docs/layout/work_with_layout.md | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/docs/layout/work_with_layout.md b/docs/layout/work_with_layout.md index 2a373ae81..25d77583c 100644 --- a/docs/layout/work_with_layout.md +++ b/docs/layout/work_with_layout.md @@ -8,7 +8,7 @@ description: You can explore how to work with Layout in the documentation of the ## Removing cells -To remove a certain cell from a layout, apply the [](layout/api/layout_removecell_method.md) method. As a parameter it takes the id of a cell to be removed: +To remove a cell from a layout, apply the [](layout/api/layout_removecell_method.md) method. It takes as a parameter the id of a cell to be removed: ~~~js layout.removeCell(id); @@ -18,7 +18,7 @@ layout.removeCell(id); ## Getting the object of a cell -You can get the object of a cell by its id. Use the [](layout/api/layout_getcell_method.md) method for this purpose: +You can get the object of a cell by its id. Use the [](layout/api/layout_getcell_method.md) method: ~~~js layout.getCell("header"); @@ -49,7 +49,9 @@ layout.getCell("list").attach(list); **Related sample**: [Layout. Attach widget](https://snippet.dhtmlx.com/6wuxj6sh) -{{note The Message, Popup, Window components can't be attached to the Layout cell because these components can't have the parent container due to their architecture principles.}} +:::note +The Message, Popup, Window components can't be attached to the Layout cell because these components can't have the parent container due to their architecture principles. +::: ### Detach a component @@ -101,7 +103,7 @@ layout.getCell("toolbar").show(); ## Checking visibility of a cell -Since the object of a cell has the [hidden](layout/api/cell/layout_cell_hidden_config.md) attribute, a cell can be hidden in a layout. You can check the visibility of a cell via the [](layout/api/cell/layout_cell_isvisible_method.md) method. It returns *true* if the cell is visible and *false* if it is hidden. +Since the object of a cell has the [hidden](layout/api/cell/layout_cell_hidden_config.md) attribute, a cell can be hidden in a layout. You can check the visibility of a cell via the [](layout/api/cell/layout_cell_isvisible_method.md) method. It returns `true` if the cell is visible and `false` if it is hidden. ~~~js layout.getCell("sidebar").isVisible(); // -> true|false @@ -109,7 +111,7 @@ layout.getCell("sidebar").isVisible(); // -> true|false ## Collapsing/expanding a cell -You can collapse/expand a specified cell using two corresponding methods of a Layout cell - [](layout/api/cell/layout_cell_collapse_method.md) and [](layout/api/cell/layout_cell_expand_method.md): +You can collapse/expand a specified cell using two corresponding methods of a Layout cell, [](layout/api/cell/layout_cell_collapse_method.md) and [](layout/api/cell/layout_cell_expand_method.md): ~~~js // collapsing a cell by its id @@ -133,10 +135,10 @@ layout.getCell("toolbar").toggle(); ## Showing/hiding a progress bar -A progress bar is a visual component which informs users that the content is loading or updating. -You may show or hide the component via API calls either in the [Layout container](#progress-bar-in-the-layout-container) or in a [separate cell](#progress-bar-in-a-layout-cell). +A progress bar is a visual component that informs users that the content is loading or updating. +You can show or hide the component via API calls either in the [Layout container](#progress-bar-in-the-layout-container) or in a [separate cell](#progress-bar-in-a-layout-cell). -The progress bar can be also shown by default for cells without any attached component or HTML content. [Check the details](layout/cell_configuration.md#progress-bar). +The progress bar can also be shown by default for cells without any attached component or HTML content. [Check the details](layout/cell_configuration.md#progress-bar). ### Progress bar in the Layout container @@ -166,4 +168,4 @@ To hide the component, apply the [progressHide()](layout/api/cell/layout_cell_pr layout.getCell("two").progressHide(); ~~~ -**Related sample:** [Layout. Spinner (busy indicator/ progress bar) for Layout and its cells](https://snippet.dhtmlx.com/vzrvf4rm) \ No newline at end of file +**Related sample**: [Layout. Spinner (busy indicator/ progress bar) for Layout and its cells](https://snippet.dhtmlx.com/vzrvf4rm) \ No newline at end of file