From d000c1803c261e7d06c9a2de64731facf1dfc815 Mon Sep 17 00:00:00 2001 From: NansiYancheva Date: Tue, 12 Nov 2024 13:18:12 +0200 Subject: [PATCH 01/23] docs(Grid): Add KB for implement built-in functions when using RowTemplate --- components/grid/selection/rows.md | 2 +- components/grid/templates/row.md | 2 +- ...ow-template-simulate-built-in-functions.md | 301 ++++++++++++++++++ 3 files changed, 303 insertions(+), 2 deletions(-) create mode 100644 knowledge-base/grid-row-template-simulate-built-in-functions.md diff --git a/components/grid/selection/rows.md b/components/grid/selection/rows.md index d47b232e46..775e725bd4 100644 --- a/components/grid/selection/rows.md +++ b/components/grid/selection/rows.md @@ -199,7 +199,7 @@ The [**Select All** checkbox in the Grid checkbox column]({%slug components/grid When using [Grid templates]({%slug components/grid/features/templates%}) with row selection: * If you are using a [Grid column template]({%slug grid-templates-column%}) and you have a clickable element in the template, you can check the knowledge base article on [how to prevent row selection when the user clicks another component in the Grid column template]({%slug grid-kb-row-selection-in-column-template%}). -* If you are using a [row template]({%slug components/grid/features/templates%}#row-template) the Grid cannot render a built-in [checkbox column]({%slug components/grid/columns/checkbox%}). You have to render checkboxes manually and handle their changed event to populate the `SelectedItems` collection of the Grid. You can find an example to get started in the following thread: [Grid Row Template with Selection - Unsure how to Bind to Selected Item](https://feedback.telerik.com/blazor/1463819-grid-row-template-with-selection-unsure-how-to-bind-to-selected-item). +* If you are using a [row template]({%slug components/grid/features/templates%}#row-template) the Grid cannot render a built-in [checkbox column]({%slug components/grid/columns/checkbox%}). You have to render checkboxes manually and handle their changed event to populate the `SelectedItems` collection of the Grid. You can find an example to get started in the following knowledge base article: [Implement Built-in Functions when Using Grid Row Template]({%slug grid-kb-row-template-simulate-built-in-functions%}). ### Selection and Row Drag and Drop diff --git a/components/grid/templates/row.md b/components/grid/templates/row.md index 5eaff83d69..e693a0539a 100644 --- a/components/grid/templates/row.md +++ b/components/grid/templates/row.md @@ -18,7 +18,7 @@ The contents of the row template must be `` elements and their number (or to You can use the `Context` attribute of the `` tag of the grid to set the name of the context variable. Its type is the model type to which the grid is bound. ->important Using the row template takes functionality away from the grid because it no longer controls its own rendering. For example, InCell and Inline editing could not render editors, detail templates will not be available, column resizing, locking, visibility and reordering cannot change the data cells anymore, only the headers, and Checkbox selection must be implemented by the app ([example](https://feedback.telerik.com/blazor/1463819)). +>important Using the row template takes functionality away from the grid because it no longer controls its own rendering. For example, InCell and Inline editing could not render editors, detail templates will not be available, column resizing, locking, visibility and reordering cannot change the data cells anymore, only the headers, and Checkbox selection must be implemented by the app. You can find an example to get started in the following knowledge base article: [Implement Built-in Functions when Using Grid Row Template]({%slug grid-kb-row-template-simulate-built-in-functions%}). >caption Using a row template diff --git a/knowledge-base/grid-row-template-simulate-built-in-functions.md b/knowledge-base/grid-row-template-simulate-built-in-functions.md new file mode 100644 index 0000000000..52bb5a7c63 --- /dev/null +++ b/knowledge-base/grid-row-template-simulate-built-in-functions.md @@ -0,0 +1,301 @@ +--- +title: Add the Built-in for the Grid Functions when Using Grid Row Template +description: How to implement built-in functions when using Grid RowTemplate +type: how-to +page_title: Implement Built-in Functions when Using Grid Row Template +slug: grid-kb-row-template-simulate-built-in-functions +position: +tags: grid, rowtemplate +ticketid: 1463819, 1465447, 1578974, 1605222, 1606211, 1609036, 1629221, 1667096 +res_type: kb +--- + +## Environment + + + + + + + + +
ProductGrid for Blazor
+ + +## Description + +This KB article answers the following questions: + +* How to [select rows]({%slug grid-selection-row%}) in Grid when using a [Row Template]({%slug grid-templates-row%})? +* How to add [Checkbox column]({%slug components/grid/columns/checkbox%}) in Grid when using a Row Template? I want to be able to select the row through its checkbox, but also to have the functionallity to [select all rows]({%slug components/grid/columns/checkbox%}#parameters) from the header of the Checkbox column. +* Do the built-in keyboard options to select a range of rows by clicking the **Shift** or **Ctrl** key work when using a Row Template? How to check the checkbox of the row when I select a row by clicking on the row? +* How to add [command column]({%slug components/grid/columns/command%}) in Grid when using a Row Template? +* When using a Row Template how to prevent selection of Grid rows when clicking on command buttons? +* How to implement Grid column [resizing]({%slug components/grid/columns/resize%}), [auto-fitting]({%slug components/grid/columns/resize%}#autofit-columns), [visibility]({%slug grid-columns-visible%}), [locking]({%slug grid-columns-frozen%}), and [reordering]({%slug components/grid/columns/reorder%}) when using a Row Template? + +## Solution + +By default, using the Row Template takes the majority of built-in functionalities away from the Grid because the Grid no longer controls its own rendering. This gives you the controll to add your own implementation for them. The example below showcases a possible implementation of some of the functionalities, such as row selection by clicking on a row and through a Checkbox column, column resizing and visibility, editing through command buttons, sorting, filtering. + +### Selection + +* In the [`` collection]({%slug components/grid/columns/bound%}#show-data-in-a-grid) add the [``]({%slug components/grid/columns/checkbox%}) and use the [`HeaderTemplate`]({%slug components/grid/columns/checkbox%}#header-template) to add a custom [CheckBox component]({%slug checkbox-overview%}). This CheckBox component handles the [select all rows]({%slug components/grid/columns/checkbox%}#parameters) functionallity. +* In the `` add a `` element with custom CheckBox component. Add a boolean property to the Grid model to indicate selection so you can use it for the state of this CheckBox. +* Handle the Grid [`SelectedItemsChanged` event]({%slug grid-selection-row%}#selecteditemschanged-event) and the CheckBox [`OnChange` event]({%slug checkbox-events%}#onchange) to manage the [`SelectedItems` collection]({%slug grid-selection-overview%}#access-selected-rows-or-cells). The `OnChange` event fires after the `SelectedItemsChanged` event. In this case you need to create a separate collection of selected items to persist the selected items when multiselecting through the CheckBox. + +### Editing, Sorting, Filtering + +The built-in editing, sorting, filtering will work if the RowTemplate structure is similar to an actual table and only for the first included in the `` element Grid data model property, if such. + +### Command column + +* In the `` collection add the [``]({%slug components/grid/columns/command%}) and use the [built-in `Save` and `Cancel` commands]({%slug components/grid/columns/command%}#built-in-commands). +* In the `` add a `` element with custom [Button component]({%slug components/button/overview%}) and handle the Grid items editing and deleting programatically. You can refer to the knowledge base article on how to [enter and exit Grid edit Mode programmatically]({%slug grid-kb-add-edit-state%}). +* Set the `stopPropagation` method of the `onclick` event to the `` element to prevent row selection when clicking on a command button. + +### Column Resizing, Auto-fitting, Visibility, Locking, Reordering + +* The column resizing and auto-fitting may work as usual, if the RowTemplate structure is similar to an actual table row with coresponding number of cells to the number of Grid columns. +* The column visibility depends if you include a `` element for the column in the Row Template. +* To implement column locking you need to add the `k-grid-content-sticky` class to the `` element for the columns that you want to be locked as well as calculate and set the correct `left` and `right` CSS properties as the content inside the template can be any (valid) HTML. +* When you want to have a column reordering you need to manage the `left` and `right` CSS properties to the `` elements in the RowTemplate. + +## Example + +>caption Row selection, Column resizing and visibility, Editing, Sorting, Filtering when using Row Template + +````CSHTML + + + Add + + + + + + + + + + @{ + if(article.IsSelected) + { +

Selected

+ } + else + { +

Not Selected

+ } + } + @article.Title + + + Programmatic Edit + Programmatic Delete + + + + + + + + + + + + + Update + Cancel + + + + +@code { + private TelerikGrid? GridRef { get; set; } + + private List GridData { get; set; } = new(); + + private IEnumerable SelectedItems { get; set; } = Enumerable.Empty(); + private List TempSelectedItemsCollection { get; set; } = new(); + private bool SelectAll { get; set; } + + #region Selection + private void SelectAllHandler(bool newValue) + { + SelectAll = newValue; + + foreach (var item in GridData) + { + item.IsSelected = SelectAll; + } + + // If SelectAll is true, assign all items to SelectedItems, + // else set it to an empty list + SelectedItems = SelectAll ? new List(GridData) : new List(); + TempSelectedItemsCollection = SelectAll ? new List(GridData) : new List(); + } + + protected void SelectedItemsChangedHandler(IEnumerable selectedItems) + { + foreach (var item in GridData) + { + item.IsSelected = false; + } + + // Use temporary collection to be able to persist the + // selected items when multiselecting with checkboxes + TempSelectedItemsCollection = SelectedItems.ToList(); + SelectedItems = selectedItems; + + foreach (var item in selectedItems) + { + item.IsSelected = true; + } + } + + private void OnCheckBoxChangeHandler(Guid itemId) + { + ArticleDto? currentItem = GridData.FirstOrDefault(a => a.Id == itemId); + + if (currentItem != null) + { + if (currentItem.IsSelected) + { + TempSelectedItemsCollection.Add(currentItem); + } + else + { + TempSelectedItemsCollection.Remove(currentItem); + } + } + + // The OnChange event fires after the SelectedItemsChanged + // thus we need to update the SelectedItems collection + SelectedItems = TempSelectedItemsCollection; + + foreach (var item in SelectedItems) + { + item.IsSelected = true; + } + } + #endregion Selection + #region Edit + + private void OnCreateHandler(GridCommandEventArgs args) + { + var createdItem = (ArticleDto)args.Item; + createdItem.Id = Guid.NewGuid(); + var rnd = new Random(); + createdItem.ImageUrl = $"https://demos.telerik.com/blazor-ui/images/photos/{rnd.Next(1, 30) % 7 + 1}.jpg"; + GridData.Insert(0, createdItem); + } + + private async Task OnProgrammaticEditHandler(Guid itemId) + { + if (GridData.Any() && GridRef != null) + { + var gridState = GridRef.GetState(); + + gridState.InsertedItem = null; + gridState.OriginalEditItem = GridData.Where(x => x.Id == itemId).First(); + gridState.EditItem = GridData.Where(x => x.Id == itemId).First().Clone(); + var rnd = new Random(); + gridState.EditItem.ImageUrl = $"https://demos.telerik.com/blazor-ui/images/photos/{rnd.Next(1, 30) % 7 + 1}.jpg"; + await GridRef.SetStateAsync(gridState); + } + } + + private void OnUpdateHandler(GridCommandEventArgs args) + { + var updatedItem = (ArticleDto)args.Item; + var index = GridData.FindIndex(i => i.Id == updatedItem.Id); + if (index != -1) + { + GridData[index] = updatedItem; + } + } + + private void OnProgrammaticDeleteHandler(Guid itemId) + { + if (GridData.Any() && GridRef != null) + { + var itemToDelete = GridData.Where(x => x.Id == itemId).First(); + GridData.Remove(itemToDelete); + + // Remove from SelectedItems collection + TempSelectedItemsCollection = SelectedItems.ToList(); + TempSelectedItemsCollection.Remove(itemToDelete); + SelectedItems = TempSelectedItemsCollection; + + GridRef.Rebind(); + } + } + #endregion Edit + #region DataGeneration + + private void GetGridData() + { + GridData = new List(); + + for (int i = 1; i <= 30; i++) + { + GridData.Add(new ArticleDto + { + Id = Guid.NewGuid(), + Title = "Article title " + i, + ImageUrl = $"https://demos.telerik.com/blazor-ui/images/photos/{i % 7 + 1}.jpg" + }); + } + } + + protected override void OnInitialized() + { + GetGridData(); + } + + public class ArticleDto + { + public Guid Id { get; set; } + public string Title { get; set; } + public string ImageUrl { get; set; } + public bool IsSelected { get; set; } + + public ArticleDto Clone() + { + return new ArticleDto() + { + Id = Id, + Title = Title, + ImageUrl = ImageUrl + }; + } + } + #endregion DataGeneration +} +```` + +## See Also + +* [Grid Row Template]({%slug grid-templates-row%}) +* [Grid Row Selection]({%slug grid-selection-row%}) +* [Grid Command Column]({%slug components/grid/columns/command%}) +* [Grid Column Resizing]({%slug components/grid/columns/resize%}) +* [Grid Column Auto-fitting]({%slug components/grid/columns/resize%}#autofit-columns) +* [Grid Column Visibility]({%slug grid-columns-visible%}) +* [Grid Column Locking]({%slug grid-columns-frozen%}) +* [Grid Column Reordering]({%slug components/grid/columns/reorder%}) +* [Enter And Exit Grid Edit Mode Programmatically]({%slug grid-kb-add-edit-state%}) From 1a89047dd56b74feba43370e978d2089a60db294 Mon Sep 17 00:00:00 2001 From: NansiYancheva <106161782+NansiYancheva@users.noreply.github.com> Date: Tue, 12 Nov 2024 15:48:38 +0200 Subject: [PATCH 02/23] Update knowledge-base/grid-row-template-simulate-built-in-functions.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- knowledge-base/grid-row-template-simulate-built-in-functions.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-row-template-simulate-built-in-functions.md b/knowledge-base/grid-row-template-simulate-built-in-functions.md index 52bb5a7c63..26b9c4f769 100644 --- a/knowledge-base/grid-row-template-simulate-built-in-functions.md +++ b/knowledge-base/grid-row-template-simulate-built-in-functions.md @@ -1,5 +1,5 @@ --- -title: Add the Built-in for the Grid Functions when Using Grid Row Template +title: Add the Grid Built-in Functions when Using Grid Row Template description: How to implement built-in functions when using Grid RowTemplate type: how-to page_title: Implement Built-in Functions when Using Grid Row Template From bba683a8887aeeb312d3c41ab78e4b37da34bd9c Mon Sep 17 00:00:00 2001 From: NansiYancheva <106161782+NansiYancheva@users.noreply.github.com> Date: Tue, 12 Nov 2024 15:49:04 +0200 Subject: [PATCH 03/23] Update knowledge-base/grid-row-template-simulate-built-in-functions.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- knowledge-base/grid-row-template-simulate-built-in-functions.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-row-template-simulate-built-in-functions.md b/knowledge-base/grid-row-template-simulate-built-in-functions.md index 26b9c4f769..12a1812e70 100644 --- a/knowledge-base/grid-row-template-simulate-built-in-functions.md +++ b/knowledge-base/grid-row-template-simulate-built-in-functions.md @@ -26,7 +26,7 @@ res_type: kb This KB article answers the following questions: -* How to [select rows]({%slug grid-selection-row%}) in Grid when using a [Row Template]({%slug grid-templates-row%})? +* How to [select rows]({%slug grid-selection-row%}) in the Grid when using a [Row Template]({%slug grid-templates-row%})? * How to add [Checkbox column]({%slug components/grid/columns/checkbox%}) in Grid when using a Row Template? I want to be able to select the row through its checkbox, but also to have the functionallity to [select all rows]({%slug components/grid/columns/checkbox%}#parameters) from the header of the Checkbox column. * Do the built-in keyboard options to select a range of rows by clicking the **Shift** or **Ctrl** key work when using a Row Template? How to check the checkbox of the row when I select a row by clicking on the row? * How to add [command column]({%slug components/grid/columns/command%}) in Grid when using a Row Template? From 11779e6c5dd83c46b1c5f07c118464f6739c4728 Mon Sep 17 00:00:00 2001 From: NansiYancheva <106161782+NansiYancheva@users.noreply.github.com> Date: Tue, 12 Nov 2024 15:49:17 +0200 Subject: [PATCH 04/23] Update knowledge-base/grid-row-template-simulate-built-in-functions.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- knowledge-base/grid-row-template-simulate-built-in-functions.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-row-template-simulate-built-in-functions.md b/knowledge-base/grid-row-template-simulate-built-in-functions.md index 12a1812e70..950a834669 100644 --- a/knowledge-base/grid-row-template-simulate-built-in-functions.md +++ b/knowledge-base/grid-row-template-simulate-built-in-functions.md @@ -27,7 +27,7 @@ res_type: kb This KB article answers the following questions: * How to [select rows]({%slug grid-selection-row%}) in the Grid when using a [Row Template]({%slug grid-templates-row%})? -* How to add [Checkbox column]({%slug components/grid/columns/checkbox%}) in Grid when using a Row Template? I want to be able to select the row through its checkbox, but also to have the functionallity to [select all rows]({%slug components/grid/columns/checkbox%}#parameters) from the header of the Checkbox column. +* How to add a [Checkbox column]({%slug components/grid/columns/checkbox%}) in the Grid when using a Row Template? I want to be able to select the row through its checkbox, but also to have the functionality to [select all rows]({%slug components/grid/columns/checkbox%}#parameters) from the header of the Checkbox column. * Do the built-in keyboard options to select a range of rows by clicking the **Shift** or **Ctrl** key work when using a Row Template? How to check the checkbox of the row when I select a row by clicking on the row? * How to add [command column]({%slug components/grid/columns/command%}) in Grid when using a Row Template? * When using a Row Template how to prevent selection of Grid rows when clicking on command buttons? From 3b3f05a6b8669fc7e00b0f6470d8dba48f351f4d Mon Sep 17 00:00:00 2001 From: NansiYancheva <106161782+NansiYancheva@users.noreply.github.com> Date: Tue, 12 Nov 2024 15:49:28 +0200 Subject: [PATCH 05/23] Update knowledge-base/grid-row-template-simulate-built-in-functions.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- knowledge-base/grid-row-template-simulate-built-in-functions.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-row-template-simulate-built-in-functions.md b/knowledge-base/grid-row-template-simulate-built-in-functions.md index 950a834669..a26a04a369 100644 --- a/knowledge-base/grid-row-template-simulate-built-in-functions.md +++ b/knowledge-base/grid-row-template-simulate-built-in-functions.md @@ -28,7 +28,7 @@ This KB article answers the following questions: * How to [select rows]({%slug grid-selection-row%}) in the Grid when using a [Row Template]({%slug grid-templates-row%})? * How to add a [Checkbox column]({%slug components/grid/columns/checkbox%}) in the Grid when using a Row Template? I want to be able to select the row through its checkbox, but also to have the functionality to [select all rows]({%slug components/grid/columns/checkbox%}#parameters) from the header of the Checkbox column. -* Do the built-in keyboard options to select a range of rows by clicking the **Shift** or **Ctrl** key work when using a Row Template? How to check the checkbox of the row when I select a row by clicking on the row? +* Do the built-in keyboard options to select a range of rows by clicking the **Shift** or **Ctrl** key work when using a Row Template? How to check the checkbox of the row when I select a row by clicking the row? * How to add [command column]({%slug components/grid/columns/command%}) in Grid when using a Row Template? * When using a Row Template how to prevent selection of Grid rows when clicking on command buttons? * How to implement Grid column [resizing]({%slug components/grid/columns/resize%}), [auto-fitting]({%slug components/grid/columns/resize%}#autofit-columns), [visibility]({%slug grid-columns-visible%}), [locking]({%slug grid-columns-frozen%}), and [reordering]({%slug components/grid/columns/reorder%}) when using a Row Template? From 48020bf8df2334a23f9891a0ada07f143f46c943 Mon Sep 17 00:00:00 2001 From: NansiYancheva <106161782+NansiYancheva@users.noreply.github.com> Date: Tue, 12 Nov 2024 15:49:36 +0200 Subject: [PATCH 06/23] Update knowledge-base/grid-row-template-simulate-built-in-functions.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- knowledge-base/grid-row-template-simulate-built-in-functions.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-row-template-simulate-built-in-functions.md b/knowledge-base/grid-row-template-simulate-built-in-functions.md index a26a04a369..faad294339 100644 --- a/knowledge-base/grid-row-template-simulate-built-in-functions.md +++ b/knowledge-base/grid-row-template-simulate-built-in-functions.md @@ -29,7 +29,7 @@ This KB article answers the following questions: * How to [select rows]({%slug grid-selection-row%}) in the Grid when using a [Row Template]({%slug grid-templates-row%})? * How to add a [Checkbox column]({%slug components/grid/columns/checkbox%}) in the Grid when using a Row Template? I want to be able to select the row through its checkbox, but also to have the functionality to [select all rows]({%slug components/grid/columns/checkbox%}#parameters) from the header of the Checkbox column. * Do the built-in keyboard options to select a range of rows by clicking the **Shift** or **Ctrl** key work when using a Row Template? How to check the checkbox of the row when I select a row by clicking the row? -* How to add [command column]({%slug components/grid/columns/command%}) in Grid when using a Row Template? +* How to add a [command column]({%slug components/grid/columns/command%}) in the Grid when using a Row Template? * When using a Row Template how to prevent selection of Grid rows when clicking on command buttons? * How to implement Grid column [resizing]({%slug components/grid/columns/resize%}), [auto-fitting]({%slug components/grid/columns/resize%}#autofit-columns), [visibility]({%slug grid-columns-visible%}), [locking]({%slug grid-columns-frozen%}), and [reordering]({%slug components/grid/columns/reorder%}) when using a Row Template? From b77ef536af0efb5eb226ae2e1529c084240da63c Mon Sep 17 00:00:00 2001 From: NansiYancheva <106161782+NansiYancheva@users.noreply.github.com> Date: Tue, 12 Nov 2024 15:49:57 +0200 Subject: [PATCH 07/23] Update knowledge-base/grid-row-template-simulate-built-in-functions.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- knowledge-base/grid-row-template-simulate-built-in-functions.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-row-template-simulate-built-in-functions.md b/knowledge-base/grid-row-template-simulate-built-in-functions.md index faad294339..5e492cbab1 100644 --- a/knowledge-base/grid-row-template-simulate-built-in-functions.md +++ b/knowledge-base/grid-row-template-simulate-built-in-functions.md @@ -45,7 +45,7 @@ By default, using the Row Template takes the majority of built-in functionalitie ### Editing, Sorting, Filtering -The built-in editing, sorting, filtering will work if the RowTemplate structure is similar to an actual table and only for the first included in the `` element Grid data model property, if such. +The built-in editing, sorting, and filtering will work if the RowTemplate structure is similar to an actual table and only for the first Grid data model property included in the `` element, if any. ### Command column From 9e1bda0f2ca6d273541bd34655fc4d372e559486 Mon Sep 17 00:00:00 2001 From: NansiYancheva <106161782+NansiYancheva@users.noreply.github.com> Date: Tue, 12 Nov 2024 15:50:10 +0200 Subject: [PATCH 08/23] Update knowledge-base/grid-row-template-simulate-built-in-functions.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- knowledge-base/grid-row-template-simulate-built-in-functions.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-row-template-simulate-built-in-functions.md b/knowledge-base/grid-row-template-simulate-built-in-functions.md index 5e492cbab1..cc51835ccd 100644 --- a/knowledge-base/grid-row-template-simulate-built-in-functions.md +++ b/knowledge-base/grid-row-template-simulate-built-in-functions.md @@ -50,7 +50,7 @@ The built-in editing, sorting, and filtering will work if the RowTemplate struct ### Command column * In the `` collection add the [``]({%slug components/grid/columns/command%}) and use the [built-in `Save` and `Cancel` commands]({%slug components/grid/columns/command%}#built-in-commands). -* In the `` add a `` element with custom [Button component]({%slug components/button/overview%}) and handle the Grid items editing and deleting programatically. You can refer to the knowledge base article on how to [enter and exit Grid edit Mode programmatically]({%slug grid-kb-add-edit-state%}). +* In the `` add a `` element with custom [Button component]({%slug components/button/overview%}) and handle the Grid items editing and deleting programmatically. You can refer to the knowledge base article on how to [enter and exit Grid edit mode programmatically]({%slug grid-kb-add-edit-state%}). * Set the `stopPropagation` method of the `onclick` event to the `` element to prevent row selection when clicking on a command button. ### Column Resizing, Auto-fitting, Visibility, Locking, Reordering From 0702aa6b889eb0de038f53385426e95a6a454475 Mon Sep 17 00:00:00 2001 From: NansiYancheva <106161782+NansiYancheva@users.noreply.github.com> Date: Tue, 12 Nov 2024 15:50:21 +0200 Subject: [PATCH 09/23] Update knowledge-base/grid-row-template-simulate-built-in-functions.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- knowledge-base/grid-row-template-simulate-built-in-functions.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-row-template-simulate-built-in-functions.md b/knowledge-base/grid-row-template-simulate-built-in-functions.md index cc51835ccd..ab669867c6 100644 --- a/knowledge-base/grid-row-template-simulate-built-in-functions.md +++ b/knowledge-base/grid-row-template-simulate-built-in-functions.md @@ -51,7 +51,7 @@ The built-in editing, sorting, and filtering will work if the RowTemplate struct * In the `` collection add the [``]({%slug components/grid/columns/command%}) and use the [built-in `Save` and `Cancel` commands]({%slug components/grid/columns/command%}#built-in-commands). * In the `` add a `` element with custom [Button component]({%slug components/button/overview%}) and handle the Grid items editing and deleting programmatically. You can refer to the knowledge base article on how to [enter and exit Grid edit mode programmatically]({%slug grid-kb-add-edit-state%}). -* Set the `stopPropagation` method of the `onclick` event to the `` element to prevent row selection when clicking on a command button. +* Set the `stopPropagation` method of the `onclick` event to the `` element to prevent row selection when clicking a command button. ### Column Resizing, Auto-fitting, Visibility, Locking, Reordering From 34c7f0024d859abfe22121f8365149d50daeadf8 Mon Sep 17 00:00:00 2001 From: NansiYancheva <106161782+NansiYancheva@users.noreply.github.com> Date: Tue, 12 Nov 2024 15:50:34 +0200 Subject: [PATCH 10/23] Update knowledge-base/grid-row-template-simulate-built-in-functions.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- knowledge-base/grid-row-template-simulate-built-in-functions.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-row-template-simulate-built-in-functions.md b/knowledge-base/grid-row-template-simulate-built-in-functions.md index ab669867c6..ad58c61a66 100644 --- a/knowledge-base/grid-row-template-simulate-built-in-functions.md +++ b/knowledge-base/grid-row-template-simulate-built-in-functions.md @@ -53,7 +53,7 @@ The built-in editing, sorting, and filtering will work if the RowTemplate struct * In the `` add a `` element with custom [Button component]({%slug components/button/overview%}) and handle the Grid items editing and deleting programmatically. You can refer to the knowledge base article on how to [enter and exit Grid edit mode programmatically]({%slug grid-kb-add-edit-state%}). * Set the `stopPropagation` method of the `onclick` event to the `` element to prevent row selection when clicking a command button. -### Column Resizing, Auto-fitting, Visibility, Locking, Reordering +### Column Resizing, Auto-Fitting, Visibility, Locking, Reordering * The column resizing and auto-fitting may work as usual, if the RowTemplate structure is similar to an actual table row with coresponding number of cells to the number of Grid columns. * The column visibility depends if you include a `` element for the column in the Row Template. From cbe15a3154728f3c0dd6a79d3d03f44835edf315 Mon Sep 17 00:00:00 2001 From: NansiYancheva <106161782+NansiYancheva@users.noreply.github.com> Date: Tue, 12 Nov 2024 15:51:09 +0200 Subject: [PATCH 11/23] Update knowledge-base/grid-row-template-simulate-built-in-functions.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> --- knowledge-base/grid-row-template-simulate-built-in-functions.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-row-template-simulate-built-in-functions.md b/knowledge-base/grid-row-template-simulate-built-in-functions.md index ad58c61a66..37fa3107f4 100644 --- a/knowledge-base/grid-row-template-simulate-built-in-functions.md +++ b/knowledge-base/grid-row-template-simulate-built-in-functions.md @@ -1,6 +1,6 @@ --- title: Add the Grid Built-in Functions when Using Grid Row Template -description: How to implement built-in functions when using Grid RowTemplate +description: Learn how to implement built-in Grid functions like checkbox or command columns when using the Grid's row template type: how-to page_title: Implement Built-in Functions when Using Grid Row Template slug: grid-kb-row-template-simulate-built-in-functions From 51b3e3608d8141458965667559cfa9ddad48ab9a Mon Sep 17 00:00:00 2001 From: NansiYancheva <106161782+NansiYancheva@users.noreply.github.com> Date: Tue, 12 Nov 2024 15:52:11 +0200 Subject: [PATCH 12/23] Update knowledge-base/grid-row-template-simulate-built-in-functions.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> --- knowledge-base/grid-row-template-simulate-built-in-functions.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-row-template-simulate-built-in-functions.md b/knowledge-base/grid-row-template-simulate-built-in-functions.md index 37fa3107f4..f20988cf73 100644 --- a/knowledge-base/grid-row-template-simulate-built-in-functions.md +++ b/knowledge-base/grid-row-template-simulate-built-in-functions.md @@ -57,7 +57,7 @@ The built-in editing, sorting, and filtering will work if the RowTemplate struct * The column resizing and auto-fitting may work as usual, if the RowTemplate structure is similar to an actual table row with coresponding number of cells to the number of Grid columns. * The column visibility depends if you include a `` element for the column in the Row Template. -* To implement column locking you need to add the `k-grid-content-sticky` class to the `` element for the columns that you want to be locked as well as calculate and set the correct `left` and `right` CSS properties as the content inside the template can be any (valid) HTML. +* To implement column locking, add the `k-grid-content-sticky` class to the `` element of the columns that you want locked, and calculate and set the correct `left` and `right` CSS properties, as the content inside the template can be any valid HTML. * When you want to have a column reordering you need to manage the `left` and `right` CSS properties to the `` elements in the RowTemplate. ## Example From 57fe8755246958f5a49f69056addadd441469fbb Mon Sep 17 00:00:00 2001 From: NansiYancheva <106161782+NansiYancheva@users.noreply.github.com> Date: Tue, 12 Nov 2024 15:52:24 +0200 Subject: [PATCH 13/23] Update knowledge-base/grid-row-template-simulate-built-in-functions.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> --- knowledge-base/grid-row-template-simulate-built-in-functions.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-row-template-simulate-built-in-functions.md b/knowledge-base/grid-row-template-simulate-built-in-functions.md index f20988cf73..b313d87a06 100644 --- a/knowledge-base/grid-row-template-simulate-built-in-functions.md +++ b/knowledge-base/grid-row-template-simulate-built-in-functions.md @@ -62,7 +62,7 @@ The built-in editing, sorting, and filtering will work if the RowTemplate struct ## Example ->caption Row selection, Column resizing and visibility, Editing, Sorting, Filtering when using Row Template +>caption Row selection, Column resizing and visibility, Editing, Sorting, and Filtering when using Row Template ````CSHTML Date: Tue, 12 Nov 2024 15:53:08 +0200 Subject: [PATCH 14/23] Update knowledge-base/grid-row-template-simulate-built-in-functions.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- knowledge-base/grid-row-template-simulate-built-in-functions.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-row-template-simulate-built-in-functions.md b/knowledge-base/grid-row-template-simulate-built-in-functions.md index b313d87a06..f6deff5dc4 100644 --- a/knowledge-base/grid-row-template-simulate-built-in-functions.md +++ b/knowledge-base/grid-row-template-simulate-built-in-functions.md @@ -30,7 +30,7 @@ This KB article answers the following questions: * How to add a [Checkbox column]({%slug components/grid/columns/checkbox%}) in the Grid when using a Row Template? I want to be able to select the row through its checkbox, but also to have the functionality to [select all rows]({%slug components/grid/columns/checkbox%}#parameters) from the header of the Checkbox column. * Do the built-in keyboard options to select a range of rows by clicking the **Shift** or **Ctrl** key work when using a Row Template? How to check the checkbox of the row when I select a row by clicking the row? * How to add a [command column]({%slug components/grid/columns/command%}) in the Grid when using a Row Template? -* When using a Row Template how to prevent selection of Grid rows when clicking on command buttons? +* When using a Row Template how to prevent the selection of Grid rows when clicking on command buttons? * How to implement Grid column [resizing]({%slug components/grid/columns/resize%}), [auto-fitting]({%slug components/grid/columns/resize%}#autofit-columns), [visibility]({%slug grid-columns-visible%}), [locking]({%slug grid-columns-frozen%}), and [reordering]({%slug components/grid/columns/reorder%}) when using a Row Template? ## Solution From 6423f1d18437a0147e92dfec24bbfa181556702c Mon Sep 17 00:00:00 2001 From: NansiYancheva <106161782+NansiYancheva@users.noreply.github.com> Date: Tue, 12 Nov 2024 15:53:29 +0200 Subject: [PATCH 15/23] Update knowledge-base/grid-row-template-simulate-built-in-functions.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- knowledge-base/grid-row-template-simulate-built-in-functions.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-row-template-simulate-built-in-functions.md b/knowledge-base/grid-row-template-simulate-built-in-functions.md index f6deff5dc4..0710e50145 100644 --- a/knowledge-base/grid-row-template-simulate-built-in-functions.md +++ b/knowledge-base/grid-row-template-simulate-built-in-functions.md @@ -35,7 +35,7 @@ This KB article answers the following questions: ## Solution -By default, using the Row Template takes the majority of built-in functionalities away from the Grid because the Grid no longer controls its own rendering. This gives you the controll to add your own implementation for them. The example below showcases a possible implementation of some of the functionalities, such as row selection by clicking on a row and through a Checkbox column, column resizing and visibility, editing through command buttons, sorting, filtering. +By default, using the Row Template takes the majority of built-in functionalities away from the Grid because the Grid no longer controls its own rendering. This gives you the control to add your own implementation for them. The example below showcases a possible implementation of some of the functionalities, such as row selection by clicking on a row and through a Checkbox column, column resizing and visibility, editing through command buttons, sorting, filtering. ### Selection From b4bf5ee4a58189f278596ffce35731f9b7258174 Mon Sep 17 00:00:00 2001 From: NansiYancheva <106161782+NansiYancheva@users.noreply.github.com> Date: Tue, 12 Nov 2024 15:54:30 +0200 Subject: [PATCH 16/23] Update knowledge-base/grid-row-template-simulate-built-in-functions.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> --- knowledge-base/grid-row-template-simulate-built-in-functions.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-row-template-simulate-built-in-functions.md b/knowledge-base/grid-row-template-simulate-built-in-functions.md index 0710e50145..4bcb4ec71f 100644 --- a/knowledge-base/grid-row-template-simulate-built-in-functions.md +++ b/knowledge-base/grid-row-template-simulate-built-in-functions.md @@ -58,7 +58,7 @@ The built-in editing, sorting, and filtering will work if the RowTemplate struct * The column resizing and auto-fitting may work as usual, if the RowTemplate structure is similar to an actual table row with coresponding number of cells to the number of Grid columns. * The column visibility depends if you include a `` element for the column in the Row Template. * To implement column locking, add the `k-grid-content-sticky` class to the `` element of the columns that you want locked, and calculate and set the correct `left` and `right` CSS properties, as the content inside the template can be any valid HTML. -* When you want to have a column reordering you need to manage the `left` and `right` CSS properties to the `` elements in the RowTemplate. +* For column reordering, manage the `left` and `right` CSS properties on the `` elements within the Row Template. ## Example From 4c5ce071ba7e2823fd3b2b828592f900e968ff48 Mon Sep 17 00:00:00 2001 From: NansiYancheva <106161782+NansiYancheva@users.noreply.github.com> Date: Tue, 12 Nov 2024 15:54:42 +0200 Subject: [PATCH 17/23] Update knowledge-base/grid-row-template-simulate-built-in-functions.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- knowledge-base/grid-row-template-simulate-built-in-functions.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-row-template-simulate-built-in-functions.md b/knowledge-base/grid-row-template-simulate-built-in-functions.md index 4bcb4ec71f..c60726e792 100644 --- a/knowledge-base/grid-row-template-simulate-built-in-functions.md +++ b/knowledge-base/grid-row-template-simulate-built-in-functions.md @@ -245,7 +245,7 @@ The built-in editing, sorting, and filtering will work if the RowTemplate struct } } #endregion Edit - #region DataGeneration + #region Data Generation private void GetGridData() { From 55b4c6971aff1597c9ab00d07fe0c15e5a406b76 Mon Sep 17 00:00:00 2001 From: NansiYancheva <106161782+NansiYancheva@users.noreply.github.com> Date: Tue, 12 Nov 2024 15:55:10 +0200 Subject: [PATCH 18/23] Update knowledge-base/grid-row-template-simulate-built-in-functions.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- knowledge-base/grid-row-template-simulate-built-in-functions.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-row-template-simulate-built-in-functions.md b/knowledge-base/grid-row-template-simulate-built-in-functions.md index c60726e792..95acd5fa6e 100644 --- a/knowledge-base/grid-row-template-simulate-built-in-functions.md +++ b/knowledge-base/grid-row-template-simulate-built-in-functions.md @@ -105,7 +105,7 @@ The built-in editing, sorting, and filtering will work if the RowTemplate struct Programmatic Edit - Programmatic Delete + Programmatic Delete From 34f79c8dfa8abbfb57d83e9f96cc6ff8cac3a641 Mon Sep 17 00:00:00 2001 From: NansiYancheva <106161782+NansiYancheva@users.noreply.github.com> Date: Tue, 12 Nov 2024 15:56:51 +0200 Subject: [PATCH 19/23] Update knowledge-base/grid-row-template-simulate-built-in-functions.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> --- knowledge-base/grid-row-template-simulate-built-in-functions.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-row-template-simulate-built-in-functions.md b/knowledge-base/grid-row-template-simulate-built-in-functions.md index 95acd5fa6e..34d999a86d 100644 --- a/knowledge-base/grid-row-template-simulate-built-in-functions.md +++ b/knowledge-base/grid-row-template-simulate-built-in-functions.md @@ -40,7 +40,7 @@ By default, using the Row Template takes the majority of built-in functionalitie ### Selection * In the [`` collection]({%slug components/grid/columns/bound%}#show-data-in-a-grid) add the [``]({%slug components/grid/columns/checkbox%}) and use the [`HeaderTemplate`]({%slug components/grid/columns/checkbox%}#header-template) to add a custom [CheckBox component]({%slug checkbox-overview%}). This CheckBox component handles the [select all rows]({%slug components/grid/columns/checkbox%}#parameters) functionallity. -* In the `` add a `` element with custom CheckBox component. Add a boolean property to the Grid model to indicate selection so you can use it for the state of this CheckBox. +* In the ``, add a `` element with a custom CheckBox component. Add a Boolean property to the Grid model to indicate selection so you can use it for the state of this CheckBox. * Handle the Grid [`SelectedItemsChanged` event]({%slug grid-selection-row%}#selecteditemschanged-event) and the CheckBox [`OnChange` event]({%slug checkbox-events%}#onchange) to manage the [`SelectedItems` collection]({%slug grid-selection-overview%}#access-selected-rows-or-cells). The `OnChange` event fires after the `SelectedItemsChanged` event. In this case you need to create a separate collection of selected items to persist the selected items when multiselecting through the CheckBox. ### Editing, Sorting, Filtering From b936a90a3ad16e1a7a5ad70835c3f1f7e5847111 Mon Sep 17 00:00:00 2001 From: NansiYancheva <106161782+NansiYancheva@users.noreply.github.com> Date: Tue, 12 Nov 2024 15:57:48 +0200 Subject: [PATCH 20/23] Update knowledge-base/grid-row-template-simulate-built-in-functions.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> --- knowledge-base/grid-row-template-simulate-built-in-functions.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-row-template-simulate-built-in-functions.md b/knowledge-base/grid-row-template-simulate-built-in-functions.md index 34d999a86d..4ba602e089 100644 --- a/knowledge-base/grid-row-template-simulate-built-in-functions.md +++ b/knowledge-base/grid-row-template-simulate-built-in-functions.md @@ -41,7 +41,7 @@ By default, using the Row Template takes the majority of built-in functionalitie * In the [`` collection]({%slug components/grid/columns/bound%}#show-data-in-a-grid) add the [``]({%slug components/grid/columns/checkbox%}) and use the [`HeaderTemplate`]({%slug components/grid/columns/checkbox%}#header-template) to add a custom [CheckBox component]({%slug checkbox-overview%}). This CheckBox component handles the [select all rows]({%slug components/grid/columns/checkbox%}#parameters) functionallity. * In the ``, add a `` element with a custom CheckBox component. Add a Boolean property to the Grid model to indicate selection so you can use it for the state of this CheckBox. -* Handle the Grid [`SelectedItemsChanged` event]({%slug grid-selection-row%}#selecteditemschanged-event) and the CheckBox [`OnChange` event]({%slug checkbox-events%}#onchange) to manage the [`SelectedItems` collection]({%slug grid-selection-overview%}#access-selected-rows-or-cells). The `OnChange` event fires after the `SelectedItemsChanged` event. In this case you need to create a separate collection of selected items to persist the selected items when multiselecting through the CheckBox. +* Handle the Grid's [`SelectedItemsChanged` event]({%slug grid-selection-row%}#selecteditemschanged-event) and the CheckBox's [`OnChange` event]({%slug checkbox-events%}#onchange) to manage the [`SelectedItems` collection]({%slug grid-selection-overview%}#access-selected-rows-or-cells). The `OnChange` event fires after the `SelectedItemsChanged` event. In this case, you need to create a separate collection of selected items to persist the selected items when multiselecting through the CheckBox. ### Editing, Sorting, Filtering From ed13ca904e83feb8f89c1f5e041eb6622ad83c35 Mon Sep 17 00:00:00 2001 From: NansiYancheva <106161782+NansiYancheva@users.noreply.github.com> Date: Tue, 12 Nov 2024 15:58:20 +0200 Subject: [PATCH 21/23] Update knowledge-base/grid-row-template-simulate-built-in-functions.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> --- knowledge-base/grid-row-template-simulate-built-in-functions.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-row-template-simulate-built-in-functions.md b/knowledge-base/grid-row-template-simulate-built-in-functions.md index 4ba602e089..fbb0644a49 100644 --- a/knowledge-base/grid-row-template-simulate-built-in-functions.md +++ b/knowledge-base/grid-row-template-simulate-built-in-functions.md @@ -47,7 +47,7 @@ By default, using the Row Template takes the majority of built-in functionalitie The built-in editing, sorting, and filtering will work if the RowTemplate structure is similar to an actual table and only for the first Grid data model property included in the `` element, if any. -### Command column +### Command Column * In the `` collection add the [``]({%slug components/grid/columns/command%}) and use the [built-in `Save` and `Cancel` commands]({%slug components/grid/columns/command%}#built-in-commands). * In the `` add a `` element with custom [Button component]({%slug components/button/overview%}) and handle the Grid items editing and deleting programmatically. You can refer to the knowledge base article on how to [enter and exit Grid edit mode programmatically]({%slug grid-kb-add-edit-state%}). From 3cc6c78f00679783ba471b3c695a04ceda7cd86b Mon Sep 17 00:00:00 2001 From: NansiYancheva <106161782+NansiYancheva@users.noreply.github.com> Date: Tue, 12 Nov 2024 15:59:04 +0200 Subject: [PATCH 22/23] Update knowledge-base/grid-row-template-simulate-built-in-functions.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> --- knowledge-base/grid-row-template-simulate-built-in-functions.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-row-template-simulate-built-in-functions.md b/knowledge-base/grid-row-template-simulate-built-in-functions.md index fbb0644a49..85a50c84ee 100644 --- a/knowledge-base/grid-row-template-simulate-built-in-functions.md +++ b/knowledge-base/grid-row-template-simulate-built-in-functions.md @@ -55,7 +55,7 @@ The built-in editing, sorting, and filtering will work if the RowTemplate struct ### Column Resizing, Auto-Fitting, Visibility, Locking, Reordering -* The column resizing and auto-fitting may work as usual, if the RowTemplate structure is similar to an actual table row with coresponding number of cells to the number of Grid columns. +* Column resizing and auto-fitting will work if the Row Template structure resembles an actual table row, with a corresponding number of cells matching the Grid columns. * The column visibility depends if you include a `` element for the column in the Row Template. * To implement column locking, add the `k-grid-content-sticky` class to the `` element of the columns that you want locked, and calculate and set the correct `left` and `right` CSS properties, as the content inside the template can be any valid HTML. * For column reordering, manage the `left` and `right` CSS properties on the `` elements within the Row Template. From 79d6c918c06e59f48e87cad318d623ee96885c64 Mon Sep 17 00:00:00 2001 From: NansiYancheva Date: Tue, 12 Nov 2024 16:33:14 +0200 Subject: [PATCH 23/23] docs(Grid): Update KB after review --- ...ow-template-simulate-built-in-functions.md | 44 ++++++++++++------- 1 file changed, 27 insertions(+), 17 deletions(-) diff --git a/knowledge-base/grid-row-template-simulate-built-in-functions.md b/knowledge-base/grid-row-template-simulate-built-in-functions.md index 85a50c84ee..946e02b84e 100644 --- a/knowledge-base/grid-row-template-simulate-built-in-functions.md +++ b/knowledge-base/grid-row-template-simulate-built-in-functions.md @@ -1,6 +1,6 @@ --- -title: Add the Grid Built-in Functions when Using Grid Row Template -description: Learn how to implement built-in Grid functions like checkbox or command columns when using the Grid's row template +title: Add the Grid Built-In Functions When Using Grid Row Template +description: Learn how to implement built-in Grid functions like CheckBoxColumn or CommandColumn when using the Grid's Row Template type: how-to page_title: Implement Built-in Functions when Using Grid Row Template slug: grid-kb-row-template-simulate-built-in-functions @@ -27,37 +27,41 @@ res_type: kb This KB article answers the following questions: * How to [select rows]({%slug grid-selection-row%}) in the Grid when using a [Row Template]({%slug grid-templates-row%})? -* How to add a [Checkbox column]({%slug components/grid/columns/checkbox%}) in the Grid when using a Row Template? I want to be able to select the row through its checkbox, but also to have the functionality to [select all rows]({%slug components/grid/columns/checkbox%}#parameters) from the header of the Checkbox column. -* Do the built-in keyboard options to select a range of rows by clicking the **Shift** or **Ctrl** key work when using a Row Template? How to check the checkbox of the row when I select a row by clicking the row? +* How to add a [checkbox column]({%slug components/grid/columns/checkbox%}) in the Grid when using a Row Template? I want to be able to select the row through its checkbox, but also to have the functionality to [select all rows]({%slug components/grid/columns/checkbox%}#parameters) from the header of the checkbox column. +* Do the built-in keyboard options to select a range of rows by clicking the `Shift` or `Ctrl` key work when using a Row Template? How to check the checkbox of the row when I select a row by clicking the row? * How to add a [command column]({%slug components/grid/columns/command%}) in the Grid when using a Row Template? -* When using a Row Template how to prevent the selection of Grid rows when clicking on command buttons? +* When using a Row Template, how to prevent the selection of Grid rows when clicking on command buttons? * How to implement Grid column [resizing]({%slug components/grid/columns/resize%}), [auto-fitting]({%slug components/grid/columns/resize%}#autofit-columns), [visibility]({%slug grid-columns-visible%}), [locking]({%slug grid-columns-frozen%}), and [reordering]({%slug components/grid/columns/reorder%}) when using a Row Template? ## Solution -By default, using the Row Template takes the majority of built-in functionalities away from the Grid because the Grid no longer controls its own rendering. This gives you the control to add your own implementation for them. The example below showcases a possible implementation of some of the functionalities, such as row selection by clicking on a row and through a Checkbox column, column resizing and visibility, editing through command buttons, sorting, filtering. +By default, using the Row Template disables most built-in functionalities of the Grid because the Grid no longer controls its own rendering. This lets you add custom implementations for these features. The [example below](#example) shows one way to implement functionalities such as row selection (both by clicking on a row and through a checkbox column), column resizing and visibility, editing through command buttons, sorting, and filtering. ### Selection -* In the [`` collection]({%slug components/grid/columns/bound%}#show-data-in-a-grid) add the [``]({%slug components/grid/columns/checkbox%}) and use the [`HeaderTemplate`]({%slug components/grid/columns/checkbox%}#header-template) to add a custom [CheckBox component]({%slug checkbox-overview%}). This CheckBox component handles the [select all rows]({%slug components/grid/columns/checkbox%}#parameters) functionallity. -* In the ``, add a `` element with a custom CheckBox component. Add a Boolean property to the Grid model to indicate selection so you can use it for the state of this CheckBox. -* Handle the Grid's [`SelectedItemsChanged` event]({%slug grid-selection-row%}#selecteditemschanged-event) and the CheckBox's [`OnChange` event]({%slug checkbox-events%}#onchange) to manage the [`SelectedItems` collection]({%slug grid-selection-overview%}#access-selected-rows-or-cells). The `OnChange` event fires after the `SelectedItemsChanged` event. In this case, you need to create a separate collection of selected items to persist the selected items when multiselecting through the CheckBox. +To implement custom selection functionality: + +* In the [`` collection]({%slug components/grid/columns/bound%}#show-data-in-a-grid) add the [``]({%slug components/grid/columns/checkbox%}) and use the [`HeaderTemplate`]({%slug components/grid/columns/checkbox%}#header-template) to add a [CheckBox component]({%slug checkbox-overview%}). This CheckBox component handles the [select all rows]({%slug components/grid/columns/checkbox%}#parameters) functionallity. +* In the Row Template, add a `` element with a CheckBox component. Add a Boolean property to the Grid model to indicate selection so you can use it for the state of this CheckBox. +* Handle the Grid's [`SelectedItemsChanged` event]({%slug grid-selection-row%}#selecteditemschanged-event) and the CheckBox's [`OnChange` event]({%slug checkbox-events%}#onchange) to manage the [`SelectedItems` collection]({%slug grid-selection-overview%}#access-selected-rows-or-cells). The `OnChange` event fires after the `SelectedItemsChanged` event. In this case, you need to create a separate collection of selected items to persist the selected items when multiselecting through the checkbox column. ### Editing, Sorting, Filtering -The built-in editing, sorting, and filtering will work if the RowTemplate structure is similar to an actual table and only for the first Grid data model property included in the `` element, if any. +The built-in editing, sorting, and filtering will work if the Row Template structure is similar to an actual table and only for the first Grid data model property included in the `` element, if any. ### Command Column +To implement a custom command column: + * In the `` collection add the [``]({%slug components/grid/columns/command%}) and use the [built-in `Save` and `Cancel` commands]({%slug components/grid/columns/command%}#built-in-commands). -* In the `` add a `` element with custom [Button component]({%slug components/button/overview%}) and handle the Grid items editing and deleting programmatically. You can refer to the knowledge base article on how to [enter and exit Grid edit mode programmatically]({%slug grid-kb-add-edit-state%}). +* In the Row Template add a `` element with a [Button component]({%slug components/button/overview%}) and handle the Grid items editing and deleting programmatically. Refer to the knowledge base article on how to [enter and exit Grid edit mode programmatically]({%slug grid-kb-add-edit-state%}). * Set the `stopPropagation` method of the `onclick` event to the `` element to prevent row selection when clicking a command button. ### Column Resizing, Auto-Fitting, Visibility, Locking, Reordering * Column resizing and auto-fitting will work if the Row Template structure resembles an actual table row, with a corresponding number of cells matching the Grid columns. -* The column visibility depends if you include a `` element for the column in the Row Template. -* To implement column locking, add the `k-grid-content-sticky` class to the `` element of the columns that you want locked, and calculate and set the correct `left` and `right` CSS properties, as the content inside the template can be any valid HTML. +* Column visibility depends on including a `` element for the column in the Row Template. +* To implement column locking, add the `k-grid-content-sticky` class to the `` element of the columns that you want locked, and calculate and set the correct `left` and `right` CSS properties, as the content inside the Row Template can be any valid HTML. * For column reordering, manage the `left` and `right` CSS properties on the `` elements within the Row Template. ## Example @@ -69,7 +73,6 @@ The built-in editing, sorting, and filtering will work if the RowTemplate struct Data=@GridData Pageable="true" PageSize="15" - Page="1" Sortable="true" Resizable="true" FilterMode="@GridFilterMode.FilterMenu" @@ -134,6 +137,7 @@ The built-in editing, sorting, and filtering will work if the RowTemplate struct private bool SelectAll { get; set; } #region Selection + private void SelectAllHandler(bool newValue) { SelectAll = newValue; @@ -144,7 +148,7 @@ The built-in editing, sorting, and filtering will work if the RowTemplate struct } // If SelectAll is true, assign all items to SelectedItems, - // else set it to an empty list + // else set it to an empty list. SelectedItems = SelectAll ? new List(GridData) : new List(); TempSelectedItemsCollection = SelectAll ? new List(GridData) : new List(); } @@ -157,7 +161,7 @@ The built-in editing, sorting, and filtering will work if the RowTemplate struct } // Use temporary collection to be able to persist the - // selected items when multiselecting with checkboxes + // selected items when multiselecting with checkboxes. TempSelectedItemsCollection = SelectedItems.ToList(); SelectedItems = selectedItems; @@ -184,7 +188,7 @@ The built-in editing, sorting, and filtering will work if the RowTemplate struct } // The OnChange event fires after the SelectedItemsChanged - // thus we need to update the SelectedItems collection + // thus we need to update the SelectedItems collection. SelectedItems = TempSelectedItemsCollection; foreach (var item in SelectedItems) @@ -192,7 +196,9 @@ The built-in editing, sorting, and filtering will work if the RowTemplate struct item.IsSelected = true; } } + #endregion Selection + #region Edit private void OnCreateHandler(GridCommandEventArgs args) @@ -244,7 +250,9 @@ The built-in editing, sorting, and filtering will work if the RowTemplate struct GridRef.Rebind(); } } + #endregion Edit + #region Data Generation private void GetGridData() @@ -284,7 +292,9 @@ The built-in editing, sorting, and filtering will work if the RowTemplate struct }; } } + #endregion DataGeneration + } ````