safer way to attach element to data via getter

d.ts/antos.d.ts

@@ -3916,6 +3916,17 @@ declare namespace OS {
              */
             set aid(v: string | number);
             get aid(): string | number;
+            /**
+             * Attach a data to this tag
+             *
+             * This function will define a getter `domel`
+             * in the attached data, this getter refers to the
+             * current tag
+             *
+             * @returns {void}
+             * @memberof AFXTag
+             */
+            attach(data: GenericObject<any>): void;
             /**
              * Implementation from HTMLElement interface,
              * this function mount the current tag hierarchy
@@ -5827,10 +5838,11 @@ declare namespace OS {
                 /**
                  * Data placeholder for a collection of cell data
                  *
+                 * @private
                  * @type {GenericObject<any>[]}
                  * @memberof GridRowTag
                  */
-                data: GenericObject<any>[];
+                private _data;
                 /**
                  * placeholder for the row select event callback
                  *
@@ -5859,6 +5871,13 @@ declare namespace OS {
                  */
                 set selected(v: boolean);
                 get selected(): boolean;
+                /**
+                 * setter: set row data
+                 *
+                 * getter: get row data
+                 */
+                set data(v: GenericObject<any>[]);
+                get data(): GenericObject<any>[];
                 /**
                  * Mount the tag, do nothing
                  *

src/core/tags/GridViewTag.ts

@@ -35,10 +35,11 @@ namespace OS {
                 /**
                  * Data placeholder for a collection of cell data
                  *
+                 * @private
                  * @type {GenericObject<any>[]}
                  * @memberof GridRowTag
                  */
-                data: GenericObject<any>[];
+                private _data: GenericObject<any>[];
 
                 /**
                  * placeholder for the row select event callback
@@ -89,6 +90,21 @@ namespace OS {
                     return this.hasattr("selected");
                 }
 
+                /**
+                 * setter: set row data
+                 * 
+                 * getter: get row data
+                 */
+                set data(v: GenericObject<any>[]) {
+                    this._data = v;
+                    if(v)
+                    {
+                        this.attach(v);
+                    }
+                }
+                get data(): GenericObject<any>[] {
+                    return this._data;
+                }
                 /**
                  * Mount the tag, do nothing
                  *
@@ -220,6 +236,7 @@ namespace OS {
                 set data(v: GenericObject<any>) {
                     if (!v) return;
                     this._data = v;
+                    this.attach(v);
                     this.ondatachange();
                     if (!v.selected) {
                         return;
@@ -675,7 +692,6 @@ namespace OS {
                         )[0] as GridCellPrototype;
                         element.uify(this.observable);
                         element.data = item;
-                        item.domel = element;
                         element.oncellselect = (e) => {
                             if (element.data.sort) {
                                 this.sort(element.data, element.data.sort);
@@ -769,11 +785,9 @@ namespace OS {
                     for (let i = 0; i < nmin; i++) {
                         const rowel = (this.refs.grid.children[i] as GridRowTag);
                         rowel.data = rows[i];
-                        rowel.data.domel = rowel;
                         for (let celi = 0; celi < rowel.children.length; celi++) {
                             const cel = (rowel.children[celi] as GridCellPrototype);
                             cel.data = rows[i][celi];
-                            cel.data.domel = cel;
                         }
                     }
                     // remove existing remaining rows
@@ -917,7 +931,6 @@ namespace OS {
                     const el = rowel[0] as GridRowTag;
                     rowel[0].uify(this.observable);
                     el.data = row;
-                    row.domel = rowel[0];
 
                     for (let cell of row) {
                         let tag = this.cellitem;
@@ -925,7 +938,6 @@ namespace OS {
                             ({ tag } = cell);
                         }
                         const el = $(`<${tag}>`).appendTo(rowel);
-                        cell.domel = el[0];
                         const element = el[0] as GridCellPrototype;
                         element.uify(this.observable);
                         element.oncellselect = (e) => this.cellselect(e, false);

src/core/tags/ListViewTag.ts

@@ -238,6 +238,10 @@ namespace OS {
                  */
                 set data(v: GenericObject<any>) {
                     this._data = v;
+                    if(v)
+                    {
+                        this.attach(v);
+                    }
                     this.ondatachange();
                 }
                 get data(): GenericObject<any> {
@@ -973,7 +977,6 @@ namespace OS {
                         return this.iclose(e);
                     };
                     element.data = item;
-                    item.domel = el[0];
                     return element;
                 }
 

src/core/tags/TreeViewTag.ts

@@ -182,7 +182,7 @@ namespace OS {
                         this.treepath = v.path;
                     }
                     this.selected = v.selected;
-                    v.domel = this;
+                    this.attach(v);
                     this.ondatachange();
                 }
                 get data(): TreeViewDataType {

src/core/tags/tag.ts

@@ -394,6 +394,25 @@ namespace OS {
                 return $(this).attr("data-id");
             }
 
+            /**
+             * Attach a data to this tag
+             * 
+             * This function will define a getter `domel`
+             * in the attached data, this getter refers to the
+             * current tag
+             *
+             * @returns {void}
+             * @memberof AFXTag
+             */
+            attach(data: GenericObject<any>): void {
+                const self = this;
+                Object.defineProperty(data, 'domel', {
+                    get: function () { return self },
+                    enumerable: false,
+                    configurable: true
+                })
+            }
+
             /**
              * Implementation from HTMLElement interface,
              * this function mount the current tag hierarchy
@@ -614,8 +633,7 @@ namespace OS {
             }
         }
 
-        HTMLElement.prototype.enable_drag = function()
+        HTMLElement.prototype.enable_drag = function () {
-        {
             $(this)
                 .on("pointerdown", (evt: JQuery.MouseEventBase) => {
                     const offset = $(this).offset();
@@ -624,11 +642,13 @@ namespace OS {
                     const mouse_move = (
                         e: JQuery.MouseEventBase
                     ) => {
-                        const custom_event = new CustomEvent('dragging', { detail:{
+                        const custom_event = new CustomEvent('dragging', {
+                            detail: {
                                 origin: evt,
                                 current: e,
                                 offset: offset
-                        }});
+                            }
+                        });
                         this.dispatchEvent(custom_event);
                     };
 
@@ -636,11 +656,13 @@ namespace OS {
                         $(window).off("pointermove", mouse_move);
                         $(window).off("pointerup", mouse_up);
                         // trigger the drop event
-                        const custom_event = new CustomEvent('drop', { detail:{
+                        const custom_event = new CustomEvent('drop', {
+                            detail: {
                                 origin: evt,
                                 current: e,
                                 offset: offset
-                        }});
+                            }
+                        });
                         this.dispatchEvent(custom_event);
                     };
                     $(window).on("pointermove", mouse_move);

src/themes/system/afx-calendar-view.css

@@ -1,3 +1,4 @@
+afx-calendar-view afx-grid-view afx-grid-row:nth-child(odd) afx-grid-cell,
 afx-calendar-view afx-grid-view afx-grid-row:nth-child(even) afx-grid-cell
 {
     background-color: transparent;