Custom item rendering on filter popup

[Deniz]

Hi,

Thanks for this wonderful component, first of all. I have an issue when filtering a column. I'm using itemTemplate for the filter of the "status" column because the value of this column is an object. The problem is filter popup is only displaying the status value from the last row. ​Here is the screenshot of the problem, not that for the missing "TO DO". If I add a 3rd status say, "RESOLVED" as a 3rd row to the table, this time instead of CLOSED it will display "RESOLVED".

Here is the code for reproducing the issue. A real status display is a lot more complex, but I have simplified it here.

import {getObject} from "@syncfusion/ej2-grids";
import {ColumnModel, Filter, Inject, TreeGridComponent} from "@syncfusion/ej2-react-treegrid";
import * as React from "react";

const projects = [
  {
    pkey: "PROJECT 1",
    total: 7200,
    "d#-0": 7200,
    children: [
      {
        summary: "This is summary for item 1",
        status: {
          description: "",
          name: "TO DO",
        },
        children: [],
      },
      {
        summary: "This is summary for item 2",
        status: {
          description: "",
          name: "CLOSED",
        },
        children: [],
      },
    ],
  },
];
export default function App() {
  const columns: ColumnModel[] = [
    {
      field: "pkey",
      width: "130",
      headerText: "Project",
    },
    {
      field: "summary",
      width: "180",
      headerText: "Summary",
    },
    {
      field: "status",
      headerText: "Status",
      width: "150",
      //@ts-ignore
      template: (row: any) => {
        return <span>{row.status ? row.status.name : ""}span>;
      },
      filter: {
        type: "CheckBox",
        //@ts-ignore
        itemTemplate: (row: any) => <span>{row.status ? row.status.name : ""}span>,
      },
    },
  ];
  return (
    <div>
      <TreeGridComponent
        dataSource={projects}
        childMapping="children"
        columns={columns}
        allowFiltering={true}
        filterSettings={{
          ignoreAccent: true,
          type: "Menu",
        }}
      >
        <Inject services={[Filter]} />
      TreeGridComponent>
    div>
  );
}

[Deniz]

This issue doesn't seem to be related to itemTemplate but to be related with value of status column being an object. 

If I remove the itemTemplate, from the filter. It still doesn't display all possible options, although it is rendered incorrectly, I expect 2 object, 1 blank to be displayed. 

[Farveen Sulthana Thameeztheen Basha]

Hi Deniz,

From using your provided code example, we suspect that you need to perform Filtering for name values from Status column bound in TreeGrid. We would like to let you know that Templates are used only for display purpose and data operations such as Filtering, Sorting will be based on Field values.

If you want to filter the name values from status column you can use complex databinding feature of the TreeGrid. Complex data binding in the treegrid by using the dot(.) operator in the column.field. By defining status.name, you can perform Filtering for that object.

Refer to the code below:-

<TreeGridComponent

              dataSource={projects}

              columns={this.columns}

              childMapping="children"

              allowFiltering={true}

              filterSettings={{

                ignoreAccent: true,

                type: 'Menu',

              }}

            >

              <Inject services={[Filter, Page]} />

     </TreeGridComponent

 

columns = [

         .   .    . 

     {

      field: 'status.name',

      headerText: 'Status',

      width: '150',

      //@ts-ignore

      template: (row) => {

        return <span>{row.status ? row.status.name : ''}</span>;   //templates for display purpose

      },

      filter: {

        type: 'CheckBox',

        //@ts-ignore

        itemTemplate: (row) => <span>{row.status ? row.status.name : ''}</span>,

      },

    },

]

Modified sample link:- https://stackblitz.com/edit/react-xlckpw-3cnka2?file=index.js,data.js

Documentation link:- https://ej2.syncfusion.com/react/documentation/treegrid/columns/complex-data-binding/

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

Regards,

Farveen sulthana T

Note:- If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.