Docs GridLayout

[svdimitr]

New Component Checklist (delete for other types of PRs)

• - Overview article

  • General information on the purpose of the component.
  • Instruction on how to add the component to a razor component.
  • Basic configuration of the component - code snippet with a scenario that is both basic, and meaningful.
  • Provide information on the component's reference.
  • List the available features for the component and/or provide links (slugs) for the articles that explain them in details. For simpler components listing parameters might be enough, for more complex ones sections with a sentence or two that links corresponding articles might be more suitable.
  • Maybe some Example(s) - very common scenarios, notes, typical use case, etc. Not mandatory, depends on the component.

• - Data binding article - applicable if data can be provided to the component. My be one article or a folder with several articles (examples - DropDownList and TreeView)

• - Feature/component specific articles - those articles explain the component specific features, which do not suit in any of the before-mentioned articles. Examples of such articles are the Navigator for the Stock Chart, the Indeterminate state for the CheckBox and others.

• - Selection article - applicable if the component exposes items selection. May be a folder.
  [ ] - Single item selection
  [ ] - Multiple item selection

• - Templates - applicable if additional customization is allowed with Templates. Usually a folder, see the grid

• - Events article - applicable if the component expose events.
  Examples of such events could be:

• OnClick
• OnChange
• ValueChanged
• SelectedItemsChanged
• OnRead
• etc.

• Update Input Validation, Globalization, Keyboard Navigation, Accessibility Compliance articles as applicable.

• Link from the Overview components list

[dimodi]

Use different keywords in the different meta elements.

Suggested change

	description: Overview of the GridLayout for Blazor.
	description: Introduction to the GridLayout for Blazor. The component provides a CSS grid system.

[dimodi]

We are skipping one heading level here (## -> ####). Is a heading needed at all?

Suggested change

	#### To use a Telerik GridLayout for Blazor
	To use a Telerik GridLayout for Blazor:

[dimodi]

Suggested change

	1. To define columns in the GridLayout add one or more instances of the `<GridLayoutColumn>` to the `<GridLayoutColumns>` collection.
	1. To define columns in the GridLayout, add one or more `<GridLayoutColumn>` tags to the `<GridLayoutColumns>` collection.

[dimodi]

This is not true if ColumnSpan is used, right?

Suggested change

	* The number of `<GridLayoutColumn>` should be the same as the number of the `<GridLayoutItem>`.
	* The number of `<GridLayoutColumn>`s should match the number of `<GridLayoutItem>`s. If [items span across multiple columns]({%slug gridlayout-items %}#columnspan), then the columns can be more than the items.

[dimodi]

Suggested change

	1. To define rows in the GridLayout add one or more instances of the `<GridLayoutRow>` to the `<GridLayoutRows>` collection.
	1. To define rows in the GridLayout, add one or more `<GridLayoutRow>` tags to the `<GridLayoutRows>` collection.

[dimodi]

Suggested change

	1. Provide one or more instances of the `<GridLayoutItem>` to the `<GridLayoutItems>` collection.
	1. Define one or more `<GridLayoutItem>` tags in the `<GridLayoutItems>` collection.

[dimodi]

In this section we explain how rows, columns and items are defined. It becomes clear that the number of columns should match the number of items. However, it doesn't become clear if rows are required or not. Also, what happens if multiple rows are defined?

[dimodi]

This second snippet brings little value, but expands the article length. It can be merged with the first one.

[svdimitr]

This is a common practice across our documentation, to add a snippet that showcases the namespace and reference. I would rather leave it there.

[dimodi]

We are introducing a StackLayout term, which has not been defined. Is this a typo? Is this a feature of the GridLayout? Is this a separate component? How does it fit in the above information and snippets?

[svdimitr]

Indeed, it is a typo. Will be fixed with the rest of the improvements based on your feedback

[dimodi]

We have already linked the Dimensions article.

Suggested change

	* `ColumnSpacing` - controls the space between the columns in the GridLayout. See the [Dimensions]({%slug common-features/dimensions%}) article for more details on what units you can use and how dimensions in percent work.
	* `ColumnSpacing` - controls the space between the columns in the GridLayout. Use a CSS length unit.

[dimodi]

Integers and doubles are valid CSS units, but not supported here, as far as I understand. That is why we specify what units we require.

Suggested change

	* `Width`- takes a CSS unit that determines how wide the GridLayout is. See the [Dimensions]({%slug common-features/dimensions%}) article for more details on what units you can use and how dimensions in percent work.
	* `Width`- takes a CSS length unit that determines how wide the GridLayout is. See the [Dimensions]({%slug common-features/dimensions%}) article for more details on what units you can use and how dimensions in percent work.

[dimodi]

Suggested change

	* `RowSpacing` - controls the space between the rows in the GridLayout. See the [Dimensions]({%slug common-features/dimensions%}) article for more details on what units you can use and how dimensions in percent work.
	* `RowSpacing` - controls the space between the rows in the GridLayout. Use a CSS length unit.

[dimodi]

Which are the inner items and which are the "outer" items?

[svdimitr]

The inner items are all s defined. They are inner to the component

[dimodi]

Suggested change

	description: Items in the GridLayout for Blazor.
	description: Usage of layout items in the GridLayout for Blazor.

[dimodi]

Suggested change

	The you can control the items in the GridLayout with the parameters they expose:
	You can control the items in the GridLayout with the parameters they expose:

[dimodi]

What happens if a Row is not set?

[dimodi]

Suggested change

	The `Column` parameter controls in which row the `GridLayoutItem` will reside. The columns in the component are `1-based`.
	The `Column` parameter controls in which column the `GridLayoutItem` will reside. The columns in the component are `1-based`.

[dimodi]

What happens if a Column is not set?

[dimodi]

Explain terms with different words, otherwise the explanation becomes unnecessary.

Suggested change

	The `ColumnSpan` parameter defines the column span that the item will occupy.
	The `ColumnSpan` parameter defines how many columns the item will occupy.

[dimodi]

Suggested change

	The `RowSpan` parameter defines the row span that the item will occupy.
	The `RowSpan` parameter defines how many rows the item will occupy.

[dimodi]

What are the pros and cons of using a GridLayout vs a Splitter layout?

[dimodi]

Suggested change

	You can use the parameter exposed for the GridLayout items to create more complex layouts.
	You can use the exposed parameters of the GridLayout items to create more complex layouts.

[dimodi]

Suggested change

	>caption Create a page layout with the GridLayout component. The result from the code snippet below
	
	
	>caption Create a page layout with the GridLayout component

[dimodi]

MyData and SampleData are not intuitive names when using multiple components and multiple data sources.

[dimodi]

Here are some improvement suggestions for the language, explanations and code.

[dimodi]

Suggested change

	The `Column` parameter controls in which column the `GridLayoutItem` will reside. The columns in the component are `1-based`. If not columns are set the GridLayout items will be grouped in one column.
	The `Column` parameter controls in which column the `GridLayoutItem` will reside. The column indexes in the component are `1-based`. If no columns are defined, the GridLayout items will be displayed in one column.

[dimodi]

Suggested change

	The `Row` parameter controls in which row the `GridLayoutItem` will reside. The rows in the component are `1-based`. If not rows are defined the items will be grouped in one column with `n` rows where `n` is the number of items.
	The `Row` parameter controls in which row the `GridLayoutItem` will reside. The row indexes in the component are `1-based`. If no rows are defined, the items will be displayed in `r = i / c` rows, where:
	* `r` is the number of rows;
	* `i` is the number of items;
	* `c` is the number of columns;

[dimodi]

Note the suggestion about the scenario when no rows are defined.