diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/99-other/Grid_Demo_07_Increase_TextBox_Width.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/99-other/Grid_Demo_07_Increase_TextBox_Width.razor
new file mode 100644
index 000000000..2a6f7d4d5
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/99-other/Grid_Demo_07_Increase_TextBox_Width.razor
@@ -0,0 +1,65 @@
+
+
+
+
+ @context.Id
+
+
+ @context.FirstName
+
+
+ @context.LastName
+
+
+
+
+
+ @context.Email
+
+
+ @context.Company
+
+
+ @context.Designation
+
+
+ @context.DOJ
+
+
+ @context.IsActive
+
+
+
+
+
+@code {
+ private IEnumerable? employees;
+
+ private async Task> EmployeesDataProvider(GridDataProviderRequest request)
+ {
+ if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging
+ employees = GetEmployees(); // call a service or an API to pull the employees
+
+ return await Task.FromResult(request.ApplyTo(employees));
+ }
+
+ private IEnumerable GetEmployees()
+ {
+ return new List
+ {
+ new Employee3 { Id = 107, FirstName = "Alice", LastName = "Reddy", Email = "alice@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), Salary = 7700, IsActive = true },
+ new Employee3 { Id = 103, FirstName = "Bob", LastName = "Roy", Email = "bob@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), Salary = 19000, IsActive = true },
+ new Employee3 { Id = 106, FirstName = "John", LastName = "P", Email = "john@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), Salary = 12000, IsActive = true },
+ new Employee3 { Id = 104, FirstName = "Pop", LastName = "Two", Email = "pop@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), Salary = 19000, IsActive = false },
+ new Employee3 { Id = 105, FirstName = "Ronald", LastName = "Dire", Email = "ronald@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), Salary = 16500, IsActive = true },
+ new Employee3 { Id = 102, FirstName = "Line", LastName = "K", Email = "line@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), Salary = 24000, IsActive = true },
+ new Employee3 { Id = 101, FirstName = "Daniel", LastName = "Potter", Email = "daniel@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), Salary = 21000, IsActive = true },
+ new Employee3 { Id = 108, FirstName = "Zayne", LastName = "Simmons", Email = "zayne@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), Salary = 17850, IsActive = true },
+ new Employee3 { Id = 109, FirstName = "Isha", LastName = "Davison", Email = "isha@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), Salary = 8000, IsActive = true },
+ };
+ }
+}
\ No newline at end of file
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/99-other/Grid_Other_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/99-other/Grid_Other_Documentation.razor
index 571d0bae4..a7ab4319a 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/99-other/Grid_Other_Documentation.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/99-other/Grid_Other_Documentation.razor
@@ -42,6 +42,10 @@
+
+
@code {
private const string pageUrl = RouteConstants.Demos_Grid_OtherExamples_Documentation;
private const string pageTitle = "Blazor Grid - Other examples";