Hide/show/disable rowselectors in Igx Hierarichal grid load on demand

Hi Team,

Using 9.1.28 version of Infragistics Hierarichal grid load on demand.

Requirement: I have rowSelectors in the child grid of Hierarichal Grid and a button in the Toolbar of the child Grid.

I want to show/hide the row selectors and also disable row selection for the rows whose row selector is hidden.

HTML
Parent Grid:

          <igx-hierarchical-grid#grid1[data]=”srcData”[autoGenerate]=”false”[primaryKey]=”‘OrderID'”[columnWidth]='”70px”‘

            [allowFiltering]=’true'[height]=”null”[width]=”‘100%'”[rowHeight]=”’50px'”[showToolbar]=”true”[paging]=”false”[perPage]=”200″

            [emptyGridMessage]=”emptyMessage” [isLoading]=”gridLoading” [filterMode]=”‘excelStyleFilter'” [displayDensity]=”‘compact'” (onRowToggle)=”rowToggle($event)”>

Child Grid:

 

<igx-row-island #childGrid  [autoGenerate]=”false” [allowFiltering]=’true’ [filterMode]=”‘excelStyleFilter'” [primaryKey]=”‘customerId'” [autoGenerate]=”false” cellSelection=”none”

            (onGridCreated)=”gridCreated($event)” (onGridInitialised)=”loadCustomerDetails($event)” [rowSelection]=”‘multiple'” [showToolbar]=”true” [hideRowSelectors]=”hideRowSelectors”

            [width]='”1200px”‘ [columnWidth]='”180px”‘ (onRowSelectionChange)=”handleRowSelectionChange($event)”>

TS:
Default all rows are selected and once we un-select and select first 2 rows in the child Grid and click a button, the selected row’s row selectors should hide and if i relaod the page, and expand same parent ID, by default first 2 rows should be unselected and in read-only mode. Also the button in toolbar should be disabled.

Please help me to achieve.

P.S: i cannot use onRowSelectionChange() event bcz the child grid created only once and later it shows the cache version which messes up my validation.

Please reply ASAP.

 

Hello,

The Hierarchical Grid Row Selection Example shows how the hideRowSelectors property can be dynamically toggled, as you are probably already familiar with. This property also exists in version 9.1.28. However, it controls the row selectors visibility for the entire row island, so I do not believe it is possible to have them visible on some rows and hidden on others through this property, if I understand the requirement correctly.

The mentioned button’s disabled state could also be set via property binding to a flag pointing when it should be disabled.

About saving the selection on reload, it is one of the features available on the IgxGridState directive, so please, refer to the State Persistence topic.

Having in mind that the described scenario is unclear, please fork and modify any the referenced topics demos to illustrate your point.

Best regards,

Bozhidara Pachilova

Thank You but i am already aware of  hideRowSelectors property and it is not helping me when using in Hierarichal grid Load on demand.

When we expand Parent ID 1 first time, we call gridCreated($event) method. But if i expand Parent ID 2 where my hideSelectors should be true and again expand Parent ID 1, my hideSelectors property is setting as true which should not be the case. I know this is by design, where we cache the child data. But for my project it is creating a lot of obstacles.

It is disappointing that library has so many limitations.

Update: I have resolved the issue using rowToggle() method.

Requirement: I update Child grid data every 20 secs so i need to update the child grid.

TS:

constructor() {

      this.intervalId = setInterval(() => {

      

          this.getChildDataList(this.parentId);

          this.rowIsland.onGridCreated.subscribe(e => {

            e.grid.isLoading = true;

            e.grid.data = this.bogieList;

            e.grid.isLoading = false;

          });

          this.grid1.cdr.detectChanges();

        }

      }, 20000);
}

Can you help me to update the Child grid every 20 secs?

Please reply ASAP

Hello,

Please, keep in mind that according to our support policy, we guarantee first response in 1 business day and subsequent interactions within 3 business days or less, for Standard subscription services. Having this in mind, we aim to address all your queries as soon as possible as per this policy, so thank you for understanding.

Also, please, note that the mentioned is not a limitation of the library, as we have already discussed the purpose and API of the gridCreated event, which is different form your initial understanding about it. As already mentioned, child data is not "cached". If you would like to update it, you are absolutely free to do this. The gridCreated event is related to the UI of the grid being created, and not the data. It allows you to access a point when the load on demand data can be fetched and assigned.It is obviously more performant not to rerender all UI-elements with each row toggle. Still, data could be updated and reflected by the grid at any given moment.

To address your latest question, the provided code-snippet will not update the child grid data every 20s, as it merely subscribes to the onGridCreated observable every 20s. I am unaware what the “getChildDataList” method does exactly, but assuming it only retrieves the data and then the  “e.grid.data = this.bogieList;” is what assigns it, the latter is obviously not executing.

What I can suggest instead is using the gridCreated event on the target row island to set this interval instead. The following snippet updates the “Album” property of the data for the purposes of the example:

 <igx-row-island

      [key]="'Albums'"

…

      (gridCreated)="gridCreated($event)"

    >

 

  public gridCreated(event: IGridCreatedEventArgs) {

    const grid = event.grid;

    let cnt = 1;

    if (

      (event.owner as IgxRowIslandComponent).key === 'Albums' &&

      event.parentID === 2

    ) {

      setInterval(() => {

        let copyData = grid.data;

        copyData.forEach((r) => {

          if (r.hasOwnProperty('Album')) {

            r[‘Album’] = r[‘Album’].split(' ')[0] + ' changed ' + cnt;

          }

          grid.data = […copyData];

          grid.columns[0].autosize();

        });

        cnt++;

      }, 2000);

    }

  }

This StackBlitz sample shows the target child grid data updated every 2 seconds. Please, test it on your side and let me know if you still need assistance. Please, note that the sample is against the latest Ignite UI for Angular version, nevertheless, the approach would be almost identical for you, except the gridCreated method name, which you are already familiar with.

Best regards,
Bozhidara Pachilova

Thank you for replying.

But this not what i am looking for.

I am calling the backend API every 20 secs to get the updated data for the child grid. But my challenge is to bind the data to Child grid.

On click of button in child grid toolbar, i update the grid data and it shows the updated Status but as the data is not binding. I have manually reload the page to get the updated data to grid.

TS: This is giving me updated  child data but not binding to grid. Can i access the child grid data like this.childGrid.data?

ngOnInit(): void {

    this.getParentList();

    this.intervalId = setInterval(() => {

      if (this.apiResponse ) {

        this.getChildData(this.parentID);

     

        this.hgrid.cdr.detectChanges();

      }

    }, 20000);
}

Hi Shobhana,

I can suggest reviewing the approach and sample from this other forum thread I have recently assisted you with.

There you will find an example of the requested updating and rebinding child grid data on its parent row toggle.

Why it does not currently work for you, I cannot tell because I cannot know what code does the “this.getChildData” method executes, whether or not it is async, what is the “this.apiResponse” variable, etc. Additionally, you will have to make sure you have the proper reference to a child grid to assign its data. Debugging might help here.

Again, please, refer to the sample and approach from the other thread, which I believe will address the same questions.

Best regards,
Bozhidara Pachilova