Grid afterrender event

[neetu@ciirus.com]

Hi team

I am using Bryntum grid with around 80 columns(columns with children)
many of them are having dropdown type editor and editor data is coming from api
but its making my grid very slow to load so I want to load grid data initially and once grid data is loaded then want to load dropdown data.

So please suggest how to achieve this.

[tasnim]

Hi,

We have a big dataset demo here https://bryntum.com/products/grid/examples/bigdataset/ where it shows how it handles large amounts of datasets.

This demo should help

If that doesn't help can you please share what your code looks like?

Best regards,
Tasnim

[neetu@ciirus.com]

Oh I think you did not read my question. I am not talking about large number of records I am talking about columns with editor type dropdown and dropdown data is coming from api.

I am having around 20 columns that is having dynamic editor type dropdown so I want to load these dropdown data after grid is loaded.

[Animal]

We need more info. How are you intending to load that data?

[neetu@ciirus.com]

 const dropstore = dynamicDropDownStore("url", ['ID', 'Description']);
        const CommitmentHomeTypeIDStore = dynamicDropDownStore("url", ['ID', 'Type']);
        

    function dynamicDropDownStore(url, fields) {
    const ajaxStore = new AjaxStore({
        readUrl: url,
        fields: fields,
       autoLoad: true,
    });
  return ajaxStore;
}



var columns = [
{
            text: "General",
            children: [
            {
                    text: localizer("columnName", "AOACategory"), field: "AOACategory", hidden: false,
                    headerRenderer: ({ column }) => StringHelper.xss`<div class="text-capitalize">${column.text}</div>`,
                    width: 180,
                    renderer: ({ value, record }) => {
                        const matchingRecord = dropstore.find(record => record.data.ID === value);
                        return matchingRecord ? matchingRecord.data.Description : value;
                    },
                    editor: {
                        type: 'dropdown',
                        valueField: 'ID',
                        displayField: 'Description',
                        width: 400,
                        autoload: true,
                        autoSync: true,
                        store: dropstore
                    },

            },
            
      {
                text: localizer("columnName", "CommitmentHomeTypeID"), field: "CommitmentHomeTypeID", width: 200, hidden: true,
                renderer: ({ value }) => {
                    const matchingRecord = CommitmentHomeTypeIDStore.find(record => record.data.ID === value);
                    return matchingRecord ? matchingRecord.data.Type : value;
                },
                editor: {
                    type: 'dropdown',
                    valueField: 'ID',
                    displayField: 'Type',
                    width: 400,
                    autoload: true,
                    autoSync: true,
                    store: CommitmentHomeTypeIDStore
                },
                headerRenderer: ({ column }) => StringHelper.xss`<div class="text-capitalize">${column.text}</div>`,
            },
        ]
}         

]


 const grid = new Grid({
            autoHeight: true,
            columnLines: true,
             maxHeight: "600px",
            minHeight: "80px",
            scrollable: true,
            appendTo: 'target',
            columns: columns,
            data: [ {  }],
            features: {
                cellEdit: true,
                stripe: true,
                filter: true,
                search: true,
                excelExporter: true
            },
            showDirty: true,
          });
          

      
       function loadGridData() {
    grid.masked = {
        text: 'Data is loading...'
    };
    return fetch("url")
        .then(response => response.json())
        .then(data => {
            return data;
        })
        .catch(error => {
            console.log('Error while fetching data', error);
            return [];
        })
}
   
loadGridData().then(griddata => {
    gridData = griddata.data;
    grid.store.data = gridData;
    grid.unmask();
})

[Animal]

That's not what is making it slow.

It's an async operation. The stores will load when they load.

It's this:

autoHeight: true

Give your grid a height in which to render only a few rows. That is how virtualized rendering works.

[neetu@ciirus.com]

Ok, I have set height but you plz tell how to call api once grid is loaded.
I mean which event work when I want to call some api once data is loaded in grid

[marcio]

Hey,

If I understood correctly, you're looking for https://bryntum.com/products/grid/docs/api/Core/data/AjaxStore#event-load that is triggered when data is loaded to the store.

If you meant when the data is displayed in the grid, perhaps you can use https://bryntum.com/products/grid/docs/api/Grid/view/GridBase#event-renderRows

[Animal]

But that would be a waste of time. Kick the load off as soon as possible. It has no effect on performance.