Merge pull request #920 from IgniteUI/mdd-add-custom-content-grid-too…

…lbar mdd-add-custom-content-grid-toolbar
IgniteUI · Jan 9, 2025 · 09980df · 09980df
2 parents acb40e4 + 99f22ce
commit 09980df
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 9 deletions.
diff --git a/samples/grids/grid/toolbar-sample-4/App.razor b/samples/grids/grid/toolbar-sample-4/App.razor
@@ -11,48 +11,56 @@
             >
                 <IgbGridToolbarActions
                 >
+
+                    <IgbButton onclick="clearSort()">Clear Sort</IgbButton>
+
                     <IgbGridToolbarHiding
                     >
                     </IgbGridToolbarHiding>
 
                     <IgbGridToolbarPinning
                     >
                     </IgbGridToolbarPinning>
-
                 </IgbGridToolbarActions>
 
             </IgbGridToolbar>
 
             <IgbColumn
             Field="Name"
             Header="Athlete"
-            Width="200px">
+            Width="200px"
+            Sortable="true">
             </IgbColumn>
 
             <IgbColumn
             Field="CountryName"
             Header="Country"
-            Width="200px">
+            Width="200px"
+            Sortable="true">
             </IgbColumn>
 
             <IgbColumn
             Field="BeatsPerMinute"
-            Header="Beats Per Minute">
+            Header="Beats Per Minute"
+            Sortable="true">
             </IgbColumn>
 
             <IgbColumn
             Field="TopSpeed"
-            Header="Top Speed">
+            Header="Top Speed"
+            Sortable="true">
             </IgbColumn>
 
             <IgbColumn
             Field="AthleteNumber"
-            Header="ID">
+            Header="ID"
+            Sortable="true">
             </IgbColumn>
 
             <IgbColumn
             Field="TrackProgress"
-            Header="Progress">
+            Header="Progress"
+            Sortable="true">
             </IgbColumn>
 
         </IgbGrid>
@@ -69,7 +77,7 @@
     }
 
     private IgbGrid grid1;
-
+   
     private PlayersData _PlayersData = null;
     public PlayersData PlayersData
     {

diff --git a/samples/grids/grid/toolbar-sample-4/Program.cs b/samples/grids/grid/toolbar-sample-4/Program.cs
@@ -21,7 +21,8 @@ public static async Task Main(string[] args)
             // registering Ignite UI modules
             builder.Services.AddIgniteUIBlazor(
                 typeof(IgbInputModule),
-                typeof(IgbGridModule)
+                typeof(IgbGridModule),
+                typeof(IgbButtonModule)
             );
             await builder.Build().RunAsync();
         }

diff --git a/samples/grids/grid/toolbar-sample-4/wwwroot/events.js b/samples/grids/grid/toolbar-sample-4/wwwroot/events.js
@@ -0,0 +1,5 @@
+function clearSort() {
+    const grid = document.getElementsByTagName("igc-grid")[0];
+
+    grid.clearSort("");
+}
diff --git a/samples/grids/grid/toolbar-sample-4/wwwroot/index.html b/samples/grids/grid/toolbar-sample-4/wwwroot/index.html
@@ -26,6 +26,7 @@
     <!-- importing blazor bundle for IG controls: -->
     <script src="_content/IgniteUI.Blazor/app.bundle.js"></script>
     <script src="_framework/blazor.webassembly.js"></script>
+    <script src="events.js"></script>
 </body>
 
 </html>