The problem use everpresentrow to add a column with columntype is dropdownlist

[royerParticipant]

I have a column define like this:
text: ‘Action’,
datafield: ‘transtype’, cellsalign: ‘left’, align: ‘center’, width: 100 ,
displayfield: ‘transtype_name’ , columntype: ‘dropdownlist’ ,
createeditor: this.createTransTypesDropDownList ,

createeverpresentrowwidget: (datafield, htmlElement, popup, addCallback) => {
var inputTag = $(“<div style=’border: none;’></div>”).appendTo(htmlElement);
this._everpresent_calfield.actionEdit = inputTag;
inputTag.jqxDropDownList({
popupZIndex: 999999, placeHolder:”Action:”, source:this.transtypeAdapter.records,
displayMember: ‘name’, valueMember: ‘id’, width: ‘100%’, height: 30, dropDownWidth: 220
});

inputTag.change((event)=>{
var value = inputTag.val();
if (value) {
var transtype = this.transTypes.find(e=>e.id==value);
console.log(transtype: ${JSON.stringify(transtype)});
}
});

$(document).on(‘keydown.transtype’, (event)=>{
if (event.keyCode === 27) {
if (event.target === inputTag[0])
var e = ”;
//this.myGrid.showeverpresentrow(false);
} else if (event.keyCode === 13) {
if (event.target === inputTag[0]) {
console.log(action catch Enter key pressed);
addCallback();
} else if ($(event.target).ischildof(inputTag)) {
console.log(action catch Enter key pressed in the child element.);
addCallback();
}
}
});

return inputTag;
},
geteverpresentrowwidgetvalue: (datafield, htmlElement)=>{
var selectedItem = htmlElement.jqxDropDownList(‘getSelectedItem’);
if (!selectedItem)
return ”;
var value = selectedItem.value;
return value;
},
validateeverpresentrowwidgetvalue: (datafield, value, rowValues)=>{
if (!value)
return false;
return true;
}

Add new row looks is successful.
But when I update the lastest new rows, in the updaterow callback, I found the rowid alwasy is 0, so when commit this update with true,
one row disappear
because they have same rowid.

[HristoParticipant]

Hello royer,

Could you provide us a whole example for better analyze?

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[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
    }
  }
}

[HristoParticipant]

Hello royer,

Thank you for this example.
You could try to set some value for first (initial) row (set null or unique ID) – or { id: 0, date: new Date(2017, 1, 1), action: 1, symbol: 'AAPL', ammount: 1000.00 };
It seems to work fine on that way.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[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.

[HristoParticipant]

Hello royer,

I tested your example and while the set ID was “{id:1, date: new Date(2017,1,1)…”, when I change the id to 0 (or with null) it start to works normal.
Because when adding a new row, it is with “id: 1” and in that moment appears two rows with the same ID and this is incompatible.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts