Wijmo Flex Grid Table Focus

Wijmo Flex Grid Table Focus

Posted by: ashwin.saxena on 14 April 2021, 5:03 pm EST

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 14 April 2021, 5:03 pm EST - Updated 3 October 2022, 4:59 am EST

  Hi Tejaswi,

  I have created a new case for you here since the original case was getting longer.
  
  Here is the link to the original case:
  
  https://www.grapecity.com/forums/wijmo/wijmo-flex-grid-table_1

  When we add new row the focus should be showing on the new row text area box.
  
  I written the code like this ::

  this.theGrid.select(new wjGrid.CellRange(length, 4, 4, 4), true);
  
  this.theGrid.startEditing(true);

  But focus showing like this::

  

  1247×497 25 KB

  But i need to focus inside text area box and also when we click on new row the focus directly going on that row(like scrolling).

  Please suggest me how to resolve this issue.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 14 April 2021, 5:23 pm EST

  The select method of FlexGrid focuses on the cell of the grid and not the contents. You will need to manually get the reference of the textarea and focus on it:

  
  this.theGrid.select(new wjGrid.CellRange(length, 4, 4, 4), true);
  this.theGrid.startEditing(true);
  let activeCell = this.theGrid.activeCell;
  activeCell.querySelector('textarea').focus();
  
  

  Regards,
  
  Ashwin

• 

  tejaswi.kalyanam

  • Post Options:
  • Link
    Copy

  Posted 14 April 2021, 9:36 pm EST

  Hi Ashwin,

  Thank you so much. It is working fine.

  Regards,
  
  Tejaswi Kalyanam

• 

  tejaswi.kalyanam

  • Post Options:
  • Link
    Copy

  Posted 15 April 2021, 12:50 am EST - Updated 3 October 2022, 4:59 am EST

  Hi Ashwin,

  how to display wijmopoup in full screen view in angular?
  
  

  

  1089×585 272 KB

  Please suggest me how to resolve this issue…

  Thanks & Regards,
  
  Tejaswi Kalyanam

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 15 April 2021, 9:35 pm EST

  Hi Tejaswi,

  You can set the width and height to the popup to 100%:

  .wj-popup {
      width: 100%;
      height: 100%;
  }
  

  ~regards

• 

  tejaswi.kalyanam

  • Post Options:
  • Link
    Copy

  Posted 18 April 2021, 4:23 pm EST - Updated 3 October 2022, 4:59 am EST

  Hi ashwin,

  Thank you so much.

  I have one issue regarding the text content how to increase the particular row height in wijmo-grid.

  like this sample image. observe 1 and 2 rows::
  
  

  

  1199×394 27.5 KB

  please suggest me how to increase the row height regarding the content.

  Thanks & Regards,
  
  Tejaswi Kalyanam.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 18 April 2021, 6:50 pm EST

  Hi,

  There are many ways to change the height of the row using code.

  1. You can directly set the height property of any row using its index:

  flexGrid.rows[0].height = 40;
  

  https://www.grapecity.com/wijmo/api/classes/wijmo_grid.row.html#height

  2. Call the autoSizeRows method of the FlexGrid:

  flexGrid.autoSizeRows();
  

  This will automatically resize all the rows according to their content whenever called.

  https://www.grapecity.com/wijmo/api/classes/wijmo_grid.flexgrid.html#autosizerows

  3. Use the autoRowHeights property of the FlexGrid. This property will resize the rows just like the autoSizeRows method. The difference is that it will automatically resize the rows whenever some operation is performed like editing, sorting, etc.

  flexGrid.autoRowHeights = true;
  

  https://www.grapecity.com/wijmo/api/classes/wijmo_grid.flexgrid.html#autorowheights

  4. You can set the default size of each row by using the defaultSize property:

  flexGrid.rows.defaultSize = 50;
  

  https://www.grapecity.com/wijmo/api/classes/wijmo_grid.rowcollection.html#defaultsize

  ~regards

• 

  tejaswi.kalyanam

  • Post Options:
  • Link
    Copy

  Posted 18 April 2021, 8:12 pm EST - Updated 3 October 2022, 4:59 am EST

  Hi Ashwin,

  Thank you so much.

  But one row data is long and another row data is short content then i need to show the height regarding the row data content
  
  like this observe::

  

  1199×394 27.5 KB

  How to add long content row long height and short content row short height ?
  
  Please suggest me.

  Thanks and Regards,
  
  Tejaswi Kalyanam.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 19 April 2021, 5:17 pm EST

  In this case, you can use the autoSizeRows method. You can handle the loadedRows event of the FlexGrid and call this method.

  initGrid(grid) {
  	grid.autoSizeRows(); // call this initially
  	grid.loadedRows.addHandler(() => grid.autoSizeRows()); //
  }
  

  ~regards

• 

  tejaswi.kalyanam

  • Post Options:
  • Link
    Copy

  Posted 20 April 2021, 12:22 am EST - Updated 3 October 2022, 4:59 am EST

  Hi Ashwin,

  Thank you so much.

  I am using this lines code(above code) . But i found another issue when we add the new row (active cell focus), the top header part not showing proper.

  observe this image::

  

  1251×505 27.4 KB

  

  1243×165 13.2 KB

  Original Image:::

  

  1235×281 20 KB

  when we add the new row i am using this code for focusing the text area::::

  this.theGrid.select(new wjGrid.CellRange(length, 4, length, 4), true);
  
  this.theGrid.startEditing(true);
  
  setTimeout(() => {
  
  let activeCell = this.wjcellsHeight.nativeElement.querySelector(‘textarea’);
  
  activeCell.focus();
  
  this.isQuoteReply || this.isEditSave ? activeCell.setSelectionRange(activeCell.value.length,activeCell.value.length) : “”;
  
  }, 0);

  when we remove this text area focus code the header showing perfect. But i need the editing text area focus.

  please suggest me how to resolve this issue.

  Thanks & Regards,
  
  Tejaswi Kalyanam.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 21 April 2021, 3:47 pm EST

  Hi Tejaswi,

  I am sorry but I was not able to replicate the issue. Please refer to the sample link below that I used to replicate the issue:

  https://stackblitz.com/edit/angular-9-0-0-rc-1-r3svrv

  In this sample, click the Edit row, the row will start editing, and the focuswill go on the textarea.

  Can you please modify this sample that it replicates the issue?

  ~regards

• 

  tejaswi.kalyanam

  • Post Options:
  • Link
    Copy

  Posted 25 April 2021, 10:40 pm EST - Updated 3 October 2022, 4:59 am EST

  Hi Ashwin,

  I need one information.

  We are using the <wj-flex-grid-filter #filter> for the filter functionality.
  
  But here taking the column related data.
  
  In my notes page having the column data and created person name see below image
  
  

  

  1231×236 18.5 KB

  But here filter only content,[see this image]
  
  

  i need created person filter also Inside notes content filter.

  Is it possible?
  
  Please suggest me how to resolve this issue.

  Thanks
  
  Tejaswi Kalyanam

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 26 April 2021, 8:22 pm EST

  Hi Tejaswi,

  I am afraid that this is not possible. You can either change the binding of the column to the author instead of notes so that filter dialog is created according to the authors.
  
  Another solution is to create an entirely different column for authors.

  Also, if you are using a hierarchical grid, like in my sample, then filtering using FlexGridFilter will only work for top level items.

  ~regards

• 

  tejaswi.kalyanam

  • Post Options:
  • Link
    Copy

  Posted 27 April 2021, 9:55 pm EST - Updated 3 October 2022, 4:59 am EST

  Hi Ashwin,

  I am facing one issue.
  
  I am using the <wj-flex-grid-filter #filter> for the filter purpose.
  
  But filter box only taking the parent notes content not taking the child notes content. please observe this image.
  
  

  

  1272×600 34.9 KB

  I need to filter the all the grid data means parent and child content.
  
  Please suggest me how to resolve this issue.

  Thanks,
  
  Tejaswi Kalyanam.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 28 April 2021, 2:09 pm EST

  Hi Tejaswi,

  >>Also, if you are using a hierarchical grid, like in my sample, then filtering using FlexGridFilter will only work for top-level items.
  
  This issue I talked about earlier.

  FlexGridFilter does not support filtering in the tree grid. You will need to use text-based filtering for this:

  https://www.grapecity.com/wijmo/demos/Grid/FilteringSearching/HierarchicalData/angular

  ~regards

• 

  tejaswi.kalyanam

  • Post Options:
  • Link
    Copy

  Posted 7 May 2021, 2:56 am EST

  Hi Ashwin,

  I need one information.
  
  I am using the wijmo grid how to hide/show the particular rows when we perform any action.
  
  How to hide and show the rows and suggest the custom code.
  
  please suggest me how to resolve this issue.

  Thanks & Regards,
  
  Tejaswi Kalyanam.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 9 May 2021, 5:45 pm EST

  Hi Tejaswi,

  You can use the visible property of the row for this:

  https://www.grapecity.com/wijmo/api/classes/wijmo_grid.row.html#visible

  flexGrid.rows[rowIdx].visible = false;
  

  ~regards

• 

  tejaswi.kalyanam

  • Post Options:
  • Link
    Copy

  Posted 10 May 2021, 11:36 pm EST

  Hi Ashwin,

  Thank you so much.

  But i need one sample example
  
  please suggest me

  Thanks,
  
  Tejaswi Kalyanam.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 11 May 2021, 7:02 pm EST

  You can refer to the sample below:

  https://stackblitz.com/edit/angular-9-0-0-rc-1-8brlen

  ~regards

• 

  tejaswi.kalyanam

  • Post Options:
  • Link
    Copy

  Posted 12 May 2021, 6:27 pm EST

  Thank you ashwin

  Regards,
  
  Tejaswi Kalyanam