chore(*): Adjust styles and sizes for row pinning custom sample (#966)

* chore(*): Adjust styles and sizes.

* Try with different tags.

* Check if selector break logic that puts it in css.

* Try with another tag.

* Try another combination.

* Try with more tags.

* Try with another tag.

* Try with a separate template just for styles.

* Apply classes to other templates as well.

* Set template without initial call.

* Hide icon from template in ghost row in WC/React.

* Remove conditional template as it does not work with index check for some reason in React. Use key instead when toggling pinning.

* Remove toArray since response is already unwrapped to array in wc.

* Add a markForCheck to ensure everything updates after pin.

* Bump up react version.

Author: MayaKirova

code-gen-library/WebGridRowPinCellTemplate/Blazor.js

@@ -5,9 +5,14 @@ igRegisterScript("WebGridRowPinCellTemplate", (ctx) => {
         var grid = document.getElementsByTagName("igc-grid")[0];
         grid.getRowByIndex(index).pinned = !grid.getRowByIndex(index).pinned;
     }
+    var grid = document.getElementsByTagName("igc-grid")[0];
     const index = ctx.cell.id.rowIndex;
-    return html`<div>
-    <span onpointerdown='toggleRowPin("${index}")'>📌</span>
+    const row = grid.rowList.toArray().find(x => x.index === index);
+    if (row && row.pinned && row.disabled) {
+        return html``;
+    }
+    return html`<div class='customIcon'>
+    <span class='customIconSpan' onpointerdown='toggleRowPin("${index}")'>📌</span>
 </div>`;
 }, false);
 //end template

code-gen-library/WebGridRowPinCellTemplate/React.tsx

@@ -6,16 +6,24 @@ export class WebGridRowPinCellTemplate {
 //begin template
 //begin content
 public webGridRowPinCellTemplate = (e: {dataContext: IgrCellTemplateContext}) => {
+    const grid = CodeGenHelper.getDescription<IgrGrid>("content");
     const index = e.dataContext.cell.row.index;
+    const row = grid.rowList.toArray().find(x => x.index === index);
+    if (row && row.pinned && row.disabled) {
+        return (<></>);
+    }
     return (
-        <span onPointerDown={(e: any) => this.toggleRowPin(index)} style={{ cursor: 'pointer'}}>📌</span>
+        <div className='customIcon'>
+        <span onPointerDown={(e: any) => this.toggleRowPin(index)} className='customIconSpan'>📌</span>
+        </div>
     );
 }
 //end content
 //begin supportingMethods
 public toggleRowPin(index: number) {
     let grid = CodeGenHelper.getDescription<IgrGrid>("content");
     grid.getRowByIndex(index).pinned = !grid.getRowByIndex(index).pinned;
+    grid.markForCheck();
 }
 //end supportingMethods
 //end template

code-gen-library/WebGridRowPinCellTemplate/WebComponents.ts

@@ -10,13 +10,19 @@ export class WebGridRowPinCellTemplate {
 //begin content
     public webGridRowPinCellTemplate = (ctx: IgcCellTemplateContext) => {
         const index = ctx.cell.id.rowIndex;
-        return html`<span @pointerdown=${(e: any) => this.toggleRowPin(index)}>📌</span>`
+        const grid = CodeGenHelper.getDescription<IgcGridComponent>("content");
+        const row = grid.rowList.find((x:any) => x.index === index);
+        if (row && row.pinned && row.disabled) {
+            return html``;
+        }
+        return html`<div class='customIcon'><span class='customIconSpan' @pointerdown=${(e: any) => this.toggleRowPin(index)}>📌</span></div>`
 }
 //end content
 //begin supportingMethods
 public toggleRowPin(index: number) {
     var grid = CodeGenHelper.getDescription<IgcGridComponent>("content");
     grid.getRowByIndex(index).pinned = !grid.getRowByIndex(index).pinned;
+    grid.markForCheck();
 }
 //end supportingMethods
 //end template

code-gen-library/WebGridRowPinCellTemplateStyles/Blazor.js

@@ -0,0 +1,19 @@
+//begin eventHandler
+igRegisterScript("WebGridRowPinCellTemplateStyles", (args) => {
+    //OMIT HANDLER
+}, false);
+//end eventHandler
+
+let requiredStyles = `
+<!--begin styles-->
+.customIcon {
+    display: flex;
+    width: 100%;
+    justify-content: center;
+}
+
+.customIconSpan {
+    cursor: pointer;
+}
+<!--end styles-->
+`;

code-gen-library/WebGridRowPinCellTemplateStyles/Web.ts

@@ -0,0 +1,23 @@
+//begin imports
+//end imports
+
+export class WebGridRowPinCellTemplateStyles {
+    //begin eventHandler
+    public webGridRowPinCellTemplateStyles(): void {
+        //OMIT HANDLER
+    }
+    //end eventHandler
+    public requiredStyles = `
+<!--begin styles-->
+.customIcon {
+    display: flex;
+    width: 100%;
+    justify-content: center;
+}
+
+.customIconSpan {
+    cursor: pointer;
+}
+<!--end styles-->
+    `;
+}

editor-templates/React/main-template/package.json

@@ -39,7 +39,7 @@
     "igniteui-react-gauges": "19.3.1",
 //endifdef gauges, dashboards
 //ifdef webgrids
-    "igniteui-react-grids": "^19.4.0",
+    "igniteui-react-grids": "^19.5.0-beta.0 ",
 //endifdef webgrids
 //ifdef grid, dashboards
     "igniteui-react-data-grids": "19.3.1",

samples/grids/grid/row-pinning-extra-column.json

@@ -3,6 +3,7 @@
         "TODO add event to handle row pinning"
     ],
   "skipAlterDataCasing": true,
+  "onInit": ["WebGridRowPinCellTemplateStyles"],
     "descriptions": {
         "content": {
             "name": "grid",
@@ -13,7 +14,7 @@
             "columnList": [
                 {
                     "type": "WebColumn",
-                    "width": "70px",
+                    "width": "100px",
                     "filterable": false,
                     "pinned": true,
                     "bodyTemplateRef": "WebGridRowPinCellTemplate"