Wijmo Flex Grid Table Focus

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

  • Posted 14 April 2021, 5:03 pm 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::



    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.
  • Marked as Answer

    Replied 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
  • Replied 14 April 2021, 9:36 pm EST

    Hi Ashwin,

    Thank you so much. It is working fine.

    Regards,
    Tejaswi Kalyanam
  • Replied 15 April 2021, 12:50 am EST

    Hi Ashwin,

    how to display wijmopoup in full screen view in angular?


    Please suggest me how to resolve this issue..

    Thanks & Regards,
    Tejaswi Kalyanam
  • Replied 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
  • Replied 18 April 2021, 4:23 pm 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::



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

    Thanks & Regards,
    Tejaswi Kalyanam.
  • Replied 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
  • Replied 18 April 2021, 8:12 pm 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::




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

    Thanks and Regards,
    Tejaswi Kalyanam.
  • Replied 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
  • Replied 20 April 2021, 12:22 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::
    --------------------



    Original Image:::
    ---------------



    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.
  • Replied 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
  • Replied 25 April 2021, 10:40 pm EST

    Hi Ashwin,

    I need one information.

    We are using the <wj-flex-grid-filter #filter></wj-flex-grid-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


    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
  • Replied 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
  • Replied 27 April 2021, 9:55 pm EST

    Hi Ashwin,

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


    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.
  • Replied 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
  • Replied 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.
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels