Add,update and delete functionality in grid in angular2

Add,update and delete functionality in grid in angular2

Posted by: bemes9226 on 25 July 2021, 9:13 pm EST

• 

  bemes9226

  • Post Options:
  • Link
    Copy

  Posted 25 July 2021, 9:13 pm EST

  Hi,
  
  i need to do operation like add, delete and update functionalities in grid.

• 

  bemes9226

  • Post Options:
  • Link
    Copy

  Posted 25 July 2021, 10:21 pm EST - Updated 3 October 2022, 1:04 pm EST

  when i click add button added row but columns data not added automatically.
  
  see here i have new row with empty data,
  
  1)in actions columns need to show more botton
  
  2)jurisdiction and tenetname columns need to show with search and plus icon when i click add row.

  

  1362×250 15 KB

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 26 July 2021, 7:27 am EST

  Hi,

  We were not able to replicate the scenario based on the information provided. Can you clarify, how you have created these custom cells (whether they are created using itemFormatter or through using cell template)? Kindly provide a sample or make changes in the below sample depicting the issue.

  However, to render the custom cell content in a newly added row, you may make use of the cell template property of the FlexGrid column.

  Please refer to the sample below:

  https://stackblitz.com/edit/angular-xkcztq

  Regards,
  
  Ashwin

• 

  bemes9226

  • Post Options:
  • Link
    Copy

  Posted 30 July 2021, 6:39 am EST - Updated 3 October 2022, 1:05 pm EST

  when i click (newrow) row inside +symbol popup will open,but here popup showing on bottom while grid scroll moving down popup appear .

  

  1284×621 34.9 KB

• 

  bemes9226

  • Post Options:
  • Link
    Copy

  Posted 30 July 2021, 6:41 am EST

  when i moving down using scrollbar popup is showing,other wise popu is bottom of the grid

• 

  bemes9226

  • Post Options:
  • Link
    Copy

  Posted 30 July 2021, 6:42 am EST

  after clicked on + icon popup not appear then am doing scroll down then popup is appear

• 

  bemes9226

  • Post Options:
  • Link
    Copy

  Posted 30 July 2021, 6:49 am EST

  <wj-flex-grid #flexGrid class=“bento-flex-grid has-row-hover” [class.list-grid]=“isListGrid” [itemsSource]=“data”
  
  [itemFormatter]=“itemFormatter” [stickyHeaders]=“true” [showMarquee]=“true” [showSort]=“true”
  
  [selectionMode]=“‘Row’” [headersVisibility]=“‘Column’” [allowDelete]=“true” [allowAddNew]=“true” (initialized)=“gridInitialized()”>
  
  
  
  <wj-flex-grid-filter #filter>

  <wj-flex-grid-column [header]=“‘Jurisdiction’” [binding]=“‘Jurisdiction’” [width]=“‘*’”
  
  [visible]=“columnDefinitionsByBinding[‘Jurisdiction’].visible”>
  
  <ng-template wjFlexGridCellTemplate [cellType]=“‘Cell’” let-item=“item”>
  
  
  
  

  
  
  {{item.Jurisdiction}}
  
  <span style=“float: right;margin-right: 18px;” (click)=“openJurisdictionModal()”>
  
  

    </ng-template>
  </wj-flex-grid-column>
  

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 2 August 2021, 4:00 am EST

  Hi,

  Can you share which modal popup are you using? Is it of wijmo or some other library? Also, can you share the OpenJurisdictionModal method’s implementation?

  ~regards

• 

  bemes9226

  • Post Options:
  • Link
    Copy

  Posted 2 August 2021, 8:01 am EST

  It is ngb modal service

• 

  bemes9226

  • Post Options:
  • Link
    Copy

  Posted 2 August 2021, 8:01 am EST

  It is ngb modal service

• 

  bemes9226

  • Post Options:
  • Link
    Copy

  Posted 2 August 2021, 11:27 pm EST

  openJurisdictionModal() {
  
  if(this.flexGrid.selectedItems.length>0){
  
  let value = this.flexGrid.selectedItems[0].Jurisdiction;
  
  let data = [{ “getItem”: value }];
  
  this.workflowService.sendMessage(data)
  
  }else{
  
  let value=null;
  
  let data = [{ “getItem”: value }];
  
  this.workflowService.sendMessage(data)
  
  }

  const options = { windowClass: 'modal-scroll textFieldJurisdiction', ariaLabelledBy: 'modal-scrollable-title' };
  const modalRef: NgbModalRef = this.modalService.open(JurisdictionComponent, options);
  modalRef.componentInstance.openModal = true;
  modalRef.result.then((result) => {
    this.workflowService.getMessage().subscribe(res => {
      this.JurisdictionSelectedItem = res[0].jurisdictionData;
      this.isSelectedJurisdiction = res[0].selected;
    })
    if (this.isSelectedJurisdiction) {
      let row = this.flexGrid.selection.row;
      let col = this.flexGrid.columns.getColumn("Jurisdiction").index;
      this.flexGrid.setCellData(row, col, this.JurisdictionSelectedItem);
    }
  });
  

  }

• 

  bemes9226

  • Post Options:
  • Link
    Copy

  Posted 2 August 2021, 11:28 pm EST

  public modalService: NgbModal

• 

  bemes9226

  • Post Options:
  • Link
    Copy

  Posted 2 August 2021, 11:28 pm EST

  reusable component

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 3 August 2021, 3:15 am EST

  Hi bemes9226,

  It seems that the issue is in ngb-modal. Unfortunately, it is not one of our components, so we cannot provide support for it. If possible, can you try using Wijmo’s Popup instead of the bootstrap modal and if you run into any issues with it, we will help you out.

  ~regards