[royerParticipant]

Hi, Hristo
Thank you for your replay, but I couldn’t understand what you mean ‘to set some value for first row‘?

my problem is when use everpresentrow add two new rows, and then try to edit these new rows, there must have some bug.

if you mean just edit the first (initial) row, it’s not my point.

[royerParticipant]

Hi, Hristo,

I build a example . I use angular-cli Init a angular2 app.

after add two rows, then click the latest row to into edit mode, then press escape to quit edit mode,
the first add row disappear, and the left row can not into edit mode.

the app.component.ts :

/// <reference path="../../node_modules/jqwidgets-framework/jqwidgets-ts/jqwidgets.d.ts" />

import { Component, ViewChild, AfterViewInit } from '@angular/core';

import { jqxGridComponent } from 'jqwidgets-framework/jqwidgets-ts/angular_jqxgrid';

interface StockTransation {
  id: number,
  date: Date,
  action: number,
  symbol: string,
  ammount: number
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  title = 'app works!';
  rowid: any = null;

  @ViewChild('gridReference') myGrid: jqxGridComponent;

  actions: any = [
    {id: 1, name: 'buy'},
    {id: 2, name: 'sell'},
    {id: 3, name: 'deposit'},
    {id: 4, name: 'withdraw'},
    {id: 5, name: 'dividend'},
    {id: 6, name: 'buy to close'},
    {id: 7, name: 'sell to open'}
  ];

  transations: StockTransation[] = [
    {id:1, date: new Date(2017,1,1), action: 1, symbol: 'AAPL', ammount: 1000.00}
  ];

  ActionSource = {
    datatype: "array",
    datafields: [
      { name: 'id', type: 'number' },
      { name: 'name', type: 'string' }
    ],
    localdata: this.actions
  }
  ActionAdapter = new $.jqx.dataAdapter(this.ActionSource, {autoBind: true});

  _addrow = (rowid, rowdata, position, commit)=> {
    let Action = this.actions.find(e=>{return e.id == rowdata.action});
    rowdata.action_name = Action.name;
    commit(true);
  }
  _updaterow = (rowid, newdata, commit) => {
    this.rowid = rowid;
    commit(true);
  }

  dataSource = {
    datatype: 'array',
    datafields: [
      { name: 'id', type: 'int' },
      { name: 'date', type: 'date', format: 'yyy-MM-dd' },
      { name: 'action', type: 'int' },
      { name: 'action_name', value: 'action', values: { source: this.ActionAdapter.records, value: 'id', name: 'name'}},
      { name: 'symbol', type: 'string'},
      { name: 'ammount', type: 'float'}
    ],

    id: 'id',
    localdata: this.transations,
    addrow: this._addrow,
    updaterow: this._updaterow
  }

  dataAdapter = new $.jqx.dataAdapter(this.dataSource);

  settings: jqwidgets.GridOptions = {
    width: '100%',
    source: this.dataAdapter,
    selectionmode: 'multiplerows',
    pageable: false,
    autoheight: true,
    sortable: true,
    enabletooltips: true,
    editable: true,
    editmode: 'selectedrow',
    showeverpresentrow: true,
    columns: [
      { text: 'Date', datafield: 'date', cellsformat: 'yyyy-MM-dd', columntype: 'datetimeinput', width: 110},
      { text: 'Action', datafield: 'action', displayfield: 'action_name', cellsalign: 'left', align: 'center', width: 100,
        columntype: 'dropdownlist',
        createeditor: (row, value, editor)=> {
          editor.jqxDropDownList({source: this.ActionAdapter, displayMember: 'name', valueMember: 'id'})
        },
        createeverpresentrowwidget: (datafield, htmlElement, popup, addCallback)=> {
          var inputTag = $("<div style='border: none;'></div>").appendTo(htmlElement);
          inputTag.jqxDropDownList({
            popupZIndex: 999999, placeHolder:"Action:", source:this.ActionAdapter.records,
            displayMember: 'name', valueMember: 'id', width: '100%', height: 30, dropDownWidth: 130
          });
          $(document).on('keydown.action', (event)=>{
            if(event.keyCode==13) {
              if (event.target === inputTag[0]) {
                addCallback();
              } else if ($(event.target).ischildof(inputTag)) {
                addCallback();
              }
            }
          });
          return inputTag;
        },
        geteverpresentrowwidgetvalue: (datafield, htmlElement)=>{
          var selectedItem = htmlElement.jqxDropDownList('getSelectedItem');
          if (!selectedItem) {
            return '';
          } else {
            return selectedItem.value;
          }

        }

      },
      { text: 'Symbol', datafield: 'symbol'},
      { text: 'Ammount', datafield: 'ammount'}
    ]
  }

  ngAfterViewInit() {
    this.myGrid.createComponent(this.settings);
  }

}

the app.component.html :

<h1>
  {{title}}
</h1>
<p>updaterow param: rowid = {{rowid}}</p>
<jqxGrid #gridReference [auto-create]="false">
</jqxGrid>

the app.module.ts :

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { jqxGridComponent } from 'jqwidgets-framework/jqwidgets-ts/angular_jqxgrid';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent, jqxGridComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

the angular-cli.json :

{
  "project": {
    "version": "1.0.0-beta.28.3",
    "name": "jqxgrid"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "prefix": "app",
      "styles": [
        "../node_modules/jqwidgets-framework/jqwidgets/styles/jqx.base.css",
        "styles.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.js",
        "../node_modules/jqwidgets-framework/jqwidgets/jqxcore.js",
        "../node_modules/jqwidgets-framework/jqwidgets/jqxdata.js",
        "../node_modules/jqwidgets-framework/jqwidgets/jqxinput.js",
        "../node_modules/jqwidgets-framework/jqwidgets/jqxdatetimeinput.js",
        "../node_modules/jqwidgets-framework/jqwidgets/jqxcalendar.js",
        "../node_modules/jqwidgets-framework/jqwidgets/jqxscrollbar.js",
        "../node_modules/jqwidgets-framework/jqwidgets/jqxbuttons.js",
        "../node_modules/jqwidgets-framework/jqwidgets/jqxmenu.js",
        "../node_modules/jqwidgets-framework/jqwidgets/jqxlistbox.js",
        "../node_modules/jqwidgets-framework/jqwidgets/jqxdropdownlist.js",
        "../node_modules/jqwidgets-framework/jqwidgets/jqxcombobox.js",
        "../node_modules/jqwidgets-framework/jqwidgets/jqxcheckbox.js",
        "../node_modules/jqwidgets-framework/jqwidgets/jqxdata.export.js",
        "../node_modules/jqwidgets-framework/jqwidgets/jqxdraw.js",
        "../node_modules/jqwidgets-framework/jqwidgets/jqxchart.js",
        "../node_modules/jqwidgets-framework/jqwidgets/jqxchart.annotations.js",
        "../node_modules/jqwidgets-framework/jqwidgets/jqxchart.api.js",
        "../node_modules/jqwidgets-framework/jqwidgets/jqxchart.core.js",
        "../node_modules/jqwidgets-framework/jqwidgets/jqxchart.rangeselector.js",
        "../node_modules/jqwidgets-framework/jqwidgets/jqxgrid.js",
        "../node_modules/jqwidgets-framework/jqwidgets/jqxgrid.selection.js",
        "../node_modules/jqwidgets-framework/jqwidgets/jqxgrid.aggregates.js",
        "../node_modules/jqwidgets-framework/jqwidgets/jqxgrid.columnsreorder.js",
        "../node_modules/jqwidgets-framework/jqwidgets/jqxgrid.columnsresize.js",
        "../node_modules/jqwidgets-framework/jqwidgets/jqxgrid.edit.js",
        "../node_modules/jqwidgets-framework/jqwidgets/jqxgrid.export.js",
        "../node_modules/jqwidgets-framework/jqwidgets/jqxgrid.filter.js",
        "../node_modules/jqwidgets-framework/jqwidgets/jqxgrid.grouping.js",
        "../node_modules/jqwidgets-framework/jqwidgets/jqxgrid.pager.js",
        "../node_modules/jqwidgets-framework/jqwidgets/jqxgrid.sort.js",
        "../node_modules/jqwidgets-framework/jqwidgets/jqxgrid.storage.js",
        "../node_modules/jqwidgets-framework/jqwidgets/globalization/globalize.js"
      ],
      "environments": {
        "source": "environments/environment.ts",
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "files": "src/**/*.ts",
      "project": "src/tsconfig.json"
    },
    {
      "files": "e2e/**/*.ts",
      "project": "e2e/tsconfig.json"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "prefixInterfaces": false,
    "inline": {
      "style": false,
      "template": false
    },
    "spec": {
      "class": false,
      "component": true,
      "directive": true,
      "module": false,
      "pipe": true,
      "service": true
    }
  }
}

[royerParticipant]

if I remove input.attr('disabled', true);, then no exception will throw.

[royerParticipant]

hi, Peter Stoev, the Angular2 demo can not run. there no entry index.html to load systemjs.config.js

and in download package main index.htm I found you hide angular2 demo link.

        <li style="display:none;">
            jqxAngular2
            <ul>

I followed the instructions in your website . it can’t work.
then I follow the AOT version. it still can’t work.

I’ very interesting jqwidgets. but I also love angular2. could give us a fully angular2 project example ?

If use angluar-cli to create angular2 project is better, or just use offeice quickstart seed project.

[Author]

Posts