From 82df76b861509cbe1fd92cc7e7c7e2009af83d4d Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Fri, 26 Jul 2024 21:08:47 +0300
Subject: [PATCH] docs(grid): Revamp SetStateAsync examples (#2273)
* docs(grid): Update programmatic sort example
* refactor and polish sort and filter rowe examples
* docs(grid): Revamp SetStateAsync examples
---
_contentTemplates/grid/state.md | 856 +++++++++++++++++++++-------
components/grid/filter/searchbox.md | 95 +--
components/grid/state.md | 3 +
3 files changed, 642 insertions(+), 312 deletions(-)
diff --git a/_contentTemplates/grid/state.md b/_contentTemplates/grid/state.md
index a72acfd18..45a6dcc18 100644
--- a/_contentTemplates/grid/state.md
+++ b/_contentTemplates/grid/state.md
@@ -4,188 +4,378 @@
#set-sort-from-code
-@* This snippet shows how to set sorting state to the grid from your code *@
+@using Telerik.DataSource
-@using Telerik.DataSource;
-
-set sort from code
-
-
+
+
+ Sort Grid by HireDate
+
+
-
-
-
-
+
+
+
+
@code {
- private TelerikGrid GridRef { get; set; }
+ private TelerikGrid? GridRef { get; set; }
+
+ private List GridData { get; set; } = new();
+
+ private bool ShouldResetSortState { get; set; } = true;
private async Task SetGridSort()
{
- GridState desiredState = new GridState()
+ if (GridRef != null)
{
- SortDescriptors = new List()
+ var gridState = GridRef.GetState();
+
+ if (ShouldResetSortState)
{
- new SortDescriptor { Member = "Id", SortDirection = ListSortDirection.Descending }
+ // Remove any existing sorts.
+ gridState.SortDescriptors.Clear();
}
- };
- await GridRef.SetStateAsync(desiredState);
+ SortDescriptor? hireDateSortDescriptor = gridState.SortDescriptors
+ .Where(x => x.Member == nameof(Employee.HireDate)).FirstOrDefault();
+
+ if (hireDateSortDescriptor != null)
+ {
+ // Update the existing HireDate sort if it exists.
+ hireDateSortDescriptor.SortDirection = ListSortDirection.Descending;
+ }
+ else
+ {
+ // Add a new sort descriptor.
+ // In multi-column sorting scenarios
+ // you can also insert the new SortDescriptor
+ // before the existing ones to control the sort priority.
+ gridState.SortDescriptors.Add(new SortDescriptor()
+ {
+ Member = nameof(Employee.HireDate),
+ SortDirection = ListSortDirection.Descending
+ });
+ }
+
+ await GridRef.SetStateAsync(gridState);
+ }
}
- private IEnumerable MyData = Enumerable.Range(1, 30).Select(x => new SampleData
+ protected override void OnInitialized()
{
- Id = x,
- Name = "name " + x,
- Team = "team " + x % 5,
- HireDate = DateTime.Now.AddDays(-x).Date
- });
+ for (int i = 1; i <= 30; i++)
+ {
+ GridData.Add(new Employee()
+ {
+ Id = i,
+ Name = $"Name {i}",
+ Team = $"Team {i % 5 + 1}",
+ HireDate = DateTime.Today.AddDays(-Random.Shared.Next(1, 3000)),
+ IsOnLeave = i % 4 == 0 ? true : false
+ });
+ }
+ }
- public class SampleData
+ public class Employee
{
public int Id { get; set; }
- public string Name { get; set; }
- public string Team { get; set; }
+ public string Name { get; set; } = string.Empty;
+ public string Team { get; set; } = string.Empty;
public DateTime HireDate { get; set; }
+ public bool IsOnLeave { get; set; }
}
}
#end
-
#filter-row-from-code
-@* This snippet shows how to set filtering state to the grid from your code
- Applies to the FilterRow mode *@
-
-@using Telerik.DataSource;
-
-Filter From Code
+@using Telerik.DataSource
+ FilterMode="@GridFilterMode.FilterRow"
+ Height="400px">
+
+ Filter Grid by Team
+ Filter Grid by Team and HireDate
+
+ Remove All Filters
+
-
-
-
-
+
+
+
+
@code {
- private TelerikGrid GridRef { get; set; }
+ private TelerikGrid? GridRef { get; set; }
- private async Task SetGridFilter()
+ private List GridData { get; set; } = new();
+
+ private async Task SetGridFilters(bool shouldFilterSecondColumn)
{
- GridState desiredState = new GridState()
+ if (GridRef != null)
+ {
+ var gridState = GridRef.GetState();
+
+ // Find the Team CompositeFilterDescriptor if it exists.
+ CompositeFilterDescriptor? teamCFD = gridState.FilterDescriptors.Cast()
+ .Where(x => x.FilterDescriptors.Cast().First().Member == nameof(Employee.Team))
+ .FirstOrDefault();
+
+ if (teamCFD != null)
{
- FilterDescriptors = new List()
+ // Update the existing Team CompositeFilterDescriptor.
+
+ var teamFilterDescriptors = teamCFD.FilterDescriptors.Cast();
+
+ // When using a filter row, the column's CompositeFilterDescriptor
+ // always contains one FilterDescriptor.
+
+ FilterDescriptor firstTeamFD = teamFilterDescriptors.First();
+ firstTeamFD.Operator = FilterOperator.IsEqualTo;
+ firstTeamFD.Value = "Team 1";
+ }
+ else
+ {
+ // Create a new Team CompositeFilterDescriptor.
+
+ var teamFdCollection = new FilterDescriptorCollection();
+
+ teamFdCollection.Add(new FilterDescriptor()
{
- new CompositeFilterDescriptor(){
- FilterDescriptors = new FilterDescriptorCollection()
- {
- new FilterDescriptor() { Member = "Id", Operator = FilterOperator.IsGreaterThan, Value = 10, MemberType = typeof(int)}
- }
- },
- new CompositeFilterDescriptor()
- {
- FilterDescriptors = new FilterDescriptorCollection()
- {
- new FilterDescriptor() { Member = "Team", Operator = FilterOperator.Contains, Value = "3", MemberType = typeof(string) },
- }
- }
- }
- };
+ Member = nameof(Employee.Team),
+ MemberType = typeof(string),
+ Operator = FilterOperator.IsEqualTo,
+ Value = "Team 1"
+ });
+
+ // Add one CompositeFilterDescriptor per column.
+ gridState.FilterDescriptors.Add(new CompositeFilterDescriptor()
+ {
+ // The LogicalOperator property doesn't matter, because
+ // there is only one FilterDescritor in the CompositeFilterDescriptor.
+ FilterDescriptors = teamFdCollection
+ });
+ }
+
+ // Find the HireDate CompositeFilterDescriptor if it exists.
+ CompositeFilterDescriptor? hireDateCFD = gridState.FilterDescriptors.Cast()
+ .Where(x => x.FilterDescriptors.Cast().First().Member == nameof(Employee.HireDate))
+ .FirstOrDefault();
+
+ if (hireDateCFD != null)
+ {
+ // Instead of changing the existing CompositeFilterDescriptor,
+ // you can also remove it and create a new one.
+ gridState.FilterDescriptors.Remove(hireDateCFD);
+ }
+
+ if (shouldFilterSecondColumn)
+ {
+ var hireDateFdCollection = new FilterDescriptorCollection();
- await GridRef.SetStateAsync(desiredState);
+ hireDateFdCollection.Add(new FilterDescriptor()
+ {
+ Member = nameof(Employee.HireDate),
+ MemberType = typeof(DateTime),
+ Operator = FilterOperator.IsGreaterThanOrEqualTo,
+ Value = DateTime.Today.AddYears(-3)
+ });
+
+ gridState.FilterDescriptors.Add(new CompositeFilterDescriptor()
+ {
+ FilterDescriptors = hireDateFdCollection
+ });
+ }
+
+ await GridRef.SetStateAsync(gridState);
+ }
+ }
+
+ private async Task RemoveGridFilters()
+ {
+ if (GridRef != null)
+ {
+ var gridState = GridRef.GetState();
+
+ gridState.FilterDescriptors.Clear();
+
+ await GridRef.SetStateAsync(gridState);
+ }
}
- private IEnumerable GridData = Enumerable.Range(1, 30).Select(x => new SampleData
+ protected override void OnInitialized()
+ {
+ for (int i = 1; i <= 30; i++)
{
- Id = x,
- Name = "name " + x,
- Team = "team " + x % 5,
- HireDate = DateTime.Now.AddDays(-x).Date
- });
+ GridData.Add(new Employee()
+ {
+ Id = i,
+ Name = $"Name {i}",
+ Team = $"Team {i % 5 + 1}",
+ HireDate = DateTime.Today.AddDays(-Random.Shared.Next(1, 3000)),
+ IsOnLeave = i % 4 == 0 ? true : false
+ });
+ }
+ }
- public class SampleData
+ public class Employee
{
public int Id { get; set; }
- public string Name { get; set; }
- public string Team { get; set; }
+ public string Name { get; set; } = string.Empty;
+ public string Team { get; set; } = string.Empty;
public DateTime HireDate { get; set; }
+ public bool IsOnLeave { get; set; }
}
}
#end
#filter-menu-from-code
-@* This snippet shows how to set filtering state to the grid from your code
- Applies to the FilterMenu mode *@
-
-@using Telerik.DataSource;
-
-set filtering from code
+@using Telerik.DataSource
-
+
+
+ Filter Grid by Team 1
+ Filter Grid by Team 1 or 3
+
+ Remove All Filters
+
-
-
-
-
+
+
+
+
@code {
- private TelerikGrid GridRef { get; set; }
+ private TelerikGrid? GridRef { get; set; }
+
+ private List GridData { get; set; } = new();
- private async Task SetGridFilter()
+ private async Task SetTeamFilter(bool shouldSetSecondFilter)
{
- GridState desiredState = new GridState()
+ if (GridRef != null)
{
- FilterDescriptors = new List()
+ var gridState = GridRef.GetState();
+
+ // Find the Team CompositeFilterDescriptor if it exists.
+ CompositeFilterDescriptor? teamCFD = gridState.FilterDescriptors.Cast()
+ .Where(x => x.FilterDescriptors.Cast().First().Member == nameof(Employee.Team))
+ .FirstOrDefault();
+
+ if (teamCFD != null)
+ {
+ // Update the existing Team CompositeFilterDescriptor.
+
+ teamCFD.LogicalOperator = FilterCompositionLogicalOperator.Or;
+
+ var teamFilterDescriptors = teamCFD.FilterDescriptors.Cast();
+
+ // When using a filter menu, the column's CompositeFilterDescriptor
+ // always contains two FilterDescriptors.
+
+ FilterDescriptor firstTeamFD = teamFilterDescriptors.First();
+ firstTeamFD.Operator = FilterOperator.IsEqualTo;
+ firstTeamFD.Value = "Team 1";
+
+ // Set a null FilterDescriptor Value and IsEqualTo Operator
+ // to disable a filter.
+ FilterDescriptor secondTeamFD = teamFilterDescriptors.Last();
+ secondTeamFD.Operator = FilterOperator.IsEqualTo;
+ secondTeamFD.Value = shouldSetSecondFilter ? "Team 3" : null;
+ }
+ else
{
- new CompositeFilterDescriptor()
+ // Create a new Team CompositeFilterDescriptor.
+
+ var fdCollection = new FilterDescriptorCollection();
+
+ fdCollection.Add(new FilterDescriptor()
+ {
+ Member = nameof(Employee.Team),
+ MemberType = typeof(string),
+ Operator = FilterOperator.IsEqualTo,
+ Value = "Team 1"
+ });
+
+ fdCollection.Add(new FilterDescriptor()
{
- FilterDescriptors = new FilterDescriptorCollection()
- {
- new FilterDescriptor() { Member = "Id", Operator = FilterOperator.IsGreaterThan, Value = 5, MemberType = typeof(int) },
- new FilterDescriptor() { Member = "Id", Operator = FilterOperator.IsLessThan, Value = 20, MemberType = typeof(int) },
- },
- LogicalOperator = FilterCompositionLogicalOperator.And
- },
- new CompositeFilterDescriptor()
+ Member = nameof(Employee.Team),
+ MemberType = typeof(string),
+ Operator = FilterOperator.IsEqualTo,
+ Value = shouldSetSecondFilter ? "Team 3" : null
+ });
+
+ // Add one CompositeFilterDescriptor per column.
+ gridState.FilterDescriptors.Add(new CompositeFilterDescriptor()
{
- FilterDescriptors = new FilterDescriptorCollection()
- {
- new FilterDescriptor() { Member = "Team", Operator = FilterOperator.Contains, Value = "3", MemberType = typeof(string) },
- }
- }
+ LogicalOperator = FilterCompositionLogicalOperator.Or,
+ FilterDescriptors = fdCollection
+ });
}
- };
- await GridRef.SetStateAsync(desiredState);
+ await GridRef.SetStateAsync(gridState);
+ }
+ }
+
+ private async Task RemoveGridFilters()
+ {
+ if (GridRef != null)
+ {
+ var gridState = GridRef.GetState();
+
+ gridState.FilterDescriptors.Clear();
+
+ await GridRef.SetStateAsync(gridState);
+ }
}
- private IEnumerable MyData = Enumerable.Range(1, 30).Select(x => new SampleData
+ protected override void OnInitialized()
{
- Id = x,
- Name = "name " + x,
- Team = "team " + x % 5,
- HireDate = DateTime.Now.AddDays(-x).Date
- });
+ for (int i = 1; i <= 30; i++)
+ {
+ GridData.Add(new Employee()
+ {
+ Id = i,
+ Name = $"Name {i}",
+ Team = $"Team {i % 5 + 1}",
+ HireDate = DateTime.Today.AddDays(-Random.Shared.Next(1, 3000)),
+ IsOnLeave = i % 4 == 0 ? true : false
+ });
+ }
+ }
- public class SampleData
+ public class Employee
{
public int Id { get; set; }
- public string Name { get; set; }
- public string Team { get; set; }
+ public string Name { get; set; } = string.Empty;
+ public string Team { get; set; } = string.Empty;
public DateTime HireDate { get; set; }
+ public bool IsOnLeave { get; set; }
}
}
#end
@@ -198,195 +388,425 @@
#end
-#group-from-code
-@using Telerik.DataSource;
-set grouping from code
+#search-from-code
+@using Telerik.DataSource
-
+
+
+
+ Search Programmatically
+ Clear Search
+
-
-
-
-
-
+
+
@code {
- private TelerikGrid GridRef { get; set; }
+ private TelerikGrid? GridRef { get; set; }
+
+ private List GridData { get; set; } = new();
- private async Task SetGridGroup()
+ private async Task OnSearchButtonClick()
{
- GridState desiredState = new GridState()
+ if (GridRef != null)
{
- GroupDescriptors = new List()
+ var gridState = GridRef.GetState();
+
+ var searchString = $"{(char)Random.Shared.Next(97, 123)}{(char)Random.Shared.Next(97, 123)}";
+
+ var cfd = new CompositeFilterDescriptor();
+
+ cfd.LogicalOperator = FilterCompositionLogicalOperator.Or;
+ cfd.FilterDescriptors = new FilterDescriptorCollection();
+
+ // Add one FilterDesccriptor for each string column
+ cfd.FilterDescriptors.Add(new FilterDescriptor()
{
- new GroupDescriptor()
- {
- Member = "Team",
- MemberType = typeof(string)
- },
- new GroupDescriptor()
+ Member = nameof(GridModel.Name),
+ MemberType = typeof(string),
+ Operator = FilterOperator.Contains,
+ Value = searchString
+ });
+ cfd.FilterDescriptors.Add(new FilterDescriptor()
+ {
+ Member = nameof(GridModel.Description),
+ MemberType = typeof(string),
+ Operator = FilterOperator.Contains,
+ Value = searchString
+ });
+
+ gridState.SearchFilter = cfd;
+
+ await GridRef.SetStateAsync(gridState);
+ }
+ }
+
+ private async Task OnClearButtonClick()
+ {
+ if (GridRef != null)
+ {
+ var gridState = GridRef.GetState();
+
+ (gridState.SearchFilter as CompositeFilterDescriptor)?.FilterDescriptors.Clear();
+
+ await GridRef.SetStateAsync(gridState);
+ }
+ }
+
+ protected override void OnInitialized()
+ {
+ for (int i = 1; i <= 500; i++)
+ {
+ GridData.Add(new GridModel()
+ {
+ Id = i,
+ Name = $"{(char)Random.Shared.Next(65, 91)}{(char)Random.Shared.Next(65, 91)} " +
+ $"{(char)Random.Shared.Next(65, 91)}{(char)Random.Shared.Next(65, 91)} {i}",
+ Description = $"{(char)Random.Shared.Next(97, 123)}{(char)Random.Shared.Next(97, 123)} " +
+ $"{(char)Random.Shared.Next(97, 123)}{(char)Random.Shared.Next(97, 123)} {i}"
+ });
+ }
+ }
+
+ public class GridModel
+ {
+ public int Id { get; set; }
+ public string Name { get; set; } = string.Empty;
+ public string Description { get; set; } = string.Empty;
+ }
+}
+#end
+
+
+#group-from-code
+@using Telerik.DataSource
+
+
+
+ Group Grid by Team
+ Group Grid by Team and IsOnLeave
+
+ Remove All Groups
+
+
+
+
+
+
+
+
+
+@code {
+ private TelerikGrid? GridRef { get; set; }
+
+ private List GridData { get; set; } = new();
+
+ private async Task SetGridGroups(bool shouldGroupBySecondColumn)
+ {
+ if (GridRef != null)
+ {
+ var gridState = GridRef.GetState();
+
+ // Remove any existing Grid groups
+ // You can also modify or reorder existing GroupDescriptors.
+ gridState.GroupDescriptors.Clear();
+
+ gridState.GroupDescriptors.Add(new GroupDescriptor()
+ {
+ Member = nameof(Employee.Team),
+ MemberType = typeof(string),
+ // https://feedback.telerik.com/blazor/1544196-allow-sorting-the-grouped-column
+ SortDirection = ListSortDirection.Ascending
+ });
+
+ if (shouldGroupBySecondColumn)
+ {
+ gridState.GroupDescriptors.Add(new GroupDescriptor()
{
- Member = "IsOnLeave",
+ Member = nameof(Employee.IsOnLeave),
MemberType = typeof(bool),
- SortDirection = ListSortDirection.Descending // not required, but a feature not yet available through the UI
- }
- },
- // choose indexes of groups to be collapsed (they are all expanded by default)
- CollapsedGroups = new List() { 0 },
- };
+ // https://feedback.telerik.com/blazor/1544196-allow-sorting-the-grouped-column
+ SortDirection = ListSortDirection.Descending
+ });
+ }
+
+ await GridRef.SetStateAsync(gridState);
+ }
+ }
+
+ private async Task RemoveGridGroups()
+ {
+ if (GridRef != null)
+ {
+ var gridState = GridRef.GetState();
+
+ gridState.GroupDescriptors.Clear();
- await GridRef.SetStateAsync(desiredState);
+ await GridRef.SetStateAsync(gridState);
+ }
}
- private IEnumerable MyData = Enumerable.Range(1, 30).Select(x => new SampleData
+ protected override void OnInitialized()
{
- Id = x,
- Name = "name " + x,
- Team = "team " + x % 5,
- IsOnLeave = x % 2 == 0,
- HireDate = DateTime.Now.AddDays(-x).Date
- });
-
- public class SampleData
+ for (int i = 1; i <= 30; i++)
+ {
+ GridData.Add(new Employee()
+ {
+ Id = i,
+ Name = $"Name {i}",
+ Team = $"Team {i % 5 + 1}",
+ HireDate = DateTime.Today.AddDays(-Random.Shared.Next(1, 3000)),
+ IsOnLeave = i % 4 == 0 ? true : false
+ });
+ }
+ }
+
+ public class Employee
{
public int Id { get; set; }
- public string Name { get; set; }
- public string Team { get; set; }
- public bool IsOnLeave { get; set; }
+ public string Name { get; set; } = string.Empty;
+ public string Team { get; set; } = string.Empty;
public DateTime HireDate { get; set; }
+ public bool IsOnLeave { get; set; }
}
}
#end
#expand-hierarchy-from-code
-@using Telerik.DataSource;
-
-Expand hierarchy from code
-
-
-
- @{
- var employee = context as MainModel;
-
-
-
-
-
-
- }
-
+
+
+
+
+ Expand Category
+
+ Expand All Categories
+
+ Collapse All Categories
+
-
-
+
+
+
+
+
+
+
+
+
+
+
@code {
- private TelerikGrid GridRef { get; set; }
+ private TelerikGrid? GridRef { get; set; }
+
+ private List CategoryData { get; set; } = new();
- private async Task ExpandHierarchy()
+ private List ProductData { get; set; } = new();
+
+ private int DropDownListCategoryId { get; set; } = 1;
+
+ private async Task ExpandCategory()
{
- var gridState = GridRef.GetState();
+ if (GridRef != null)
+ {
+ var gridState = GridRef.GetState();
+
+ var categoryToExpand = CategoryData.First(x => x.Id == DropDownListCategoryId);
- //expand the first two rows
- gridState.ExpandedItems = new List {
- salesTeamMembers[0],
- salesTeamMembers[1]
- };
+ gridState.ExpandedItems.Add(categoryToExpand);
- await GridRef.SetStateAsync(gridState);
+ await GridRef.SetStateAsync(gridState);
+ }
}
- private List salesTeamMembers { get; set; }
+ private async Task ExpandAll()
+ {
+ if (GridRef != null)
+ {
+ var gridState = GridRef.GetState();
- protected override void OnInitialized()
+ gridState.ExpandedItems = CategoryData;
+
+ await GridRef.SetStateAsync(gridState);
+ }
+ }
+
+ private async Task CollapseAll()
{
- salesTeamMembers = GenerateData();
+ if (GridRef != null)
+ {
+ var gridState = GridRef.GetState();
+
+ gridState.ExpandedItems.Clear();
+
+ await GridRef.SetStateAsync(gridState);
+ }
}
- private List GenerateData()
+ protected override void OnInitialized()
{
- List data = new List();
- for (int i = 1; i <= 5; i++)
+ var categoryCount = 3;
+
+ for (int i = 1; i <= categoryCount; i++)
+ {
+ CategoryData.Add(new Category()
+ {
+ Id = i,
+ Name = $"Category {i}"
+ });
+ }
+
+ for (int i = 1; i <= 12; i++)
{
- MainModel mdl = new MainModel { Id = i, Name = $"Name {i}" };
- mdl.Orders = Enumerable.Range(1, 3).Select(x => new DetailsModel {
- OrderId = i * 100 + x, DealSize = (x ^ i) + 1 }
- ).ToList();
- data.Add(mdl);
+ ProductData.Add(new Product()
+ {
+ Id = i,
+ CategoryId = i % categoryCount + 1,
+ Name = $"Product {i}",
+ Price = Random.Shared.Next(1, 100) * 1.23m,
+ Quantity = Random.Shared.Next(0, 100)
+ });
}
- return data;
}
- public class MainModel
+ public class Category
{
public int Id { get; set; }
- public string Name { get; set; }
- public List Orders { get; set; }
+ public string Name { get; set; } = string.Empty;
}
- public class DetailsModel
+ public class Product
{
- public int OrderId { get; set; }
- public double DealSize { get; set; }
+ public int Id { get; set; }
+ public int CategoryId { get; set; }
+ public string Name { get; set; } = string.Empty;
+ public decimal Price { get; set; }
+ public int Quantity { get; set; }
}
}
#end
#column-state-from-code
-Reoder Name and Price Columns
-
+
+ Reorder Price and Quantity
+ Make Id Column Last
+
+ Reset Column Order
+
-
-
-
-
+
+
+
+
+
@code {
- private TelerikGrid GridRef { get; set; }
+ private TelerikGrid? GridRef { get; set; }
- private List GridData { get; set; }
+ private List GridData { get; set; } = new();
- private async Task OnButtonClick()
+ private async Task ReorderPriceAndQuantity()
{
- var gridState = GridRef.GetState();
+ if (GridRef != null)
+ {
+ var gridState = GridRef.GetState();
+
+ // Get column by its index in the Grid markup.
+ var priceColumnState = gridState.ColumnStates.ElementAt(2);
+ var priceColumnIndex = priceColumnState.Index;
- var nameColState = gridState.ColumnStates.ElementAt(0);
- var nameColIndex = nameColState.Index;
- var priceColState = gridState.ColumnStates.ElementAt(1);
- var priceColIndex = priceColState.Index;
+ // Get column by a parameter such as Field or Id.
+ var quantityColumnState = gridState.ColumnStates.First(x => x.Field == nameof(Product.Quantity));
+ var quantityColumnIndex = quantityColumnState.Index;
- nameColState.Index = priceColIndex;
- priceColState.Index = nameColIndex;
+ priceColumnState.Index = quantityColumnIndex;
+ quantityColumnState.Index = priceColumnIndex;
- await GridRef.SetStateAsync(gridState);
+ await GridRef.SetStateAsync(gridState);
+ }
}
- protected override void OnInitialized()
+ private async Task MakeIdColumnLast()
+ {
+ if (GridRef != null)
+ {
+ var gridState = GridRef.GetState();
+
+ var idColumnState = gridState.ColumnStates.First(x => x.Field == nameof(Product.Id));
+ var oldIdIndex = idColumnState.Index;
+
+ idColumnState.Index = gridState.ColumnStates.Count - 1;
+
+ foreach (var columnState in gridState.ColumnStates)
+ {
+ // Decrement the indexes of all columns that were after Id.
+ if (columnState.Field != nameof(Product.Id) && columnState.Index > oldIdIndex)
+ {
+ --columnState.Index;
+ }
+ }
+
+ await GridRef.SetStateAsync(gridState);
+ }
+ }
+
+ private async Task ResetColumnOrder()
{
- GridData = new List();
- var rnd = new Random();
+ if (GridRef != null)
+ {
+ var gridState = GridRef.GetState();
+
+ gridState.ColumnStates = new List();
+
+ await GridRef.SetStateAsync(gridState);
+ }
+ }
+ protected override void OnInitialized()
+ {
for (int i = 1; i <= 5; i++)
{
GridData.Add(new Product()
{
Id = i,
Name = $"Product {i}",
- Price = (decimal)rnd.Next(1, 100),
- ReleaseDate = DateTime.Now.AddDays(-rnd.Next(60, 1000)),
- Active = i % 3 == 0
+ Price = Random.Shared.Next(1, 100) * 1.23m,
+ Quantity = Random.Shared.Next(0, 100),
+ ReleaseDate = DateTime.Today.AddDays(-Random.Shared.Next(150, 3000))
});
}
}
@@ -396,8 +816,8 @@
public int Id { get; set; }
public string Name { get; set; } = string.Empty;
public decimal Price { get; set; }
+ public int Quantity { get; set; }
public DateTime ReleaseDate { get; set; }
- public bool Active { get; set; }
}
}
#end
diff --git a/components/grid/filter/searchbox.md b/components/grid/filter/searchbox.md
index 8086f7021..aac3cf521 100644
--- a/components/grid/filter/searchbox.md
+++ b/components/grid/filter/searchbox.md
@@ -75,100 +75,7 @@ You can set or remove the search filters programmatically through the `SearchFil
>caption Set and clear the Grid SearchBox filter programmatically
````CSHTML
-@using Telerik.DataSource
-
-
-
-
- Search Programmatically
- Clear Search
-
-
-
-
-
-
-
-@code {
- private TelerikGrid? GridRef { get; set; }
-
- private List GridData { get; set; } = new();
-
- private async Task OnSearchButtonClick()
- {
- if (GridRef != null)
- {
- var gridState = GridRef.GetState();
-
- var searchString = $"{(char)Random.Shared.Next(97, 123)}{(char)Random.Shared.Next(97, 123)}";
-
- var cfd = new CompositeFilterDescriptor();
-
- cfd.LogicalOperator = FilterCompositionLogicalOperator.Or;
- cfd.FilterDescriptors = new FilterDescriptorCollection();
-
- // Add one FilterDesccriptor for each string column
- cfd.FilterDescriptors.Add(new FilterDescriptor()
- {
- Member = nameof(SampleModel.Name),
- MemberType = typeof(string),
- Operator = FilterOperator.Contains,
- Value = searchString
- });
- cfd.FilterDescriptors.Add(new FilterDescriptor()
- {
- Member = nameof(SampleModel.Description),
- MemberType = typeof(string),
- Operator = FilterOperator.Contains,
- Value = searchString
- });
-
- gridState.SearchFilter = cfd;
-
- await GridRef.SetStateAsync(gridState);
- }
- }
-
- private async Task OnClearButtonClick()
- {
- if (GridRef != null)
- {
- var gridState = GridRef.GetState();
-
- (gridState.SearchFilter as CompositeFilterDescriptor)?.FilterDescriptors.Clear();
-
- await GridRef.SetStateAsync(gridState);
- }
- }
-
- protected override void OnInitialized()
- {
- for (int i = 1; i <= 500; i++)
- {
- GridData.Add(new SampleModel()
- {
- Id = i,
- Name = $"{(char)Random.Shared.Next(65, 91)}{(char)Random.Shared.Next(65, 91)} " +
- $"{(char)Random.Shared.Next(65, 91)}{(char)Random.Shared.Next(65, 91)} {i}",
- Description = $"{(char)Random.Shared.Next(97, 123)}{(char)Random.Shared.Next(97, 123)} " +
- $"{(char)Random.Shared.Next(97, 123)}{(char)Random.Shared.Next(97, 123)} {i}"
- });
- }
- }
-
- public class SampleModel
- {
- public int Id { get; set; }
- public string Name { get; set; } = string.Empty;
- public string Description { get; set; } = string.Empty;
- }
-}
+@[template](/_contentTemplates/grid/state.md#search-from-code)
````
@[template](/_contentTemplates/grid/state.md#initial-state)
diff --git a/components/grid/state.md b/components/grid/state.md
index afef7ac5a..5ca4ab48f 100644
--- a/components/grid/state.md
+++ b/components/grid/state.md
@@ -397,6 +397,9 @@ The tabs below show how to set the Grid state and control filtering, sorting and
````FilterMenu
@[template](/_contentTemplates/grid/state.md#filter-menu-from-code)
````
+````Search
+@[template](/_contentTemplates/grid/state.md#search-from-code)
+````
````Grouping
@[template](/_contentTemplates/grid/state.md#group-from-code)
````