Input types in column header

Input types in column header

Posted by: shilpac on 24 June 2020, 7:26 am EST

• 

  shilpac

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 24 June 2020, 7:26 am EST - Updated 3 October 2022, 3:55 pm EST

  How can we add different input types like date picker, drop-down and text in column header and update grid after selecting the values from column header.
  
  I have attached the screenshot for the reference.
  
  

  

  734×135 8.17 KB

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 25 June 2020, 1:08 am EST

  Hi Shilpa,

  You can use cell templates to add multiple input controls in the header row of the FlexGrid. Please refer to the sample link below for reference:

  https://stackblitz.com/edit/angular-omtte5

  Regards,
  
  Ashwin

• 

  shilpac

  • Post Options:
  • Link
    Copy

  Posted 25 June 2020, 5:04 am EST

  Thanks for the solution.

• 

  shilpac

  • Post Options:
  • Link
    Copy

  Posted 20 July 2020, 2:41 pm EST

  There is a requirement update
  
  Now we need to add/remove the row in column header dynamically whenever a user clicks on the checkbox in the grid.
  
  Code Snippet:
  
  grid.hostElement.addEventListener(‘mousedown’, (e: MouseEvent) => {
  
  if((e.target).type === ‘checkbox’) {
  
  if(condition1) { // on checkbox select
  
  grid.columnHeaders.rows.push(new wjcGrid.Row());
  
  } else if(condition2) { // on checkbox unselect
  
  grid.columnHeaders.rows.removeAt(grid.columnHeaders.rows.length - 1);
  
  }
  
  }
  
  });

  But the problem occurs after pushing the new row in the header.
  
  So now when I try to click on the same checkbox, selection and unselection of the checkbox happens but for the row above the selected one.
  
  It seems like there is an increment in the index after adding a row in the header.
  
  Can you please suggest something to manage this behaviour.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 21 July 2020, 2:37 am EST

  Hi Shilpa,

  Instead of removing/adding the row, have you tried changing the visibility of the row. You can use the visible property of the Row class to hide/unhide the row:

  grid.hostElement.addEventListener('mousedown', (e: MouseEvent) => {	
  	if((<HTMLInputElement>e.target).type === 'checkbox') {
  		var row = grid.columnHeaders.rows[0]; // select the row as per requirement
  		if(condition1) { // on checkbox select
  			row.visible = false;
  		} else if(condition2) { // on checkbox unselect
  			row.visible = true;
  		}
  	}
  });
  

  ~regards

• 

  shilpac

  • Post Options:
  • Link
    Copy

  Posted 21 July 2020, 12:25 pm EST

  Thanks