Events detailCollapse / detailExpand

[Victor Gutierrez]

Hello guys, i need to filter the grid by column on detailExpand ( to see only parent and childs ). Then when collapse detail show again all parents. I can do it in EJ (JS1 JQuery) but now trying to use EJ2 Grid and i can't. Do you know other way to do this behavior? 

Thanks in advance

Victor Hugo

[Ajith Govarthan]

Hi Victor, 

Greetings from Syncfusion. 

 

Query : i need to filter the grid by column on detailExpand ( to see only parent and childs ). Then when collapse detail show again all parents. 

 

We have validated your query and prepared sample based on your requirement. In that we have used detailtemplate feature and detailDatabound event. Which will be triggered while expand the detail row. In that event we have filtered EmployeeID from hierarchy datasource and assigned the filtered results as dataSource for the created child grid inside the event. Here when you can expand a detail row which will show parent rows and child rows. You can expand and collapse all the detailRows with detailCollapseAll and detailExpandAll function. You can also expand and collapse particular row by calling detailRowModule.expand and detailRowModule.collapse method and we need to pass the row index to expand or collapse any row. We have shared the sample for your reference. 

Code Snippet:  

Index.ts 

        detailDataBound: function(args:any){ 

          args.detailElement.id = "cgrid"+counter; 

          let filterData = args.data.EmployeeID; 

          let data = new DataManager(hierarchyOrderdata).executeLocal(new Query().where("EmployeeID", "equal", filterData, true)); 

          let childGrid: Grid = new Grid({ 

             dataSource:data, 

            columns:[ 

              { field: 'EmployeeID', headerText: 'EmployeeID', width: 110 }, 

            { field: 'OrderID', headerText: 'OrderID', width: 110 }, 

            {field:'ShipCity',headerText:'city',width:150}, 

            {field:'ShipCountry',headerText:'city',width:150}, 

            ], 

            width:900, 

          }) 

          childGrid.appendTo('#cgrid'+counter); 

          childGrid.element.style.width = '100%'; 

          counter++; 

        } 

Sample Link: https://stackblitz.com/edit/qvpgzf-qr3thu?file=index.ts 

Documentation links: 

https://ej2.syncfusion.com/documentation/api/grid/#detaildatabound 

If the above solution doesn’t meet your requirement please share the below details to validate further on your requirement. 

1. Share the complete grid code sample.
2. Share the pictorial representation of your requirement.

Regards, 

Ajith G. 

[Jayabharathi J]

Thanks for you quick answer,    

I think you didn't understand my message    "filter the grid by column on detailExpand ( to see only parent and children ). " 

i mean (ion you example)  When expand hide every other rows 

 

When collapse , we back to the original view  

 

Sorry if i couldn't make me explain before, and thank you again you are great guys, 

Victor Hugo 

[Ajith Govarthan]

Hi Victor, 

Sorry for the inconvenience.  

 

Query : i need to filter the grid by column on detailExpand ( to see only parent and childs ). Then when collapse detail show again all parents. 

 

Based on your requirement we have prepared a sample and in that sample we have used detail template feature of EJ2 Grid. In the detail template we have rendered a grid based on the EmployeeID value of the parent grid.  

Here when the detail row is expanded the detailDatabound event is triggered and in that event we have rendered the child grid and also hide other detail rows in the parent grid. The detailDatabound event will be triggered only once for a detail row and for the next time we need to call our internal events. 

In this we have used the internal event grid.on method, so which will be triggered for when expand and collapse each time. In that we have hide and show the other rows based on expand and collapse event. We have shared the sample for your reference. 

Code Snippet:  

Index.ts 

 

        grid.on('detail-state-change', detailChange, grid); 

        detailDataBound: function(args:any){ 

       uid = args.detailElement.parentElement.previousElementSibling.getAttribute('data-uid'); 

       showHide(false); 

          args.detailElement.id = "cgrid"+counter; 

          let filterData = args.data.EmployeeID; 

          let data = new DataManager(hierarchyOrderdata).executeLocal(new Query().where("EmployeeID", "equal", filterData, true)); 

          let childGrid: Grid = new Grid({ 

             dataSource:data, 

            columns:[ 

              { field: 'EmployeeID', headerText: 'EmployeeID', width: 110 }, 

            { field: 'OrderID', headerText: 'OrderID', width: 110 }, 

            {field:'ShipCity',headerText:'city',width:150}, 

            {field:'ShipCountry',headerText:'city',width:150}, 

            ], 

            width:900, 

          }) 

          childGrid.appendTo('#cgrid'+counter); 

          childGrid.element.style.width = '100%'; 

          counter++; 

        } 

function detailChange(args) { 

  if (!args.isExpanded) { 

    uid = args.detailElement.parentElement.getAttribute('data-uid'); 

    showHide(true); 

  } else { 

    uid = args.detailElement.parentElement.getAttribute('data-uid'); 

    showHide(false); 

  } 

} 

function showHide(isShow:boolean){ 

   let rows = grid.getRows(); 

if(isShow){ 

      for (let i = 0; i < rows.length; i++) { 

      if (rows[i].getAttribute('data-uid') !== uid && !rows[i].classList.contains('e-detailrow')) { 

        (rows[i] as any).style.display = ""; 

      } 

    } 

} else { 

      for (let i = 0; i < rows.length; i++) { 

      if (rows[i].getAttribute('data-uid') !== uid && !rows[i].classList.contains('e-detailrow')) { 

        (rows[i] as any).style.display = "none"; 

      } 

    } 

} 

} 

Sample Link: https://stackblitz.com/edit/qvpgzf-p2uft5?file=index.ts 

Please get back to us if you need further assistance. 

Regards, 

Ajith G.