addNew on grid with paging row disapears (well formatted)

addNew on grid with paging row disapears (well formatted)

Posted by: eomeroff on 26 October 2017, 4:45 am EST

• 

  eomeroff

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 26 October 2017, 4:45 am EST

  I have grid like this:

  <div class="btn-group">
      <button type="button" class="btn btn-default" title="{{'persons.paging.firstPage'|translate}}"
              [disabled]="cvPaging.pageIndex <= 0"
              (click)="cvPaging.moveToFirstPage()">
          <span class="glyphicon glyphicon-fast-backward"></span>
      </button>
      <button type="button" class="btn btn-default" title="{{'persons.paging.previousPage'|translate}}"
              [disabled]="cvPaging.pageIndex <= 0"
              (click)="cvPaging.moveToPreviousPage()">
          <span class="glyphicon glyphicon-step-backward"></span>
      </button>
      <button type="button" class="btn btn-default numberOfPages disabledBtn" disabled>
          <span>{{'persons.paging.page'|translate}} {{cvPaging.pageIndex + 1}}/{{cvPaging.pageCount}}</span>
      </button>
      <button type="button" class="btn btn-default" title="{{'persons.paging.nextPage'|translate}}"
              [disabled]="cvPaging.pageIndex >= cvPaging.pageCount - 1"
              (click)="cvPaging.moveToNextPage()">
          <span class="glyphicon glyphicon-step-forward"></span>
      </button>
      <button type="button" class="btn btn-default" title="{{'persons.paging.lastPage'|translate}}"
              [disabled]="cvPaging.pageIndex >= cvPaging.pageCount - 1"
              (click)="cvPaging.moveToLastPage()">
          <span class="glyphicon glyphicon-fast-forward"></span>
      </button>
  </div>
  <div class="btn-group pull-right">
      <button type="button" class="btn btn-default btn-primary" title="{{'grid.persons.toolbar.btn.title.new'|translate}}"
              (click)="addNewRow()">
          <i class="fa fa-plus" aria-hidden="true">[/i]&nbsp;&nbsp;{{'grid.persons.toolbar.btn.new'|translate}}
          </button>
  </div>
  
  
  <wj-flex-grid
      #mainGrid
      [itemsSource]="cvPaging"
      [showAlternatingRows]="false"
      [allowDelete]="false"
      [showErrors]="showErrors"
      [validateEdits]="validateEdits"
      (initialized)="enableCustomValidation(mainGrid)"
  >
      <wj-flex-grid-column
              [header]="'grid.persons.header.name|translate"
              [binding]="'name'"
              [wordWrap]="true">
      </wj-flex-grid-column>
  
      <wj-flex-grid-column
              [header]="'grid.persons.header.surname|translate"
              [binding]="surname"
              [wordWrap]="true">
      </wj-flex-grid-column>
  </wj-flex-grid>
  

  In the component I initialize grid in constructor like this:

  
          this.cvPaging = new wjcCore.CollectionView(null, {
              currentItem: null,
              pageSize: 10,
              trackChanges: true,
  
              newItemCreator: () => {
                  return {
                      name:'',
                      surname:''
                      disabled: false
                  };
              },
              getError: (item: any, property: any) => {
  
                  switch (property) {
                      case 'name:
                          return item[property] === ''
                              ? 'Name is missing'
                              : null;
                      case 'surname':
                          return item[property] === ''
                              ? surname is missing'
                              : null;
                  }
                  return null;
              }
          });
  

  Data source is null for the Moment because I fill it just after I het all persons from Service:

      getAllPersons(term: string): void {
          this.personsService.get()
              .subscribe((result: any) => {
                      this.cvPaging.sourceCollection = result;
                  }
              );
      }
  

  here is Validation mehtod:

  
      enableCustomValidation(flex: WjFlexGrid) {
          flex.cellEditEnded.addHandler((s, e: any) => {
              if (this.customValidation && !s.activeEditor) {
                  this.showErrors = true; // show errors so user knows what's going on
                  this.validateEdits = true; // customValidation (row) implies validateEdits (cell)
                  let item = s.rows[e.row].dataItem;
                  s.columns.forEach(function (col) {
                      if (s.collectionView.getError(item, col.binding)) {
                          s.startEditing(true, e.row, col.index);
                          return;
                      }
                  });
              }
          });
      }
  

  here is handler for adding new row:

      addNewRow() {
          this.cvPaging.moveToLastPage();
          this.cvPaging.addNew();
      }
  

  My Problem is that when ever I click on some other row, the new row disapears. I have no way of perserving editing row visible while clicking on other rows. For example I want to copy value from another row etc.

  Please advise.

  Thank you.

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 27 October 2017, 7:06 am EST

  Hi Edis,
  
  The behavior you are observing is by design.

  Since you have enabled paging and allowAddNew property for adding a row, new row template gets displayed in each page to allow add record.

  Now, once you start editing in FlexGrid and change selection to another row, the row gets committed and add the record at the end of the data source and added row gets hide.

  Hope it clear!

  ~Manish