[VUE 2] Load performance issue with large number of columns

[Webethics]

Hello

As the number of columns increases beyond 10, the grid's data loading time significantly escalates, often taking 15-20 seconds. However, I am try to optimize this process to ensure that data loads within 2-3 seconds, even with an extensive number of columns exceeding 50.

Kindly help me

Thanks

[mats]

We cannot reproduce this, it loads super fast for us with 100 columns. Are you able to share a data set + your configuration code with us?

[Webethics]

Apologies, I'm unable to share the specific code. However, I can provide an explanation of what occurred.

I've developed a component that integrates Bryntum grid, where I define various properties such as column text, field, alignment, editor configuration, and rendering logic. Within the rendering function, named renderGridColumn, I implement custom modifications to ensure the displayed data meets our specific requirements.

var allData = {
                    text      : columnName,
                    field     : columnField,
                    align     : align,
                    editor    : editorConfig,
                    autoWidth : true,
                    hideable  : hideable,
                    width     : width,
                    renderer  : ({ record = '', cellElement, row}) => {
                      const renderHtml = this.renderGridColumn(editor,columnField,record);
                      cellElement.innerHTML = renderHtml;
                    }
}

In my main index component, I dynamically instantiate the Bryntum grid component in a loop. However, I've noticed that when the number of data columns increases, the retrieval time exceeds 20 seconds. Conversely, when reducing the number of columns, the response time significantly improves to within 2 seconds.

[tasnim]

Hi,

Sorry, without reproducing we can't say how to fix it. Could you please try to modify this codepen grid demo https://codepen.io/dv-auntik/pen/bGJqMmg?editors=0010 to reproduce your issue and share the updated code with us? So that we can reproduce the issue and debug it?