Show more table rows

[Madalina Oancea]

I created two components, each displaying a table with 2 rows initially. I created a show more button that should add two extra rows every time it is clicked. The button in component-one works as expected, but the button in component-two is not displaying the extra two rows when clicked. I am not seeing any errors in the console and really cannot figure out why it's not working....If I remove component-one then the button in component-two starts working as expected. Both components have the same functionality so I don't understand why the show more button in component-two is not working.

component-one.component.html

<ejs-grid [dataSource]="data.slice(0, items)">
  <e-columns>
    <e-column
      field="OrderID"
      headerText="Order ID"
      textAlign="Right"
      width="90"
    ></e-column>
    <e-column
      field="CustomerID"
      headerText="Customer ID"
      width="120"
    ></e-column>
    <e-column
      field="Freight"
      headerText="Freight"
      textAlign="Right"
      format="C2"
      width="90"
    ></e-column>
    <e-column
      field="OrderDate"
      headerText="Order Date"
      textAlign="Right"
      format="yMd"
      width="120"
    ></e-column>
  </e-columns>
</ejs-grid>
<button (click)="showMore()">show more</button>

component-one.component.ts

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

@Component({
  selector: 'app-component-one',
  templateUrl: './component-one.component.html',
  styleUrls: ['./component-one.component.scss'],
})
export class ComponentOneComponent implements OnInit {
  constructor() {}

  ngOnInit(): void {}

  data: object[] = [
    {
      OrderID: 10258,
      CustomerID: 'ERNSH',
      EmployeeID: 1,
      OrderDate: new Date(8375418e5),
      ShipName: 'Ernst Handel',
      ShipCity: 'Graz',
      ShipAddress: 'Kirchgasse 6',
      ShipRegion: 'CJ',
      ShipPostalCode: '8010',
      ShipCountry: 'Austria',
      Freight: 140.51,
      Verified: !0,
    },
    {
      OrderID: 10259,
      CustomerID: 'CENTC',
      EmployeeID: 4,
      OrderDate: new Date(8376282e5),
      ShipName: 'Centro comercial Moctezuma',
      ShipCity: 'México D.F.',
      ShipAddress: 'Sierras de Granada 9993',
      ShipRegion: 'CJ',
      ShipPostalCode: '05022',
      ShipCountry: 'Mexico',
      Freight: 3.25,
      Verified: !1,
    },
    {
      OrderID: 10260,
      CustomerID: 'OTTIK',
      EmployeeID: 4,
      OrderDate: new Date(8377146e5),
      ShipName: 'Ottilies Käseladen',
      ShipCity: 'Köln',
      ShipAddress: 'Mehrheimerstr. 369',
      ShipRegion: 'CJ',
      ShipPostalCode: '50739',
      ShipCountry: 'Germany',
      Freight: 55.09,
      Verified: !0,
    },
    {
      OrderID: 10261,
      CustomerID: 'QUEDE',
      EmployeeID: 4,
      OrderDate: new Date(8377146e5),
      ShipName: 'Que Delícia',
      ShipCity: 'Rio de Janeiro',
      ShipAddress: 'Rua da Panificadora, 12',
      ShipRegion: 'RJ',
      ShipPostalCode: '02389-673',
      ShipCountry: 'Brazil',
      Freight: 3.05,
      Verified: !1,
    },
    {
      OrderID: 10262,
      CustomerID: 'RATTC',
      EmployeeID: 8,
      OrderDate: new Date(8379738e5),
      ShipName: 'Rattlesnake Canyon Grocery',
      ShipCity: 'Albuquerque',
      ShipAddress: '2817 Milton Dr.',
      ShipRegion: 'NM',
      ShipPostalCode: '87110',
      ShipCountry: 'USA',
      Freight: 48.29,
      Verified: !0,
    },
  ];

  items: number = 2;
  showMore() {
    this.items += 2;
  }
}

component-two.component.html

<ejs-grid [dataSource]="data.slice(0, items)">
  <e-columns>
    <e-column
      field="OrderID"
      headerText="Order ID"
      textAlign="Right"
      width="90"
    ></e-column>
    <e-column
      field="CustomerID"
      headerText="Customer ID"
      width="120"
    ></e-column>
    <e-column
      field="Freight"
      headerText="Freight"
      textAlign="Right"
      format="C2"
      width="90"
    ></e-column>
    <e-column
      field="OrderDate"
      headerText="Order Date"
      textAlign="Right"
      format="yMd"
      width="120"
    ></e-column>
  </e-columns>
</ejs-grid>
<button (click)="showMore()">show more</button>

component-two.component.ts

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

@Component({
  selector: 'app-component-two',
  templateUrl: './component-two.component.html',
  styleUrls: ['./component-two.component.scss'],
})
export class ComponentTwoComponent implements OnInit {
  constructor() {}

  ngOnInit(): void {}
  data: object[] = [
    {
      OrderID: 10258,
      CustomerID: 'ERNSH',
      EmployeeID: 1,
      OrderDate: new Date(8375418e5),
      ShipName: 'Ernst Handel',
      ShipCity: 'Graz',
      ShipAddress: 'Kirchgasse 6',
      ShipRegion: 'CJ',
      ShipPostalCode: '8010',
      ShipCountry: 'Austria',
      Freight: 140.51,
      Verified: !0,
    },
    {
      OrderID: 10259,
      CustomerID: 'CENTC',
      EmployeeID: 4,
      OrderDate: new Date(8376282e5),
      ShipName: 'Centro comercial Moctezuma',
      ShipCity: 'México D.F.',
      ShipAddress: 'Sierras de Granada 9993',
      ShipRegion: 'CJ',
      ShipPostalCode: '05022',
      ShipCountry: 'Mexico',
      Freight: 3.25,
      Verified: !1,
    },
    {
      OrderID: 10260,
      CustomerID: 'OTTIK',
      EmployeeID: 4,
      OrderDate: new Date(8377146e5),
      ShipName: 'Ottilies Käseladen',
      ShipCity: 'Köln',
      ShipAddress: 'Mehrheimerstr. 369',
      ShipRegion: 'CJ',
      ShipPostalCode: '50739',
      ShipCountry: 'Germany',
      Freight: 55.09,
      Verified: !0,
    },
    {
      OrderID: 10261,
      CustomerID: 'QUEDE',
      EmployeeID: 4,
      OrderDate: new Date(8377146e5),
      ShipName: 'Que Delícia',
      ShipCity: 'Rio de Janeiro',
      ShipAddress: 'Rua da Panificadora, 12',
      ShipRegion: 'RJ',
      ShipPostalCode: '02389-673',
      ShipCountry: 'Brazil',
      Freight: 3.05,
      Verified: !1,
    },
    {
      OrderID: 10262,
      CustomerID: 'RATTC',
      EmployeeID: 8,
      OrderDate: new Date(8379738e5),
      ShipName: 'Rattlesnake Canyon Grocery',
      ShipCity: 'Albuquerque',
      ShipAddress: '2817 Milton Dr.',
      ShipRegion: 'NM',
      ShipPostalCode: '87110',
      ShipCountry: 'USA',
      Freight: 48.29,
      Verified: !0,
    },
  ];

  items: number = 2;
  showMore() {
    this.items += 2;
  }
}

[Vinitha Balasubramanian]

Hi Madalina,

Thank you for reaching out to Syncfusion support.

Based on your query, it sounds like you want to add more rows to two Grids using a single button click. We have prepared a sample that demonstrates how to add a new row of data at a specific index on external button click for a Grid. Please see the code and sample below for more information.

In the app component, we use ViewChild to get an instance of the two Grids and add a new row of data to each of them when the `showMore` function is called

[app.component.ts]

 

@ViewChild('grid1')

  public grid1: GridComponent;           // get instance for first grid using id

  @ViewChild('grid2')

  public grid2: GridComponent;         // get instance for second grid using id

 

  showMore() {

    var obj1 = { OrderID: 1009, CustomerID: 'John', ShipCountry: 'Brazil' };

    this.grid1.addRecord(obj1, 1);                                    // add a new row

    var obj2 = { OrderID: 1010, CustomerID: 'Ram', ShipCountry: 'Brazil' };

    this.grid2.addRecord(obj2, 0);                                   // add a new row

  }

[app.component.html]

<ejs-grid #grid1 [dataSource]="data" height="250">    // set id property to access the grid component

…

</ejs-grid>

<ejs-grid #grid2 [dataSource]="data" height="250">   // set id property to access the grid component

…

</ejs-grid>

Sample : https://stackblitz.com/edit/angular-z6h1kb?file=app.component.html,app.component.ts

Regards,

Vinitha Balasubramanian

[Madalina Oancea]

Hi Vinitha,

Thank you for your response. I would like to have 2 separate buttons. One button for the first grid and one button for the second grid. If I click on the button in the first component it should add more rows only to the first grid. If I click on the button in the second component it should add more rows only to the second grid.

I have tried the sample in the Stackblitz but it does not seem to work for me.

Thank you,

Madalina

[Vinitha Balasubramanian]

Based on your update, it sounds like you want to add more rows to two Grids using a two separate button click. We have prepared a sample that demonstrates how to add a new row of data at a specific index on external button click for a Grid. Please see the code and sample below for more information.

[Grid1]

[app.component.html]

 

<button (click)="showMoreData()">Show more data for first Grid</button>

<ejs-grid

      #grid1                 // set id property to access the grid component

      id="Normalgrid"

      [dataSource]="data1"

      [allowPaging]="true"

      [editSettings]="editSettings"

    >

 

[app.component.ts]

 

@ViewChild('grid1')

  public grid1: GridComponent;             // get instance for first grid using id property

showMoreData() {

    var obj1 = { OrderID: 1009, CustomerID: 'John', ShipCountry: 'Brazil' };

    this.grid1.addRecord(obj1, 1);             // add a new row for first grid

 

  }

 

[Grid2]

[app.component.html]

 

<button (click)="showMoreDataFn()">show more for second Grid</button>

 

<ejs-grid

    #grid2                    // set id property to access the grid component

    [dataSource]="data2"

    height="250"

    [allowPaging]="true"

    [editSettings]="editSettings"

  >

…

</ejs-grid>

 

[app.component.ts]

 

@ViewChild('grid2')

  public grid2: GridComponent;               // get instance for second grid using id property

 

showMoreDataFn() {

    var obj2 = { OrderID: 1010, CustomerID: 'Ram', ShipCountry: 'Brazil' };

    this.grid2.addRecord(obj2, 2);   // add a new row for second grid

  }

 

Sample : https://stackblitz.com/edit/angular-dtfegw-6vmw4c?file=app.component.html,app.component.ts

Note : In the app component, we use ViewChild to get an instance of the two Grids and add a new row of data to each of the grid using “showMoreData” and “showMoreDataFn” function