smart-grid stuck at init

[Hugh Anderson]

I was in a chat with support officer Hristo Hristov and he instructed me that I can use <smart-grid> element w/o shadow dom.  I want to do that for more control of the styling.  In my app of stencil.js I made the following code to invoke the <smart-grid> from my wrapper component.  This I do without using the <smart-ui-grid> shadow wrapper.

entire code of my stencil component:

import { Component, Host, h, Prop, Event } from '@stencil/core';
import { Grid, GridProperties } from 'smart-webcomponents/source/typescript/smart.grid';
import 'smart-webcomponents/source/modules/smart.grid.js';
import { IDataGridInput, mapProps } from './input';

@Component({
  tag: 'ace-data-grid',
  styleUrl: 'ace-data-grid.scss',
  shadow: true,
})
export class AceDataGrid {
  @Prop() input: IDataGridInput;
  @Event() fetchData?: PromiseEventEmitter<IDataTableRequest, IDataResponse>;

  componentDidLoad() {
    // mapProps routine takes our apps' inputs and returns smart's GridProperties type
    // it has normal async dataSource that has been tested and works fine when using smart-ui-grid shadow wrapper
    const properties: GridProperties = mapProps(this.input, this.fetchData);
    Object.assign(this._grid, properties);
    // i also tried this._grid.render() here but it did not help
    //  this._grid.render();
  }

  private _grid: Grid;

  render() {
    return (
      <Host>
        <smart-grid ref={el => (this._grid = el)}></smart-grid>
      </Host>
    );
  }
}

As advised by Hristo it is not necessary to call window.Smart(‘#element’, props) because <smart-grid> will be registered custom element.  And in my testing this is true because I see the serialized props are added to the <smart-grid> element and I see it has added a class of smart-element-init to itself which I did not tell it to do.  This tells me the internal code of it has started to run and process the props.  Here is what I found in the DOM inspector:

<smart-grid class="smart-element-init" appearance_alternation-count="2"
appearance="{"alternationCount":2,"showColumnLines":false,"showColumnHeaderLines":false}"
behavior_column-resize-mode="growAndShrink" behavior="{"columnResizeMode":"growAndShrink"}"
sorting_enabled="" sorting="{"enabled":true}" editing_enabled=""
editing="{"enabled":true}" selection_enabled="" selection_allow-row-header-selection=""
selection_check-boxes_enabled="" selection_check-boxes_select-all-mode="all"
selection="{"enabled":true,"mode":"many","allowRowHeaderSelection":true,"checkBoxes":{"enabled":true,"selectAllMode":"all"}}"
scrolling="infinite"></smart-grid>

The problem with this is it is getting stuck in smart-element-init phase and does not ever call the datasource to request the rows.  There is large empty rectangle on the screen where grid should be.  Can  you please provide some guidance how I can transition <smart-grid> custom element out of init phase into normal interactive mode?

• This topic was modified 2 years, 1 month ago by Hugh Anderson. Reason: formatting
• This topic was modified 2 years, 1 month ago by Hugh Anderson. Reason: code formatting
• This topic was modified 2 years, 1 month ago by Hugh Anderson.
• This topic was modified 2 years, 1 month ago by Hugh Anderson.
• This topic was modified 2 years, 1 month ago by Hugh Anderson.
• This topic was modified 2 years, 1 month ago by Hugh Anderson.

[Hugh Anderson]

I think I can use the window.Smart(element, class { properties = properties }) pattern but I need to pass an element directly, instead of a string of the element’s id there.  Because my stencil’s component is already in the shadow dom, when I pass an id in a string to the first parameter of window.Smart(‘#myGridId’) it cannot be found because it is not in the dom it is in my component’s shadow dom.  But I can easily get a ref to it in Stencil and I can pass that instead of the string id of it to the window.Smart() function and it will work.  However, when I tried that it is saying e.indexof() is not a function and I presume it is because it is being treated as a string.  Coming from a jquery background I’m sure you can recognize that sometimes it is beneficial to provide a css selector and sometimes it is easier and simpler and better to simply pass the element reference itself rather than a sizzle selector of it.  I hope you will consider a feature request to pass an element instead of a string as first parameter of window.Smart().

other potential request to consider is to use smart-ui-grid without shadow mode.  it can do some of the plumbing work to get the element initialized but it needs to not wrap content with shadow-dom so we can control the style.  i think theming is not correctly implemented for most of shadow-dom grid anyway.  it uses subcomponents like smart-grid-column which are not targeted by theme system, who uses class of .smart-grid-column (not tag of it) so the theme cannot override the background and foreground color of the grid column header with shadow on.  this is a separate bug and another reason to not use shadow of smart-ui-grid.

[svetoslav_borislavov]

Hi,

May I ask you to send me a demo project to this email: svetoslav@jqwidgets.com, I couldn’t reproduce the problem.
I will be waiting for this, so I can help you!

Best Regards,
Svetoslav Borislavov

Smart UI Team
https://www.htmlelements.com/

[Author]

Posts