Two way data binding is not working in jqxtreegrid.

[ErVishalMParticipant]

Hi, I am wondering if there is two way data binding in angular jqxtreegrid. I have created a editable jqxtreegrid from the ref. of jqxtreegrid but when i edit any column in jqxtreegrid then data is not changing in the assigned localdata variable.

[MartinParticipant]

Hello ErVishalM,

There isn’t two way data binding for the source.
You can update the localdata manually, for example on cellEndEdit event.

Best Regards,
Martin

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

[ErVishalMParticipant]

I think there is a confusion in my question.
Here is my code –

import { Component, ViewChild, OnInit, OnChanges, AfterViewInit } from '@angular/core';
import { jqxTreeGridComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxtreegrid';
import { PageParam, SearchParam, SortParam, PagingParam } from '../shared/class/queryparam';
import { MatSnackBarConfig } from '@angular/material';
import { FormControl, Validators } from '@angular/forms';
declare var $: any;

@Component({
  selector: 'app-assetclass',
  templateUrl: './assetclass.component.html',
  styleUrls: ['./assetclass.component.css']
})
export class AssetclassComponent implements OnInit, OnChanges, AfterViewInit {
  constructor() { }
  @ViewChild('TreeGrid') treeGrid: jqxTreeGridComponent;

  rowKey = null;
  // assetClassData: AssetClass[];
  assetClassData: any[] = [{
    'AssetClassID': 1, 'AssetClassName': 'Test', 'AssetClassCode': 'Test',
    'ParentAssetClassID': 0, 'InActive': false
  }];
  PageParams: PageParam[] = [];
  SearchParams: SearchParam[] = [];
  SortParams: SortParam;
  PagingParams: PagingParam;
  PageNumber = 1;

  columns: any[] = [
    { text: 'Name', dataField: 'AssetClassName', align: 'center', width: '70%' },
    { text: 'Code', dataField: 'AssetClassCode', align: 'right', cellsAlign: 'right', width: '20%' },
    {
      text: 'Inactive', dataField: 'InActive', filtertype: 'checkedlist', align: 'center', cellsAlign: 'center', width: '10%'
      , columnType: 'template',
      createEditor: (row, cellvalue, editor, cellText, width, height) => {
        // construct the editor.
        editor.jqxCheckBox({ checked: false });
      },
      initEditor: (row, cellvalue, editor, celltext, width, height) => {
        // set the editor's current value. The callback is called each time the editor is displayed.
        editor.jqxCheckBox('checked', cellvalue);
      },
      getEditorValue: (row, cellvalue, editor) => {
        // return the editor's value.
        return editor.val();
      }
    }
  ];
  source: any =
    {
      dataType: 'json',
      dataFields: [
        { name: 'AssetClassID', type: 'number' },
        { name: 'AssetClassName', type: 'string' },
        { name: 'ParentAssetClassID', type: 'number' },
        { name: 'AssetClassCode', type: 'string' },
        { name: 'InActive', type: 'number' }
      ],
      hierarchy:
      {
        keyDataField: { name: 'AssetClassID' },
        parentDataField: { name: 'ParentAssetClassID' }
      },
      id: 'AssetClassID',
      localData: this.assetClassData,
      addRow: (rowID, rowData, position, parentID, commit) => {
        // synchronize with the server - send insert command
        // call commit with parameter true if the synchronization with the server is successfull
        // and with parameter false if the synchronization failed.
        // you can pass additional argument to the commit callback which represents the new ID if it is generated from a DB.
        this.newRowID = rowID;
        commit(true);
      },
      updateRow: (rowID, rowData, commit) => {
        // synchronize with the server - send update command
        // call commit with parameter true if the synchronization with the server is successful 
        // and with parameter false if the synchronization failed.
        commit(true);
      },
      deleteRow: (rowID, commit) => {
        // synchronize with the server - send delete command
        // call commit with parameter true if the synchronization with the server is successful 
        // and with parameter false if the synchronization failed.
        commit(true);
      }
    };
  dataAdapter: any = new jqx.dataAdapter(this.source);
  newRowID = null;
  theme: String = '';
  buttonsObject: any = null;

  ngOnInit() {
  }

  ngOnChanges() {
    // this.loadList();
  }

  ngAfterViewInit(): void {
    this.treeGrid.createComponent();
  }

  updateButtons(action: string, buttons: any): void {
    switch (action) {
      case 'Select':
        buttons.addButton.jqxButton({ disabled: false });
        buttons.deleteButton.jqxButton({ disabled: false });
        buttons.editButton.jqxButton({ disabled: false });
        buttons.cancelButton.jqxButton({ disabled: true });
        buttons.updateButton.jqxButton({ disabled: true });
        break;
      case 'Unselect':
        buttons.addButton.jqxButton({ disabled: true });
        buttons.deleteButton.jqxButton({ disabled: true });
        buttons.editButton.jqxButton({ disabled: true });
        buttons.cancelButton.jqxButton({ disabled: true });
        buttons.updateButton.jqxButton({ disabled: true });
        break;
      case 'Edit':
        buttons.addButton.jqxButton({ disabled: true });
        buttons.deleteButton.jqxButton({ disabled: true });
        buttons.editButton.jqxButton({ disabled: true });
        buttons.cancelButton.jqxButton({ disabled: false });
        buttons.updateButton.jqxButton({ disabled: false });
        break;
      case 'End Edit':
        buttons.addButton.jqxButton({ disabled: false });
        buttons.deleteButton.jqxButton({ disabled: false });
        buttons.editButton.jqxButton({ disabled: false });
        buttons.cancelButton.jqxButton({ disabled: true });
        buttons.updateButton.jqxButton({ disabled: true });
        console.log(this.assetClassData);
        break;
    }
  }
  renderToolbar = (toolBar) => {
    const toTheme = (className) => {
      if (this.theme === '') {
        return className;
      }
      return className + ' ' + className + '-' + this.theme;
    };
    // appends buttons to the status bar.
    const container: any = $('<div style="overflow: hidden; position: relative; height: 100%; width: 100%;"></div>');
    const buttonTemplate: any = '<div style="float: left; padding: 3px; margin: 2px;">' +
      '<div style="margin: 4px; width: 16px; height: 16px;"></div></div>';
    const addButton: any = $(buttonTemplate);
    const editButton: any = $(buttonTemplate);
    const deleteButton: any = $(buttonTemplate);
    const cancelButton: any = $(buttonTemplate);
    const updateButton: any = $(buttonTemplate);
    container.append(addButton);
    container.append(editButton);
    container.append(deleteButton);
    container.append(cancelButton);
    container.append(updateButton);
    toolBar.append(container);
    addButton.jqxButton({ cursor: 'pointer', enableDefault: false, disabled: true, height: 25, width: 25 });
    addButton.find('div:first').addClass(toTheme('jqx-icon-plus'));
    addButton.jqxTooltip({ position: 'bottom', content: 'Add' });
    editButton.jqxButton({ cursor: 'pointer', disabled: true, enableDefault: false, height: 25, width: 25 });
    editButton.find('div:first').addClass(toTheme('jqx-icon-edit'));
    editButton.jqxTooltip({ position: 'bottom', content: 'Edit' });
    deleteButton.jqxButton({ cursor: 'pointer', disabled: true, enableDefault: false, height: 25, width: 25 });
    deleteButton.find('div:first').addClass(toTheme('jqx-icon-delete'));
    deleteButton.jqxTooltip({ position: 'bottom', content: 'Delete' });
    updateButton.jqxButton({ cursor: 'pointer', disabled: true, enableDefault: false, height: 25, width: 25 });
    updateButton.find('div:first').addClass(toTheme('jqx-icon-save'));
    updateButton.jqxTooltip({ position: 'bottom', content: 'Save Changes' });
    cancelButton.jqxButton({ cursor: 'pointer', disabled: true, enableDefault: false, height: 25, width: 25 });
    cancelButton.find('div:first').addClass(toTheme('jqx-icon-cancel'));
    cancelButton.jqxTooltip({ position: 'bottom', content: 'Cancel' });

    this.buttonsObject = {
      addButton: addButton,
      editButton: editButton,
      deleteButton: deleteButton,
      cancelButton: cancelButton,
      updateButton: updateButton,
    };

    addButton.click((event) => {
      if (!addButton.jqxButton('disabled')) {
        this.treeGrid.expandRow(this.rowKey);
        // add new empty row.
        this.treeGrid.addRow(null, {}, 'first', this.rowKey);
        // select the first row and clear the selection.
        this.treeGrid.clearSelection();
        this.treeGrid.selectRow(this.newRowID);
        // edit the new row.
        this.treeGrid.beginRowEdit(this.newRowID);
        this.updateButtons('add', this.buttonsObject);
      } else {
        this.treeGrid.addRow(null, {}, 'first', '0');
      }
    });
    cancelButton.click((event) => {
      if (!cancelButton.jqxButton('disabled')) {
        // cancel changes.
        this.treeGrid.endRowEdit(this.rowKey, true);
      }
    });
    updateButton.click((event) => {
      if (!updateButton.jqxButton('disabled')) {
        this.treeGrid.endRowEdit(this.rowKey, false);
      }
    });
    editButton.click(() => {
      if (!editButton.jqxButton('disabled')) {
        this.treeGrid.beginRowEdit(this.rowKey);
        this.updateButtons('edit', this.buttonsObject);
      }
    });
    deleteButton.click(() => {
      if (!deleteButton.jqxButton('disabled')) {
        const selection = this.treeGrid.getSelection();
        if (selection.length > 1) {
          for (let i = 0; i < selection.length; i++) {
            const key = this.treeGrid.getKey(selection[i]);
            this.treeGrid.deleteRow(key);
          }
        } else {
          this.treeGrid.deleteRow(this.rowKey);
        }
        this.updateButtons('delete', this.buttonsObject);
      }
    });
  }
  rowSelect(event: any): void {
    const args = event.args;
    this.rowKey = args.key;
    this.updateButtons('Select', this.buttonsObject);
  }
  rowUnselect(event: any): void {
    this.updateButtons('Unselect', this.buttonsObject);
  }
  rowEndEdit(event: any): void {
    this.updateButtons('End Edit', this.buttonsObject);
  }
  rowBeginEdit(event: any): void {
    this.updateButtons('Edit', this.buttonsObject);
  }
  getWidth(): any {
    if (document.body.offsetWidth < 850) {
      return '90%';
    }
    return 850;
  }
}

If i change Text value “Test” to “Testing” then in view it shows me “Testing” but in assetClassData data in still “Test”. I think that should auto update when i am changing any field binded from that. Otherwise how can i pick updated value? means Is there any other object in which data is stored as “Testing”?

[MartinParticipant]

Hello ErVishalM,

The data binding is one-way so the assetClassData would not auto update.
When you edit a cell you can pick the updated value from event.args parameter of the CellEndEdit event, as well as other information about the cell and row.

You can take a look at this Demo.

Best Regards,
Martin

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

[Author]

Posts