Wijmo Row Detail Grid

Wijmo Row Detail Grid

Posted by: pmithilesh on 15 August 2020, 11:12 am EST

• 

  pmithilesh

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 15 August 2020, 11:12 am EST - Updated 3 October 2022, 3:47 pm EST

  Hi,
  
  I am implementing the row detail grid explained in Demo every thing works fine
  
  https://www.grapecity.com/wijmo/demos/Grid/Master-Detail/NestedGrids(RowDetail)/angular

  or shown in attached image as yellow

  i want to check if user has clicked the + Plus button on left hands side before expand or collapsing the row is there any way i can capture that event

  Thanks

  

  1390×340 51.6 KB

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 17 August 2020, 2:07 am EST

  Hi,

  You will need to add a click event listener on the FlexGrid’s hostElement and check whether the clicked element is the detail button:

  this.gridDetail.hostElement.addEventListener('click', e => {
    var trg = e.target as Element;
    if(wjcCore.closestClass(trg, 'wj-elem-detail')) {
      var hti = this.gridDetail.hitTest(e);
      var row = hti.row;
      alert('You are clicking on row: ' + row);
    }
  }, true);
  

  Please refer to the sample link below for reference:

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

  Regards,
  
  Ashwin

• 

  pmithilesh

  • Post Options:
  • Link
    Copy

  Posted 17 August 2020, 9:39 pm EST

  Hi Ashwin ,
  
  The solution does work and i was able to identify the element Thanks so much.

  Can i change the plus or minus button size to take entire cell as user wanted to click on the cell and its hard to find exact click on that plus/minus button as its small
  
  Thanks

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 18 August 2020, 3:59 am EST

  Hi,

  You can use the following CSS to increase the font-size of the plus/minus glyphs:

  .wj-flexgrid .wj-cell .wj-btn.wj-btn-glyph>span {
    font-size: 20px;
  }
  

  ~regards

• 

  pmithilesh

  • Post Options:
  • Link
    Copy

  Posted 18 August 2020, 5:54 pm EST

  Thanks Ashwin ,
  
  Solution was perfect for our requirement