Wj-flex-grid-detail: show all details as default

Wj-flex-grid-detail: show all details as default

Posted by: gep_ddteam on 14 September 2017, 11:21 am EST

• 

  gep_ddteam

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 14 September 2017, 11:21 am EST

  Hi wijmo team,

  Currently i am using wj-flex-grid-detail directive. Inside this, i have a ‘wj-flex-grid’ directive to show the detail table. How can i show all the detail table as default without click any ‘expand’ button when I load the page?

  Here is the example:

  Please refer to the attached picture.

  When I load the page, it will show “categories” table, and then i click on certain button, the ‘Product’ table shows up. Now what i am trying to do is when i load my page, the ‘Product’ table got expanded directly.

  Is there any way to do it?
  
  Thank you

  Ruian
  
  

  

• 

  manpreet-kaur

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:21 am EST

  Hello,

  We are working on your query. We will soon share our observations on the same.

  Thanks,
  
  Manpreet Kaur

• 

  manpreet-kaur

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:21 am EST

  Hello,

  Unfortunately, we are not able to find a direct way to expand all the detail rows during the initial load. We have escalated the issue to the concerned team for further discussion. We will let you know as soon as we get any information in this regard.

  Thanks,
  
  Manpreet Kaur

• 

  bernardo

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:21 am EST

  Here is some code you can use in order to expand all detail rows on demand:

  [js]// store reference to detail provider (wj-flex-grid-detail directive)
  
  $scope.init = function(s, e) {
  
  $scope.dp = s;
  
  }
  
  // expand all detail rows
  
  $scope.showDetail = function() {
  
  vardp = $scope.dp,
  
  flex = dp.grid;
  
  for(varr = flex.rows.length - 1; r >= 0; r–) {
  
  dp.showDetail(r);
  
  }
  
  }[/js]

• 

  bernardo

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:21 am EST

  Here is some code you can use in order to expand all detail rows on demand:

  [js]// store reference to detail provider (wj-flex-grid-detail directive)
  
  $scope.init = function(s, e) {
  
  $scope.dp = s;
  
  }
  
  // expand all detail rows
  
  $scope.showDetail = function() {
  
  var dp = $scope.dp,
  
  flex = dp.grid;
  
  for(var r = flex.rows.length - 1; r >= 0; r–) {
  
  dp.showDetail(r);
  
  }
  
  }[/js]

• 

  vishalramdas-jagtap

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:21 am EST

  Hi Wijmo Team,

            I am new to wijmo. Got stuck in similar kind of problem. In my case, am opening a popup on click of EDIT button.
  

  This popup has wj-flex-grid.

            I want such mechanism where i can pass id of a record and the same record's detail
  

  should be open / Expanded as the popup opens.

            For your reference am attaching a screenshot. I am using an icon for toggling the detail ( dp.showDetail($row, true) )
  

  

• 

  annupurnap

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:21 am EST

  Hello,

  You can open grid detail by passing id on button click. And when pop up shows, grid detail will be shown of the passed id by showDetail function of grid detail.
  
  Kindly refer to the fiddle http://jsfiddle.net/mkgupta911/x800ojku/ which implements the same.

  Hope it helps.

• 

  vishalramdas-jagtap

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:21 am EST

  Hi Annupurnap,

           Thanks for the reply, i have gone through the solution you suggested. What i can observe is the List data populated is same in both
  

  parent and child popup which fulfills the condition if row number is passed.

           In my case i have <strong>UN-ordered records</strong> which has <strong>Edit button</strong> please refer attached image.
  
           These boxes are active records from a list of Records. I will still refer the fiddle and try out some combinations if i can get the
  

  Expected result.

  Regards,
  
  Vishal
  
  

• 

  annupurnap

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:21 am EST

  Hi,

  You just need to pass the row which you want to display in grid detail through show function used in edit button’s ngClick attribute.
  
  Kindly refer to updated fiddle http://jsfiddle.net/mkgupta911/x800ojku/3/ as per your image.

  Hope this will help you.

• 

  vandana-kadari

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:21 am EST

  Hi,

  So just like we are setting the max-height to flexGridDetailProvider, i am trying to set the width to it and it doesn’t work as expected.
  
  From the code i understand that whatever div[wj-part=‘cells’] width value is that is being set to the flexGridDetailProvider width.

  Both height and width values are being changed irrespective of what am setting in the css file.

  

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:21 am EST

  Hello Vandana,
  
  If you are trying to set width of MultiRow fit to cell width, just set width of each cell to ‘*’ using following layout definition:

   var layout=[
                  {
                      header: 'Team', cells: [{ binding: 'TEAM', header: 'Team', width: "*" }]
                  },
                  {
                      header:'Clients',cells:[
                          {binding:'CLIENT',header:'Client',width:"*"},
                          { binding: 'DATE', header: 'Date', width: "*" }]
                  },
                  {
                      header:'TimeDetails',cells:[
                          { binding: 'TIME_ARRIVE', header: 'Arrival Time', width: "*" },
                          { binding: 'TIME_DEPART', header: 'Departure Time', width: "*" }]
                  }
              ];
  

  If you want to change width from CSS, add CSS class name to cell style using following code:

  .custom-multirow {
             width:500px !important;
          }
   
   cell.className = "custom-multirow";

  Thanks,
  
  Manish Kumar Gupta

• 

  Calvin.Craig

  • Post Options:
  • Link
    Copy

  Posted 23 October 2017, 12:22 pm EST

  How can this approach be adapted to work with Angular 2+?

  E.g., labeling the ng-template doesn’t bind a reference to the FlexGridDetail component.

  <ng-template wjFlexGridDetail #flexGridDetail ...
  

  Without the reference one can’t invoke the showDetail() method.

• 

  sanojbogoda

  • Post Options:
  • Link
    Copy

  Posted 19 February 2020, 6:01 am EST

  Dear All,

  I have tried looping through all the row and applying showDetail() method in my table it worked and open all the rows but there was performance issue and grid became very laggy.

  window.OpenGridDetails = function(){
  
  gObj = GridOS.GridObject[0];
  
  for (var i = 0; i < gObj.grid.rows.length; i++) {
  
  dpHtml.showDetail(i);
  
  }
  
  }

  Any of you guys have another alternate solution instead of looping through all the rows?

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 19 February 2020, 11:19 pm EST

  Hi Sanoj,

  This is the only way to open the details of all the rows. To improve the performance a little bit, you can loop through the rows in the deferUpdate callback of the FlexGrid:

  window.OpenGridDetails = function(){
  	gObj = GridOS.GridObject[0];
  	gObj.deferUpdate(function() {
  		for (var i = 0; i < gObj.grid.rows.length; i++) {
  			dpHtml.showDetail(i);
  		}
  	}
  }
  

  Regards,
  
  Ashwin