jQWidgets Forums

jQuery UI Widgets Forums Angular formControlArray not working with jqxGrid

This topic contains 1 reply, has 2 voices, and was last updated by  Martin 5 years, 5 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • formControlArray not working with jqxGrid #108170

    If user change the product by selecting different value in product list drop-down then value in appForm is not reflecting.

    Could you please suggest how to connect jqxGrid with dataModel (formControlArray=”dataModel” is not working)?

    app.component.ts:

    import { Component, OnInit, ViewChild } from ‘@angular/core’;

    @Component({
    selector: ‘app-home’,
    templateUrl: ‘./home.component.html’,
    styleUrls: [ ]
    })
    export class AppComponent implements OnInit {

    @ViewChild(‘appGrid’) appGrid: jqxGridComponent;

    dataModel = [{
    firstname: ‘Lan’,
    lastname: ‘Saylor’,
    productValue: {
    code: ‘2’,
    value: ‘Cappuccino’
    }
    }, {
    firstname: ‘Peter’,
    lastname: ‘Bein’,
    productValue: {
    code: ‘1’,
    value: ‘Black Tea’
    }
    }]

    products = [{
    code: ‘1’,
    value: ‘Black Tea’
    }, {
    code: ‘2’,
    value: ‘Cappuccino’
    }]

    settings: jqwidgets.GridOptions = {
    editable: true,
    enabletooltips: true,
    columnsmenu: false,
    source: new jqx.dataAdapter({
    datatype: ‘array’,
    datafields: [
    { name: ‘firstname’, type: ‘string’ },
    { name: ‘lastname’, type: ‘string’ }
    { name: ‘productValue’, map: ‘product>value’ }
    ],
    localdata: this.dataModel
    }),
    columns: [
    { text: ‘First Name’, datafield: ‘firstname’, width: ‘30%’ },
    { text: ‘Last Name’, datafield: ‘lastname’, width: ‘30%’ },
    { text: ‘Product’, datafield: ‘productValue’, width: ‘40%’,
    columntype: ‘dropdownlist’,
    createeditor: function (row, cellvalue, editor) {
    editor.jqxDropDownList({
    source: this.products,
    displayMember: ‘value’,
    valueMember: ‘code’
    });
    }
    }
    ]
    };

    ngOnInit(): void {
    this.appGrid.createComponent(this.settings);
    }

    constructor(private formBuilder: FormBuilder) { }

    this.appForm = this.formBuilder.group({
    dataModel: new this.formBuilder.group(this.dataModel);
    });

    }

    app.component.html:
    <form [formGroup]=”appForm”>
    <jqxGrid id=”appGrid” formControlArray=”dataModel” #appGrid></jqxGrid>
    </form>

    formControlArray not working with jqxGrid #108215

    Martin
    Participant

    Hello ashwin.kuntla@gmail.com,

    JqxGrid does not have such functionality and such property formControlArray.
    You would need to bind to the cellvaluechanged event of the grid and update the value manually.

    Best Regards,
    Martin

    jQWidgets Team
    https://www.jqwidgets.com/

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.