Ttonev/add toolbar sample2

code-gen-library/WebGridAdvancedFilteringToggle/Blazor.cs

@@ -0,0 +1,37 @@
+using IgniteUI.Blazor.Controls;
+
+//begin imports
+//end imports
+
+public class WebGridAdvancedFilteringToggle
+{
+    //begin eventHandler
+    public async void WebGridAdvancedFilteringToggle(IgbPropertyEditorPropertyDescriptionButtonClickEventArgs args)
+{
+    var script = @"
+    let toolbars = document.querySelectorAll('.igx-grid-toolbar');
+
+    toolbars.forEach(toolbar => {
+        let advancedFiltering = toolbar.querySelector('igc-grid-toolbar-advanced-filtering');
+
+        if (advancedFiltering) {
+            let currentDisplay = window.getComputedStyle(advancedFiltering).display;
+            let newDisplay = currentDisplay === 'none' ? 'block' : 'none';
+            advancedFiltering.style.display = newDisplay;
+        } else {
+            console.warn('Advanced filtering element NOT found inside toolbar.');
+        }
+    });
+";
+
+    try
+    {
+        await Task.Run(async () => await IJS.InvokeVoidAsync("eval", script));
+    }
+    catch (Exception ex)
+    {
+        Console.WriteLine($"JavaScript execution failed: {ex.Message}");
+    }
+}
+    //end eventHandler
+}

code-gen-library/WebGridAdvancedFilteringToggle/React.tsx

@@ -0,0 +1,15 @@
+
+public webGridAdvancedFilteringToggle = () => {
+  const toolbars = document.querySelectorAll("igc-grid-toolbar");
+
+  toolbars.forEach((toolbar) => {
+    const advancedFiltering = toolbar.querySelector(
+      "igc-grid-toolbar-advanced-filtering"
+    ) as HTMLElement;
+
+    if (advancedFiltering) {
+        advancedFiltering.style.display = advancedFiltering.style.display === "none" ? "" : "none";
+    }
+
+  });
+};

code-gen-library/WebGridAdvancedFilteringToggle/Web.ts

@@ -0,0 +1,18 @@
+//begin imports
+import { IgcGridComponent } from 'igniteui-webcomponents-grids/grids';
+import { IgcPropertyEditorPropertyDescriptionButtonClickEventArgs } from 'igniteui-webcomponents-layouts';
+//end imports
+
+import { CodeGenHelper } from 'igniteui-webcomponents-core';
+
+export class WebGridAdvancedFilteringToggle {
+    //begin eventHandler
+    public webGridAdvancedFilteringToggle(): void {
+        const toolbar = this.gridToolbar;
+        const advancedFiltering = toolbar.querySelector('igc-grid-toolbar-advanced-filtering') as HTMLElement;
+        if (advancedFiltering) {
+            advancedFiltering.style.display = advancedFiltering.style.display === 'none' ? '' : 'none';
+        }
+    }
+    //end eventHandler
+}

code-gen-library/WebGridColumnHidingToggle/Blazor.cs

@@ -0,0 +1,38 @@
+using IgniteUI.Blazor.Controls;
+
+//begin imports
+@inject IJSRuntime IJS
+//end imports
+
+public class WebGridColumnHidingToggle
+{
+    //begin eventHandler
+    public async void WebGridColumnHidingToggle(IgbPropertyEditorPropertyDescriptionButtonClickEventArgs args)
+{
+    var script = @"
+    let toolbars = document.querySelectorAll('.igx-grid-toolbar');
+
+    toolbars.forEach(toolbar => {
+        let columnHiding = toolbar.querySelector('igc-grid-toolbar-hiding');
+
+        if (columnHiding) {
+            let currentDisplay = window.getComputedStyle(columnHiding).display;
+            let newDisplay = currentDisplay === 'none' ? 'block' : 'none';
+            columnHiding.style.display = newDisplay;
+        } else {
+            console.warn('Advanced filtering element NOT found inside toolbar.');
+        }
+    });
+";
+
+    try
+    {
+        await Task.Run(async () => await IJS.InvokeVoidAsync("eval", script));
+    }
+    catch (Exception ex)
+    {
+        Console.WriteLine($"JavaScript execution failed: {ex.Message}");
+    }
+}
+    //end eventHandler
+}

code-gen-library/WebGridColumnHidingToggle/React.tsx

@@ -0,0 +1,14 @@
+public webGridColumnHidingToggle = () => {
+  const toolbars = document.querySelectorAll("igc-grid-toolbar");
+
+  toolbars.forEach((toolbar) => {
+    const hiding = toolbar.querySelector(
+      "igc-grid-toolbar-hiding"
+    ) as HTMLElement;
+
+    if (hiding) {
+      hiding.style.display = hiding.style.display === "none" ? "" : "none";
+    }
+
+  });
+};

code-gen-library/WebGridColumnHidingToggle/Web.ts

@@ -0,0 +1,18 @@
+//begin imports
+import { IgcGridComponent } from 'igniteui-webcomponents-grids/grids';
+import { IgcPropertyEditorPropertyDescriptionButtonClickEventArgs } from 'igniteui-webcomponents-layouts';
+//end imports
+
+import { CodeGenHelper } from 'igniteui-webcomponents-core';
+
+export class WebGridColumnHidingToggle {
+    //begin eventHandler
+    public webGridColumnHidingToggle(sender: any, args: IgcPropertyEditorPropertyDescriptionButtonClickEventArgs): void {
+        const toolbar = this.gridToolbar;
+        const toolbarHiding = toolbar.querySelector('igc-grid-toolbar-hiding') as HTMLElement;
+        if (toolbarHiding) {
+            toolbarHiding.style.display = toolbarHiding.style.display === 'none' ? '' : 'none';
+        }
+    }
+    //end eventHandler
+}

code-gen-library/WebGridColumnPinningToggle/Blazor.cs

@@ -0,0 +1,36 @@
+using IgniteUI.Blazor.Controls;
+//begin imports
+//end imports
+
+public class WebGridColumnPinningToggle
+{
+    //begin eventHandler
+    public async void WebGridColumnPinningToggle(IgbPropertyEditorPropertyDescriptionButtonClickEventArgs args)
+{
+    var script = @"
+    let toolbars = document.querySelectorAll('.igx-grid-toolbar');
+
+    toolbars.forEach(toolbar => {
+        let columnPinning = toolbar.querySelector('igc-grid-toolbar-pinning');
+
+        if (columnPinning) {
+            let currentDisplay = window.getComputedStyle(columnPinning).display;
+            let newDisplay = currentDisplay === 'none' ? 'block' : 'none';
+            columnPinning.style.display = newDisplay;
+        } else {
+            console.warn('Advanced filtering element NOT found inside toolbar.');
+        }
+    });
+";
+
+    try
+    {
+        await Task.Run(async () => await IJS.InvokeVoidAsync("eval", script));
+    }
+    catch (Exception ex)
+    {
+        Console.WriteLine($"JavaScript execution failed: {ex.Message}");
+    }
+}
+    //end eventHandler
+}

code-gen-library/WebGridColumnPinningToggle/React.tsx

@@ -0,0 +1,15 @@
+
+public webGridColumnPinningToggle = () => {
+  const toolbars = document.querySelectorAll("igc-grid-toolbar");
+
+  toolbars.forEach((toolbar) => {
+    const pinning = toolbar.querySelector(
+      "igc-grid-toolbar-pinning"
+    ) as HTMLElement;
+
+    if (pinning) {
+       pinning.style.display = pinning.style.display === "none" ? "" : "none";
+    }
+
+  });
+};

code-gen-library/WebGridColumnPinningToggle/Web.ts

@@ -0,0 +1,18 @@
+//begin imports
+import { IgcGridComponent } from 'igniteui-webcomponents-grids/grids';
+import { IgcPropertyEditorPropertyDescriptionButtonClickEventArgs } from 'igniteui-webcomponents-layouts';
+//end imports
+
+import { CodeGenHelper } from 'igniteui-webcomponents-core';
+
+export class WebGridColumnPinningToggle {
+    //begin eventHandler
+    public webGridColumnPinningToggle(sender: any, args: IgcPropertyEditorPropertyDescriptionButtonClickEventArgs): void {
+        const toolbar = this.gridToolbar;
+        const toolbarPinning = toolbar.querySelector('igc-grid-toolbar-pinning') as HTMLElement;
+        if (toolbarPinning) {
+            toolbarPinning.style.display = toolbarPinning.style.display === 'none' ? '' : 'none';
+        }
+    }
+    //end eventHandler
+}

code-gen-library/WebGridExportingToggle/Blazor.cs

@@ -0,0 +1,37 @@
+using IgniteUI.Blazor.Controls;
+
+//begin imports
+//end imports
+
+public class WebGridExportingToggle
+{
+    //begin eventHandler
+    public async void WebGridExportingToggle(IgbPropertyEditorPropertyDescriptionButtonClickEventArgs args)
+{
+    var script = @"
+    let toolbars = document.querySelectorAll('.igx-grid-toolbar');
+
+    toolbars.forEach(toolbar => {
+        let exporting = toolbar.querySelector('igc-grid-toolbar-exporter');
+
+        if (exporting) {
+            let currentDisplay = window.getComputedStyle(exporting).display;
+            let newDisplay = currentDisplay === 'none' ? 'block' : 'none';
+            exporting.style.display = newDisplay;
+        } else {
+            console.warn('Advanced filtering element NOT found inside toolbar.');
+        }
+    });
+";
+
+    try
+    {
+        await Task.Run(async () => await IJS.InvokeVoidAsync("eval", script));
+    }
+    catch (Exception ex)
+    {
+        Console.WriteLine($"JavaScript execution failed: {ex.Message}");
+    }
+}
+    //end eventHandler
+}

code-gen-library/WebGridExportingToggle/React.tsx

@@ -0,0 +1,15 @@
+
+public webGridExportingToggle = () => {
+  const toolbars = document.querySelectorAll("igc-grid-toolbar");
+
+  toolbars.forEach((toolbar) => {
+    const exporting = toolbar.querySelector(
+      "igc-grid-toolbar-exporter"
+    ) as HTMLElement;
+
+    if (exporting) {
+      exporting.style.display = exporting.style.display === "none" ? "" : "none";
+    }
+
+  });
+};

code-gen-library/WebGridExportingToggle/Web.ts

@@ -0,0 +1,18 @@
+//begin imports
+import { IgcGridComponent } from 'igniteui-webcomponents-grids/grids';
+import { IgcPropertyEditorPropertyDescriptionButtonClickEventArgs } from 'igniteui-webcomponents-layouts';
+//end imports
+
+import { CodeGenHelper } from 'igniteui-webcomponents-core';
+
+export class WebGridExportingToggle {
+    //begin eventHandler
+    public webGridExportingToggle(sender: any, args: IgcPropertyEditorPropertyDescriptionButtonClickEventArgs): void {
+        const toolbar = this.gridToolbar;
+        const toolbarExporter = toolbar.querySelector('igc-grid-toolbar-exporter') as HTMLElement;
+        if (toolbarExporter) {
+            toolbarExporter.style.display = toolbarExporter.style.display === 'none' ? '' : 'none';
+        }
+    }
+    //end eventHandler
+}

samples/grids/grid/toolbar-sample-2.json

@@ -1,17 +1,60 @@
 {
-  "todo": [ 
-     ""
+  "todo": [
+    ""
   ],
   "export": true,
   "skipAlterDataCasing": true,
   "descriptions": {
+    "editor": {
+      "type": "PropertyEditorPanel",
+      "name": "PropertyEditor",
+      "componentRendererRef": "renderer",
+      "targetRef": "grid",
+      "descriptionType": "WebGrid",
+      "isHorizontal": true,
+      "isWrappingEnabled": true,
+      "properties": [
+        {
+          "type": "PropertyEditorPropertyDescription",
+          "label": "AdvancedFiltering",
+          "valueType": "Button",
+          "primitiveValue": "Advanced Filtering",
+          "buttonClickedRef": "WebGridAdvancedFilteringToggle"
+        },
+        {
+          "type": "PropertyEditorPropertyDescription",
+          "label": "Hiding",
+          "valueType": "Button",
+          "primitiveValue": "Column Hiding",
+          "buttonClickedRef": "WebGridColumnHidingToggle"
+        },
+        {
+          "type": "PropertyEditorPropertyDescription",
+          "label": "Pinning",
+          "valueType": "Button",
+          "primitiveValue": "Column Pinning",
+          "buttonClickedRef": "WebGridColumnPinningToggle"
+        },
+        {
+          "type": "PropertyEditorPropertyDescription",
+          "label": "Exporter",
+          "valueType": "Button",
+          "primitiveValue": "Exporting",
+          "buttonClickedRef": "WebGridExportingToggle"
+        }
+      ]
+    },
     "content": {
       "type": "WebGrid",
+      "name": "grid",
+      "id": "grid",
       "dataRef": "AthletesData",
       "autoGenerate": false,
       "toolbar": [
         {
           "type": "WebGridToolbar",
+          "name": "toolbar",
+          "id": "toolbar",
           "tools": [
             {
               "type": "WebGridToolbarActions",
@@ -71,6 +114,7 @@
   },
   "modules": [
     "withDescriptions",
-    "grids/WebGridModule"
+    "grids/WebGridModule",
+    "layouts/PropertyEditorPanelModule"
   ]
 }