Forums Ignite UI for Angular
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Shobhana Suara
1415
Hide/show/disable rowselectors in Igx Hierarichal grid load on demand
posted

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.


Parents
  • 2680
    Offline posted

    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

  • 2680
    Offline posted in reply to Shobhana Suara

    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

Reply Children
  • 2680
    Offline posted in reply to Shobhana Suara

    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