Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #102133
    Dark Beccio
    Member
    Up
    0
    Down

    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”>

    #102134
    YavorDashev
    Member
    Up
    0
    Down

    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/

    #102135
    Dark Beccio
    Member
    Up
    0
    Down

    works great ty =)

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.