Declaring visible: true on `commandColumn` throws error in latest release

[Cher Toggy]

Hello,

I have the following options defined in my smart grid object (Vue). Upon migration to v13.1.1 my application errors out and does not generate the grid.
In my testing it appears that when I declare via options it throws errors (see below). When it is programmatically set it does not throw error. It worked both ways in v12.

Errors out:

              commandColumn: {
                visible: true, // <----
                dataSource: {
                  commandColumnEdit: {
                    visible: false
                  },
                  commandColumnDelete: {
                    visible: true
                  },
                  commandColumnMenu: {
                    visible: false
                  },
                  commandColumnRowMenu: {
                    visible: false
                  }
                }
              }

Works:

      projectGrid.editing.commandColumn.visible = true;
      projectGrid.editing.commandColumn.dataSource.commandColumnMenu.visible = true;
      projectGrid.editing.commandColumn.dataSource.commandColumnEdit.visible = false;
      projectGrid.editing.commandColumn.dataSource.commandColumnDelete.visible = true;
      projectGrid.editing.commandColumn.dataSource.commandColumnRowMenu.visible = false;

Errors with – Firefox:

Uncaught TypeError: l is undefined
    _recycle smart.grid.js:1267
    _refreshPaging smart.grid.js:1267
    _refreshPaging smart.grid.js:1267
    propertyChangedHandler smart.grid.js:1267
    updateProperty smart.dockinglayout.js:27
    set smart.dockinglayout.js:27
    e smart.dockinglayout.js:27
    updateProperty smart.dockinglayout.js:27
    set smart.dockinglayout.js:27
    6321/</window[n]/< smart.dockinglayout.js:27
    n smart.dockinglayout.js:27
    setup ProjectList.vue:43
    callWithErrorHandling runtime-core.esm-bundler.js:155
    callWithAsyncErrorHandling runtime-core.esm-bundler.js:164
    __weh runtime-core.esm-bundler.js:2667
    flushPostFlushCbs runtime-core.esm-bundler.js:356
    render runtime-core.esm-bundler.js:5643
    mount runtime-core.esm-bundler.js:3877
    mount runtime-dom.esm-bundler.js:1590
    createAppAndMount ContentContainer.vue:102
    mounted ContentContainer.vue:58
    stopWatcher pinia.esm-browser.js:1338
    callWithErrorHandling runtime-core.esm-bundler.js:155
    callWithAsyncErrorHandling runtime-core.esm-bundler.js:164
    job runtime-core.esm-bundler.js:1779
    flushPreFlushCbs runtime-core.esm-bundler.js:328
    flushJobs runtime-core.esm-bundler.js:369
    promise callback*queueFlush runtime-core.esm-bundler.js:285
    queueCb runtime-core.esm-bundler.js:307
    queuePreFlushCb runtime-core.esm-bundler.js:310
    scheduler runtime-core.esm-bundler.js:1807
    triggerEffects reactivity.esm-bundler.js:359
    trigger reactivity.esm-bundler.js:344
    set reactivity.esm-bundler.js:481
    key reactivity.esm-bundler.js:399
    addActiveTab ui.js:18
    wrapAction pinia.esm-browser.js:1298
    actionName pinia.esm-browser.js:887
    mounted ExplorerMenu.vue:114
    dispatchEvent smart.dockinglayout.js:27
    fireEvent smart.dockinglayout.js:27
    _handleSelection smart.tree.js:55
    _continueSelection smart.tree.js:55
    _scrollViewerDownHandler smart.tree.js:55
    d smart.dockinglayout.js:27
    dispatch smart.dockinglayout.js:27
    dispatchEvent smart.dockinglayout.js:27
    listen smart.dockinglayout.js:27
    e smart.dockinglayout.js:27
    handleDown smart.dockinglayout.js:27
    pointerDown smart.dockinglayout.js:27
    dispatch smart.dockinglayout.js:27
    listen smart.dockinglayout.js:27
    listen smart.dockinglayout.js:27
    h smart.dockinglayout.js:27
    listen smart.dockinglayout.js:27
    r smart.dockinglayout.js:27
    _handleListeners smart.dockinglayout.js:27
    t smart.dockinglayout.js:27
    complete smart.dockinglayout.js:27
    setup smart.dockinglayout.js:27
    connect smart.dockinglayout.js:27
    connectedCallback smart.dockinglayout.js:27
    insert runtime-dom.esm-bundler.js:10
    mountElement runtime-core.esm-bundler.js:4646
    processElement runtime-core.esm-bundler.js:4566
    patch runtime-core.esm-bundler.js:4486
    mountChildren runtime-core.esm-bundler.js:4685
    processFragment runtime-core.esm-bundler.js:4856
    patch runtime-core.esm-bundler.js:4482
    componentUpdateFn runtime-core.esm-bundler.js:5037
    run reactivity.esm-bundler.js:167
    setupRenderEffect runtime-core.esm-bundler.js:5156
    mountComponent runtime-core.esm-bundler.js:4939
    processComponent runtime-core.esm-bundler.js:4897
    patch runtime-core.esm-bundler.js:4489
    render runtime-core.esm-bundler.js:5641
    mount runtime-core.esm-bundler.js:3877
    mount runtime-dom.esm-bundler.js:1590
    mounted TopLayout.vue:184
    render smart.dockinglayout.js:27

Chrome:

Uncaught TypeError: Cannot read properties of undefined (reading 'style')
    at BaseElement._recycle (smart.grid.js?89ba:1267:1)
    at BaseElement._refresh (smart.grid.js?89ba:1267:1)
    at BaseElement.refresh (smart.grid.js?89ba:1267:1)
    at BaseElement.r (smart.dockinglayout.js?286f:27:1)
    at BaseElement._resizeHandler (smart.grid.js?89ba:1267:1)
    at BaseElement.d (smart.dockinglayout.js?286f:27:1)
    at f.dispatch (smart.dockinglayout.js?286f:27:1)
    at f.dispatchEvent (smart.dockinglayout.js?286f:27:1)
    at Object.eval [as resize] (smart.dockinglayout.js?286f:27:1)
    at h.t.<computed> [as resize] (smart.dockinglayout.js?286f:27:1)

Thanks

• This topic was modified 2 years ago by Cher Toggy.
• This topic was modified 2 years ago by Cher Toggy.

[admin]

Hi Cher Toggy,

Unfortunately, we were unable to reproduce an issue with the reported steps. We have a demo with these settings online https://www.htmlelements.com/demos/grid/editing-command-column/. From the console log I see usage of docking layout and may be there’s something else. Could you share a codepen sample which shows an error on our side?

Best regards,
Peter Stoev

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

[Author]

Posts