adding new column

[Dark Beccio]

hi,
i was looking this demo where u can add a new column in the grid.
https://www.htmlelements.com/demos/grid/dynamic-columns/
the problem is the column datafield that is already loaded inside the grid.
Is it possible to create a new column with a new datafield not yet loaded inside grid smart data adapter?
 
something like
const columns = myGrid.columns;
const newDataField = [some data];
const newColumn = new Smart.Grid.Column({label: newLabel, dataField:newDataField ,dataType:string );
columns.push(newColumn);
myGrid.refresh();
 
TY
<pre class=”prettyprint prettyprinted”>

[YavorDashev]

Hi Dark Becccio,
Yes, the functionality you need is possible with the SmartGrid component and I have also create a quick code example using the demo for adding columns to the grid as a base for it.

  addColumn.addEventListener('click', function (event) {
        for (let i = 0; i < columnsList.length; i++) {
            let alreadyAdded = false;
            for (let j = 0; j < columns.length; j++) {
                const column = columns[j];
                if (column && column.label === columnsList[i]) {
                    alreadyAdded = true;
                    break;
                }
            }
            if (alreadyAdded) {
                continue;
            }
            let gridDataFields =  grid.dataSource.dataFields;
            const newDataField = {name: 'ID', dataType:'number'};
            gridDataFields.push(newDataField);
            const newGridDataSource = new window.Smart.DataAdapter({
                dataSource: window.getCountriesData(),
                dataFields: gridDataFields
            });
            grid.dataSource= newGridDataSource;
            const newColumn = new window.Smart.Grid.Column({ label: columnsList[i], dataField: columnsList[i] });
            columns.push(newColumn);
            grid.refresh();
            break;
        }
        updateButtonsDisabledState();
    });

Note that I have removed the “ID” datafield from the grid’s datasource when its initialy loaded like so:

window.Smart('#grid', class {
    get properties() {
        return {
            dataSource: new window.Smart.DataAdapter({
                dataSource: window.getCountriesData(),
                dataFields: [
                    'Country: string',
                    'Area: number',
                    'Population_Urban: number',
                    'Population_Rural: number',
                    'Population_Total: number',
                    'GDP_Agriculture: number',
                    'GDP_Industry: number',
                    'GDP_Services: number',
                    'GDP_Total: number'
                ]
            }),
            columns: [
                'Country',
                'Area',
                'Population_Rural',
                'Population_Total',
                'GDP_Total'
            ]
        };
    }
});

Let me know if that works for you!
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[Dark Beccio]

works great ty =)

[Author]

Posts