Header radio button

Header radio button

Posted by: bmakhlin on 11 October 2018, 7:31 am EST

• 

  bmakhlin

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 11 October 2018, 7:31 am EST

  Hello,
  
  I have flex grid with radio buttons in rows, columns and headers. When all rows in the same column get selected the radio button for this column should get selected. If one radio button in the column is deselected the header radio button should get deselected.

  I have selecting of the header radio button when last row in the column get selected working. What is not working is when I deselect one row radio button the header radio button stays selected until I drag and extend the page. Then it gets deselected. Please help me figure out how to get header radio button get deselected.

  Below is snippet of my code. selectionChanged method gets called with column number when row radio button selection changes. Note the setTimeout. Without it the the header radio button does not get selected when all rows for the column get selected.

  
      selectionChanged(column: number, selectedId: number) {
          setTimeout(() => {
             this.setSelectAll(column);
          });
      }
  
      setSelectAll(column: number) {
          const selectAll = this.flexGrid.rows.every((row) => {
              return row.dataItem['column' + column].value;
          });
          const input = this.flexGrid.columnHeaders.getCellElement(1, column).firstChild as HTMLInputElement;
          input.checked = selectAll;
          input.indeterminate = false;
      }
  
  

  thank you

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 11 October 2018, 7:29 pm EST

  Hi,

  You also need to detect which radio button was unchecked and update the equivalent header radio button.
  
  Please refer to the following sample: https://stackblitz.com/edit/angular-fewq9g?file=app%2Fapp.component.ts

  ~Sharad

• 

  bmakhlin

  • Post Options:
  • Link
    Copy

  Posted 16 October 2018, 6:27 am EST

  This worked very well.

  I my old code I had timeouts in selectionChanged functon that is very hard to test but luckily I don’t need anymore.

  On the other hand I needed to add timeout I did not have before to updatedLayout that I am using to initialize header radio buttons. Is updatedLayout an appropriate event to initialize column header radio buttons? Is it normal to use setTimeout with FlexGrid or it is indication that I am doing something incorrect?

  
  updatedLayout(s, e) {
          setTimeout(() => {
              this.initializeColumnHeaders();
          });
      }
      initializeColumnHeaders() {
          this.flexGrid.columns.forEach(col => {
              if (col.index > 0) {
                  this.updateColHeader(col);
              }
          });
      }
  
  

  Thank you for your help and support.

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 16 October 2018, 4:52 pm EST

  If we understand correctly then you trying to initialize header combo-box using updatedLayout event, although it can get the job done, a better solution would be to store headers checked state in some variable and bind combobox’s checked property with the variable.
  
  Please refer to the following sample: https://stackblitz.com/edit/angular-mwrkdw?file=app%2Fapp.component.ts

  ~Sharad