Grid demos updated

vikramlearning · Jun 28, 2024 · 2b0006c · 2b0006c
1 parent 705525a
commit 2b0006c
Show file tree

Hide file tree

Showing 43 changed files with 858 additions and 718 deletions.
diff --git a/...t_Side_Filtering_Paging_And_Sorting.razor → ...t_Side_Filtering_Paging_And_Sorting.razor b/...t_Side_Filtering_Paging_And_Sorting.razor → ...t_Side_Filtering_Paging_And_Sorting.razor
@@ -10,21 +10,23 @@
       SelectedItemsChanged="OnSelectedItemsChanged"
       IsResponsive="true">
 
-    <GridColumn TItem="Employee1" HeaderText="Id" PropertyName="Id" SortKeySelector="item => item.Id">
-        @context.Id
-    </GridColumn>
-    <GridColumn TItem="Employee1" HeaderText="Employee Name" PropertyName="Name" SortKeySelector="item => item.Name">
-        @context.Name
-    </GridColumn>
-    <GridColumn TItem="Employee1" HeaderText="Designation" PropertyName="Designation" SortKeySelector="item => item.Designation">
-        @context.Designation
-    </GridColumn>
-    <GridColumn TItem="Employee1" HeaderText="DOJ" PropertyName="DOJ" SortKeySelector="item => item.DOJ">
-        @context.DOJ
-    </GridColumn>
-    <GridColumn TItem="Employee1" HeaderText="Active" PropertyName="IsActive" SortKeySelector="item => item.IsActive">
-        @context.IsActive
-    </GridColumn>
+    <GridColumns>
+        <GridColumn TItem="Employee1" HeaderText="Id" PropertyName="Id" SortKeySelector="item => item.Id">
+            @context.Id
+        </GridColumn>
+        <GridColumn TItem="Employee1" HeaderText="Employee Name" PropertyName="Name" SortKeySelector="item => item.Name">
+            @context.Name
+        </GridColumn>
+        <GridColumn TItem="Employee1" HeaderText="Designation" PropertyName="Designation" SortKeySelector="item => item.Designation">
+            @context.Designation
+        </GridColumn>
+        <GridColumn TItem="Employee1" HeaderText="DOJ" PropertyName="DOJ" SortKeySelector="item => item.DOJ">
+            @context.DOJ
+        </GridColumn>
+        <GridColumn TItem="Employee1" HeaderText="Active" PropertyName="IsActive" SortKeySelector="item => item.IsActive">
+            @context.IsActive
+        </GridColumn>
+    </GridColumns>
 
 </Grid>
 

diff --git a/...r_Side_Filtering_Paging_And_Sorting.razor → ...r_Side_Filtering_Paging_And_Sorting.razor b/...r_Side_Filtering_Paging_And_Sorting.razor → ...r_Side_Filtering_Paging_And_Sorting.razor
@@ -1,5 +1,5 @@
 <Grid TItem="Customer2"
-Class="table table-hover table-bordered table-striped"
+      Class="table table-hover table-bordered table-striped"
       DataProvider="CustomersDataProvider"
       AllowFiltering="true"
       AllowPaging="true"

diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/01-Overview/Grid_Overview_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/01-Overview/Grid_Overview_Documentation.razor
@@ -11,10 +11,10 @@
 <CarbonAds />
 
 <SectionHeading Size="HeadingSize.H2" Text="Client side filtering, paging, and sorting" PageUrl="@pageUrl" HashTagName="client-side-filtering-paging-sorting" />
-<Demo Type="typeof(Grid_Demo_04_Client_Side_Filtering_Paging_And_Sorting)" Tabs="true" />
+<Demo Type="typeof(Grid_Demo_01_Client_Side_Filtering_Paging_And_Sorting)" Tabs="true" />
 
 <SectionHeading Size="HeadingSize.H2" Text="Server side filtering, paging and sorting" PageUrl="@pageUrl" HashTagName="server-side-filtering-paging-sorting" />
-<Demo Type="typeof(Grid_Demo_07_Server_Side_Filtering_Paging_And_Sorting)" Tabs="true" />
+<Demo Type="typeof(Grid_Demo_02_Server_Side_Filtering_Paging_And_Sorting)" Tabs="true" />
 
 @code {
     private const string pageUrl = "/grid/overview";

diff --git a/...strap.Demo.RCL/Components/Pages/Grid/02-data-binding/Grid_DataBinding_Documentation.razor b/...strap.Demo.RCL/Components/Pages/Grid/02-data-binding/Grid_DataBinding_Documentation.razor
@@ -11,7 +11,7 @@
 
 <SectionHeading Size="HeadingSize.H2" Text="Data parameter - Assign collection" PageUrl="@pageUrl" HashTagName="data-parameter-assign-collection" />
 <div class="mb-3">Assign a collection to the <code>Data</code> parameter to render the grid dynamically. The example below will render different department employees in the individual grid.</div>
-<Demo Type="typeof(Grid_Demo_17_A_Data_Parameter_Assign_Collection)" Tabs="true" />
+<Demo Type="typeof(Grid_Demo_01_Data_Parameter_Assign_Collection)" Tabs="true" />
 
 <SectionHeading Size="HeadingSize.H2" Text="Data parameter - Update collection" PageUrl="@pageUrl" HashTagName="data-parameter-update-collection" />
 <div class="mb-3">You can update the collection assigned to the <code>Data</code> parameter. In the below example, the grid will render the updated collection.</div>
@@ -24,7 +24,7 @@
         This new collection is assigned to the <b>employees</b> variable. Now, the <b>employees</b> variable has a new reference. So the grid will refresh automatically. An explicit grid refresh call is not required.
     </p>
 </Callout>
-<Demo Type="typeof(Grid_Demo_17_B_Data_Parameter_Update_Collection)" Tabs="true" />
+<Demo Type="typeof(Grid_Demo_02_Data_Parameter_Update_Collection)" Tabs="true" />
 
 @code {
     private const string pageUrl = "/grid/data-binding";

diff --git a/..._A_Data_Parameter_Assign_Collection.razor → ...01_Data_Parameter_Assign_Collection.razor b/..._A_Data_Parameter_Assign_Collection.razor → ...01_Data_Parameter_Assign_Collection.razor
@@ -1,22 +1,28 @@
 @foreach (var department in departments)
 {
     <p>@department.Name Employees:</p>
-    <Grid TItem="Employee1" class="table table-hover border-top" Data="department.Employees">
-        <GridColumn TItem="Employee1" HeaderText="Id" PropertyName="Id">
-            @context.Id
-        </GridColumn>
-        <GridColumn TItem="Employee1" HeaderText="Employee Name" PropertyName="Name">
-            @context.Name
-        </GridColumn>
-        <GridColumn TItem="Employee1" HeaderText="Designation" PropertyName="Designation">
-            @context.Designation
-        </GridColumn>
-        <GridColumn TItem="Employee1" HeaderText="DOJ" PropertyName="DOJ">
-            @context.DOJ
-        </GridColumn>
-        <GridColumn TItem="Employee1" HeaderText="Active" PropertyName="IsActive">
-            @context.IsActive
-        </GridColumn>
+    <Grid TItem="Employee1"
+          Class="table table-hover border-top"
+          Data="department.Employees">
+
+        <GridColumns>
+            <GridColumn TItem="Employee1" HeaderText="Id" PropertyName="Id">
+                @context.Id
+            </GridColumn>
+            <GridColumn TItem="Employee1" HeaderText="Employee Name" PropertyName="Name">
+                @context.Name
+            </GridColumn>
+            <GridColumn TItem="Employee1" HeaderText="Designation" PropertyName="Designation">
+                @context.Designation
+            </GridColumn>
+            <GridColumn TItem="Employee1" HeaderText="DOJ" PropertyName="DOJ">
+                @context.DOJ
+            </GridColumn>
+            <GridColumn TItem="Employee1" HeaderText="Active" PropertyName="IsActive">
+                @context.IsActive
+            </GridColumn>
+        </GridColumns>
+
     </Grid>
 }
 

diff --git a/..._B_Data_Parameter_Update_Collection.razor → ...02_Data_Parameter_Update_Collection.razor b/..._B_Data_Parameter_Update_Collection.razor → ...02_Data_Parameter_Update_Collection.razor
@@ -1,22 +1,29 @@
 <Button Type="ButtonType.Button" Color="ButtonColor.Primary" @onclick="AddEmployee"> Add Employee </Button>
 <Button Type="ButtonType.Button" Color="ButtonColor.Primary" @onclick="AddEmployee2"> Add Employee 2 </Button>
 
-<Grid @ref="grid" TItem="Employee1" class="table table-hover table-bordered table-striped mt-3" Data="employees">
-    <GridColumn TItem="Employee1" HeaderText="Id" PropertyName="Id">
-        @context.Id
-    </GridColumn>
-    <GridColumn TItem="Employee1" HeaderText="Employee Name" PropertyName="Name">
-        @context.Name
-    </GridColumn>
-    <GridColumn TItem="Employee1" HeaderText="Designation" PropertyName="Designation">
-        @context.Designation
-    </GridColumn>
-    <GridColumn TItem="Employee1" HeaderText="DOJ" PropertyName="DOJ">
-        @context.DOJ
-    </GridColumn>
-    <GridColumn TItem="Employee1" HeaderText="Active" PropertyName="IsActive">
-        @context.IsActive
-    </GridColumn>
+<Grid @ref="grid"
+      TItem="Employee1"
+      Class="table table-hover table-bordered table-striped mt-3"
+      Data="employees">
+
+    <GridColumns>
+        <GridColumn TItem="Employee1" HeaderText="Id" PropertyName="Id">
+            @context.Id
+        </GridColumn>
+        <GridColumn TItem="Employee1" HeaderText="Employee Name" PropertyName="Name">
+            @context.Name
+        </GridColumn>
+        <GridColumn TItem="Employee1" HeaderText="Designation" PropertyName="Designation">
+            @context.Designation
+        </GridColumn>
+        <GridColumn TItem="Employee1" HeaderText="DOJ" PropertyName="DOJ">
+            @context.DOJ
+        </GridColumn>
+        <GridColumn TItem="Employee1" HeaderText="Active" PropertyName="IsActive">
+            @context.IsActive
+        </GridColumn>
+    </GridColumns>
+
 </Grid>
 
 @code {

diff --git a/...trap.Demo.RCL/Components/Pages/Grid/03-filters/Grid_Demo_01_A_Client_Side_Filtering.razor b/...trap.Demo.RCL/Components/Pages/Grid/03-filters/Grid_Demo_01_A_Client_Side_Filtering.razor
@@ -5,21 +5,23 @@
       AllowFiltering="true"
       IsResponsive="true">
 
-    <GridColumn TItem="Employee4" HeaderText="Id" PropertyName="Id">
-        @context.Id
-    </GridColumn>
-    <GridColumn TItem="Employee4" HeaderText="Employee Name" PropertyName="Name">
-        @context.Name
-    </GridColumn>
-    <GridColumn TItem="Employee4" HeaderText="Designation" PropertyName="Designation">
-        @context.Designation
-    </GridColumn>
-    <GridColumn TItem="Employee4" HeaderText="DOJ" PropertyName="DOJ">
-        @context.DOJ
-    </GridColumn>
-    <GridColumn TItem="Employee4" HeaderText="Active" PropertyName="IsActive">
-        @context.IsActive
-    </GridColumn>
+    <GridColumns>
+        <GridColumn TItem="Employee4" HeaderText="Id" PropertyName="Id">
+            @context.Id
+        </GridColumn>
+        <GridColumn TItem="Employee4" HeaderText="Employee Name" PropertyName="Name">
+            @context.Name
+        </GridColumn>
+        <GridColumn TItem="Employee4" HeaderText="Designation" PropertyName="Designation">
+            @context.Designation
+        </GridColumn>
+        <GridColumn TItem="Employee4" HeaderText="DOJ" PropertyName="DOJ">
+            @context.DOJ
+        </GridColumn>
+        <GridColumn TItem="Employee4" HeaderText="Active" PropertyName="IsActive">
+            @context.IsActive
+        </GridColumn>
+    </GridColumns>
 
 </Grid>
 

diff --git a/...s/Pages/Grid/03-filters/Grid_Demo_01_B_Client_Side_Filtering_With_StringComparision.razor b/...s/Pages/Grid/03-filters/Grid_Demo_01_B_Client_Side_Filtering_With_StringComparision.razor
@@ -1,19 +1,27 @@
-<Grid TItem="Employee1" class="table table-hover table-bordered table-striped" DataProvider="EmployeesDataProvider" AllowFiltering="true" IsResponsive="true">
-    <GridColumn TItem="Employee1" HeaderText="Id" PropertyName="Id">
-        @context.Id
-    </GridColumn>
-    <GridColumn TItem="Employee1" HeaderText="Employee Name" PropertyName="Name" StringComparison="StringComparison.Ordinal">
-        @context.Name
-    </GridColumn>
-    <GridColumn TItem="Employee1" HeaderText="Designation" PropertyName="Designation">
-        @context.Designation
-    </GridColumn>
-    <GridColumn TItem="Employee1" HeaderText="DOJ" PropertyName="DOJ">
-        @context.DOJ
-    </GridColumn>
-    <GridColumn TItem="Employee1" HeaderText="Active" PropertyName="IsActive">
-        @context.IsActive
-    </GridColumn>
+<Grid TItem="Employee1"
+      Class="table table-hover table-bordered table-striped"
+      DataProvider="EmployeesDataProvider"
+      AllowFiltering="true"
+      IsResponsive="true">
+
+    <GridColumns>
+        <GridColumn TItem="Employee1" HeaderText="Id" PropertyName="Id">
+            @context.Id
+        </GridColumn>
+        <GridColumn TItem="Employee1" HeaderText="Employee Name" PropertyName="Name" StringComparison="StringComparison.Ordinal">
+            @context.Name
+        </GridColumn>
+        <GridColumn TItem="Employee1" HeaderText="Designation" PropertyName="Designation">
+            @context.Designation
+        </GridColumn>
+        <GridColumn TItem="Employee1" HeaderText="DOJ" PropertyName="DOJ">
+            @context.DOJ
+        </GridColumn>
+        <GridColumn TItem="Employee1" HeaderText="Active" PropertyName="IsActive">
+            @context.IsActive
+        </GridColumn>
+    </GridColumns>
+
 </Grid>
 
 @code {

diff --git a/...Bootstrap.Demo.RCL/Components/Pages/Grid/03-filters/Grid_Demo_05_Set_Default_Filter.razor b/...Bootstrap.Demo.RCL/Components/Pages/Grid/03-filters/Grid_Demo_05_Set_Default_Filter.razor
@@ -1,24 +1,26 @@
-<Grid TItem="Employee1" 
-Class="table table-hover table-bordered table-striped" 
-    DataProvider="EmployeesDataProvider" 
-    AllowFiltering="true" 
-    IsResponsive="true">
+<Grid TItem="Employee1"
+      Class="table table-hover table-bordered table-striped"
+      DataProvider="EmployeesDataProvider"
+      AllowFiltering="true"
+      IsResponsive="true">
 
-    <GridColumn TItem="Employee1" HeaderText="Id" PropertyName="Id" FilterOperator="FilterOperator.GreaterThanOrEquals" FilterValue="105">
-        @context.Id
-    </GridColumn>
-    <GridColumn TItem="Employee1" HeaderText="Employee Name" PropertyName="Name">
-        @context.Name
-    </GridColumn>
-    <GridColumn TItem="Employee1" HeaderText="Designation" PropertyName="Designation">
-        @context.Designation
-    </GridColumn>
-    <GridColumn TItem="Employee1" HeaderText="DOJ" PropertyName="DOJ">
-        @context.DOJ
-    </GridColumn>
-    <GridColumn TItem="Employee1" HeaderText="Active" PropertyName="IsActive">
-        @context.IsActive
-    </GridColumn>
+    <GridColumns>
+        <GridColumn TItem="Employee1" HeaderText="Id" PropertyName="Id" FilterOperator="FilterOperator.GreaterThanOrEquals" FilterValue="105">
+            @context.Id
+        </GridColumn>
+        <GridColumn TItem="Employee1" HeaderText="Employee Name" PropertyName="Name">
+            @context.Name
+        </GridColumn>
+        <GridColumn TItem="Employee1" HeaderText="Designation" PropertyName="Designation">
+            @context.Designation
+        </GridColumn>
+        <GridColumn TItem="Employee1" HeaderText="DOJ" PropertyName="DOJ">
+            @context.DOJ
+        </GridColumn>
+        <GridColumn TItem="Employee1" HeaderText="Active" PropertyName="IsActive">
+            @context.IsActive
+        </GridColumn>
+    </GridColumns>
 
 </Grid>
 

diff --git a/...mo.RCL/Components/Pages/Grid/03-filters/Grid_Demo_06_Disable_Specific_Column_Filter.razor b/...mo.RCL/Components/Pages/Grid/03-filters/Grid_Demo_06_Disable_Specific_Column_Filter.razor
@@ -1,19 +1,27 @@
-<Grid TItem="Employee1" class="table table-hover table-bordered table-striped" DataProvider="EmployeesDataProvider" AllowFiltering="true" IsResponsive="true">
-    <GridColumn TItem="Employee1" HeaderText="Id" Filterable="false">
-        @context.Id
-    </GridColumn>
-    <GridColumn TItem="Employee1" HeaderText="Employee Name" PropertyName="Name">
-        @context.Name
-    </GridColumn>
-    <GridColumn TItem="Employee1" HeaderText="Designation" PropertyName="Designation">
-        @context.Designation
-    </GridColumn>
-    <GridColumn TItem="Employee1" HeaderText="DOJ" PropertyName="DOJ">
-        @context.DOJ
-    </GridColumn>
-    <GridColumn TItem="Employee1" HeaderText="Active" Filterable="false">
-        @context.IsActive
-    </GridColumn>
+<Grid TItem="Employee1"
+      Class="table table-hover table-bordered table-striped"
+      DataProvider="EmployeesDataProvider"
+      AllowFiltering="true"
+      IsResponsive="true">
+
+    <GridColumns>
+        <GridColumn TItem="Employee1" HeaderText="Id" Filterable="false">
+            @context.Id
+        </GridColumn>
+        <GridColumn TItem="Employee1" HeaderText="Employee Name" PropertyName="Name">
+            @context.Name
+        </GridColumn>
+        <GridColumn TItem="Employee1" HeaderText="Designation" PropertyName="Designation">
+            @context.Designation
+        </GridColumn>
+        <GridColumn TItem="Employee1" HeaderText="DOJ" PropertyName="DOJ">
+            @context.DOJ
+        </GridColumn>
+        <GridColumn TItem="Employee1" HeaderText="Active" Filterable="false">
+            @context.IsActive
+        </GridColumn>
+    </GridColumns>
+
 </Grid>
 
 @code {