Is it possible to create a folder like structure in Grid/TreeGrid

[Sri Nistala]

Hi,

Is it possible to create a folder like structure in a Grid or TreeGrid with Icons. Very similar to the TreeView? 

I'm trying to implement something that looks like this - It from a different system and it uses I believe Angular UI-grid (not SF Grid)

I see that in SF TreeView we could create folder level structure with icons. But couldn't find a way to implement this type of view with SF TreeGrid or SF Grid. 

Any  guidance on how to acheive this will be helpful. 

Thanks

Sai

[Farveen Sulthana Thameeztheen Basha]

Hi Sai,

Greetings from Syncfusion.

We have achieved your requirement using Column Template feature of the TreeGrid. Using template property we can place the required icon to show like folder structure.

Refer to the code below:-

Index.ts:-

 

let grid: TreeGrid = new TreeGrid({

  dataSource: textdata,

  childMapping: 'Children',

  treeColumnIndex: 1,

  rowDataBound: (args): void => {},

  rowHeight: 83,

  columns: [

    { field: 'EmpID', headerText: 'Employee ID', width: 180 },

    { field: 'Name', headerText: 'Name', width: 170, template: '#columnTemplate1' },

      .  .  .

  ],

  width: 'auto',

  height: 359,

});

grid.appendTo('#Grid');

 

Index.html:-

 

  <script type="text/x-template" id="columnTemplate1">

      <span class="e-icons e-medium e-folder-open" style='margin-right: 5px'></span>

      ${Name}

  </script>

 

Sample link:-  https://stackblitz.com/edit/ojz6dy-odw9hp?file=index.html,index.ts

Documentation link:- https://ej2.syncfusion.com/demos/#/material3/tree-grid/column-template.html

Demo link:-  https://ej2.syncfusion.com/documentation/treegrid/columns/column-template

Similiary you can place the Folder structure using column template feature. If you have need any specific requirement in Grid, please share detail Explanation to proceed further.

Regards,
Farveen sulthana T

[Sri Nistala]

Thank you for the response. However, the column template is automatically applied to all the rows including the parent and child rows. Is it possible to have different icons for different rows, based on the properties of the row. For example, if the row type = Folder, then display a folder icon. If row type = Word, then display a word document icon. 

Thanks

Sai

[Farveen Sulthana Thameeztheen Basha]

Sri Nistala,

Query#:- Is it possible to have different icons for different rows, based on the properties of the row.

We have achieved this requirement using queryCellInfo event of the TreeGrid. In this event, we can place different icons based on the row values.

Refer to the code below:-

Index.ts:-

 

queryCellInfo: (args): void => {

  if (args.column.field == 'Name' && args.data.hasChildRecords) {

  const icons = args.cell.querySelectorAll('.e-icons');

  if (args.data['EmpID'] == 'EMP001') {

      icons[icons.length - 1].classList.remove('e-folder-open');    //change icons based on condition

      icons[icons.length - 1].classList.add('e-export-pdf');

  }

 }

},

Sample :- https://stackblitz.com/edit/ojz6dy-cwkwqi?file=index.html,index.ts

https://ej2.syncfusion.com/documentation/api/treegrid/#querycellinfo

Please get back to us if you need any further assistance.

Regards

Farveen sulthana T