From 527b7f5a976e421fbec06ba6bbc5ab23bba2e014 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 e235139581930e1b3e617b963c6c369c6f0efa22 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 727659eee81c5c49253ed0bc15c128424940e10b 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 acf499afaf9002ab5cb15193caaf35034c52d9ae 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 b6c6a42f39a35197ad4a68d5b787aa9a4db83e1b 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 14765cad33bfd6f2657a55edf1bc267a5113fd8c 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 4808713662b168eca19009ecf33b276a52d56ef6 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 158a0b9fac751e7dc942239200df1c9bdac3bd13 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 31efc1a0ded1915cc83d9ad62a07120d7aa44c5b 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 b101752fe74096f35898bba3a3061cae8b8c0b5d 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 4d09ee9d20645fda5d15a004bf31b7f5138cc050 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 c53b4c43ef76622560a740b2cb2de9d15a721916 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 9a730d39d06c2982fa0362752169d8ae48392df5 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 4ce5be4ed9fcfcb296d8e87a08c6fb4bf536b44a 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 34c67ebd2f5b167ed74b7cb7069e6a92f6b8813c 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 b7c0033dfdb2c2e11604ba6ac6df689d3bcc6382 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 d26f211f99d04f64d6fc29fad64f0187c2fe1164 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 5409e80a29d28f5bc131af72edca62863ba1bb0e 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 2ad5d6518f09720560c2a8a6347eaa4b033113e0 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 97c5c11150cef970859576a5f5fa0bf9ed8fd4cd 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 2740ac2f32d3570b13e4efa6e1ef7649ef0bb5f3 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 3e64626967516e21ed0b18a1a053af6dc5d431f6 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 + } ````