impossible to use grid when different component

[mathodParticipant]

Hello,
I have a problem…
I have 2 angular component and, each with a grid.
But when i display my 2 grids, one can’t be selected, or update etc….
I don’t understand why …

my two components names are : “Tarif” and “Day”

Day HTML :

<div class ="daySelection">
    <jqxGrid *ngIf="showWeekTarif" #myGridDay
        [width]="getWidth()" [source]="dataAdapter"
        [autoheight]="true"
        [columns]="columns1" [selectionmode]="'multiplecellsextended'"
        [editable]="true">
    </jqxGrid>
    </div>

Day JS :

  url = "/api/setup/tarif/getDay";
  source: any =
  {

      url : this.url,
      datatype: "json",
      datafields:
      [
          { name: 'id',type: 'string'},
          { name: '1',type: 'string'},
          { name: '2',type: 'string'},
          { name: '3',type: 'string'},
          { name: '4',type: 'string'},
          { name: '5',type: 'string'},
          { name: '6',type: 'string'},
          { name: '7',type: 'string'},
          { name: '8',type: 'string'},
          { name: '9',type: 'string'},
          { name: '10',type: 'string'},
          { name: '11',type: 'string'},
          { name: '12',type: 'string'},
          { name: '13',type: 'string'},
          { name: '14',type: 'string'},
          { name: '15',type: 'string'},
          { name: '16',type: 'string'},
          { name: '17',type: 'string'},
          { name: '18',type: 'string'},
          { name: '19',type: 'string'},
          { name: '20',type: 'string'},
          { name: '21',type: 'string'},
          { name: '22',type: 'string'},
          { name: '23',type: 'string'},
          { name: '24',type: 'string'}
      ],
      id: 'id',
  };

  dataAdapter: any = new jqx.dataAdapter(this.source,{
      downloadComplete: function (data, status, xhr) { },
      loadComplete: function (data) { },
      loadError: function (xhr, status, error) { }
  }); 

  columns: any[] =
  [   
      { text: 'Name', datafield: 'id',width: 100, cellsalign: 'center' },
      { text: '1', datafield: '1',width: 80, cellsalign: 'center' },
      { text: '2', datafield: '2',width: 80, cellsalign: 'center' },
      { text: '3', datafield: '3',width: 80, cellsalign: 'center' },
      { text: '4', datafield: '4',width: 80, cellsalign: 'center' },
      { text: '5', datafield: '5',width: 80, cellsalign: 'center' },
      { text: '6', datafield: '6',width: 80, cellsalign: 'center' },
      { text: '7', datafield: '7',width: 80, cellsalign: 'center' },
      { text: '8', datafield: '8',width: 80, cellsalign: 'center' },
      { text: '9', datafield: '9',width: 80, cellsalign: 'center' },
      { text: '10', datafield: '10',width: 80, cellsalign: 'center' },
      { text: '11', datafield: '11',width: 80, cellsalign: 'center' },
      { text: '12', datafield: '12',width: 80, cellsalign: 'center' },
      { text: '13', datafield: '13',width: 80, cellsalign: 'center' },
      { text: '14', datafield: '14',width: 80, cellsalign: 'center' },
      { text: '15', datafield: '15',width: 80, cellsalign: 'center' },
      { text: '16', datafield: '16',width: 80, cellsalign: 'center' },
      { text: '17', datafield: '17',width: 80, cellsalign: 'center' },
      { text: '18', datafield: '18',width: 80, cellsalign: 'center' },
      { text: '19', datafield: '19',width: 80, cellsalign: 'center' },
      { text: '20', datafield: '20',width: 80, cellsalign: 'center' },
      { text: '21', datafield: '21',width: 80, cellsalign: 'center' },
      { text: '22', datafield: '22',width: 80, cellsalign: 'center' },
      { text: '23', datafield: '23',width: 80, cellsalign: 'center' },
      { text: '24', datafield: '24',width: 80, cellsalign: 'center' }
  ];

columns1: any[] =
[
  { text: 'Name', datafield: 'id',width: 100, cellsalign: 'center' }
]

Tarif html :

<jqxGrid *ngIf="showDayTarif" #myGridTarif
            [width]="getWidth()" [source]="dataAdapter"
            [autoheight]="true"
            [columns]="columns1" [selectionmode]="'singlecell'"
            [editable]="true">
            </jqxGrid>

Tarif JS :

url = "/api/setup/tarif/getTarifElectricity";

  source: any =
  {

      url : this.url,
      datatype: "json",
      datafields:
      [
          { name: 'id',type: 'string'},
          { name: 'prix',type: 'string'},

      ],
      id: 'id',
  };

  dataAdapter: any = new jqx.dataAdapter(this.source,{
      downloadComplete: function (data, status, xhr) { },
      loadComplete: function (data) { },
      loadError: function (xhr, status, error) { }
  }); 

  columns: any[] =
  [   
      { text: 'Name', datafield: 'id',width: 100, cellsalign: 'center' },
      { text: 'Prix', datafield: 'prix',width: 100, cellsalign: 'center' },
  ];

  columns1: any[] =
  [   
      { text: 'Name', datafield: 'id',width: 100, cellsalign: 'center' }
  ];

My result is that :

But the problem is, i can’t select or update my grid on the left, juste my grid on the right…

Do you have an explication?
It’s because my 2 grids are on differents components? but it’s not normal..
I have the impression that the grid is just displayed but we can’t have any interaction with it

Thanks you !
Math

[Peter StoevKeymaster]

Hi Math,

Would you share a stackblitz sample so we can edit, update and share it online with you. I think this way it could work out better as we currently are unable to test the provided samples due to the reason that there are missing parts.

Regards,
Peter

[mathodParticipant]

Ok, i found the problem but can’t resolved it…
if i have 2 grids in differetns divs, some cells of my first grid can’t be clickable…
Do you know why ? but if i put 2 grids in the same div, i can use and click on cells.

If you don’t understand my problem i will try to resolve alone, or i will try to create a stackblitz.
but maybe i m not the first with this problem

Thanks a lot.

[Author]

Posts