In a FlexGrid populated from database, how to have a hard coded column?

Posted by: kyle.m.vassella on 16 November 2018, 1:04 pm EST

    • Post Options:
    • Link

    Posted 16 November 2018, 1:04 pm EST

    In Angular 6, we’ve got a FlexGrid which populates from a database table.

    I’d like to include an extra column which does not exist in our database table. This column will have a ‘delete’ button for each row. However, when trying to code this in the HTML, if I place a (or any code, text etc) in that column, the whole column is still blank. I’m assuming because the way our collectionView is set up with our GET request to the database (which does not have this ‘delete’ column).

    How can I work around this?

    HTML:

    
     <wj-flex-grid #m_grid [keyActionTab]="'CycleOut'" [allowAddNew]="true" [itemsSource]="m_collectionView" (initialized)="initGrid(sender, event)"
            <wj-flex-grid-column [header]="'userName'" [binding]="'userName'" [width]="175" [visible]="true"></wj-flex-grid-column>
    
            <wj-flex-grid-column [header]="'firstName'" [binding]="'firstName'" [width]="175" [visible]="true"></wj-flex-grid-column>
    
    <!-- my custom column: -->
            <wj-flex-grid-column [header]="'delete'" [width]="130" [visible]="true" format="string"><button>Delete me! </button></wj-flex-grid-column>
    
    </wj-flex-grid>
    
    

    TS:

    
        loadData() {
            this.databaseService.get(this.myApiPath)
                .subscribe
                (
                data => {
                    if (data) {
                        this.setCollectionView(data);
                        this.m_collectionView.trackChanges = true;
                    }
                },
                errorCode => {
                    // this.m_statusMessage = "";
                }
                );
        }
    

    I guess I could add a column for this in the database if absolutely necessary, but I don’t know how to add a button from our SQL environment (probably not possible). So I’d like to just populate this column from the front end if possible.

  • Posted 19 November 2018, 1:09 am EST

    Hi,

    You may use cell-templates to style cells as required.

    Please refer to the following sample which demonstrates the required functionality:

    https://stackblitz.com/edit/angular-texyf9?file=src%2Fapp%2Fapp.component.html

    Also, check out the following sample on cell-templates: https://demos.wijmo.com/5/SampleExplorer/SampleExplorer/Sample/celltemplateintro

    ~Sharad

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels