How to filter a React Grid using a GridColumnMenuCheckboxFilter where the underlying data to be filtered is in a nested array property?

[James]

Hi,

I have a React Grid displaying data from a remote API. I've added filters to most of the columns, which seem to work well where the underlying property to be filtered against is a top level field. However, I also need to filter against a nested array of items that may exist within each row. I've not been able to achieve this thus far, possibly because it's not supported, but I'd thought I'd ask here anyway.

To demonstrate the problem more clearly, here is an example JSON dataset of 3 items:

[
  {
    "id": "c0664e54-b3d6-4c69-b58e-04817d5aaa3c",
    "title": "Item 1",
    "description": "",
    "tasks": [
      {
        "id": "4c9e6015-e086-46cd-bd7d-6bf15c0f2760",
        "type": 3,
        "name": "Review",
        "description": "",
        "assignedTo": {
          "displayName": "User 1",
          "emailAddress": "[e-mail]"
        },
        "dueDate": "2024-12-21T10:51:40+00:00"
      },
	  {
        "id": "4c9e6015-e086-46cd-bd7d-6bf15c0f2761",
        "type": 4,
        "name": "Review",
        "description": "",
        "assignedTo": {
          "displayName": "User 2",
          "emailAddress": "[e-mail]"
        },
        "dueDate": "2024-12-21T10:51:40+00:00"
      }
    ],
    "createdOn": "2023-12-01T17:35:32+00:00",
    "modifiedOn": "2023-12-01T17:35:32+00:00"
  },
  {
    "id": "df0e2fb3-9e1f-4986-ab06-04c52b19371a",
    "title": "Item 2",
    "description": "",
    "tags": [ {
        "id": "2c9e6015-e086-46cd-bd7d-6bf15c0f2760",
        "type": 3,
        "name": "Review",
        "description": "",
        "assignedTo": {
          "displayName": "User 1",
          "emailAddress": "[e-mail]"
        },
        "dueDate": "2024-12-21T10:51:40+00:00"
      }],
    "createdOn": "2024-08-12T13:13:05+00:00",
    "modifiedOn": "2024-08-12T13:13:05+00:00"
  },
  {
    "id": "e43ef097-bad9-4bf5-bce0-08c63ac50308",
	"title": "Item 3",
    "description": "",
    "tags": [ {
        "id": "3a4e6015-e086-46cd-bd7d-6bf15c0f2761",
        "type": 4,
        "name": "Review",
        "description": "",
        "assignedTo": {
          "displayName": "User 2",
          "emailAddress": "[e-mail]"
        },
        "dueDate": "2024-12-21T10:51:40+00:00"
      }],
    "createdOn": "2023-12-11T09:32:04+00:00",
    "modifiedOn": "2023-12-11T09:32:04+00:00"
  }]

In this data set, each item can have one or more tasks associated with it. I use a custom cell format to display a list of the task assignees, but I also need to be able to filter on this column. The filter list would show a list of all of the available task assignees (i.e. the liveTasks.assignedTo.displayName value). So that when a user name is selected to filter, we only show the items where that person has an open task.

My GridColumn syntax currently looks like this:

<GridColumn field="tasks" title="Task assignee(s)" cell={CustomLiveTaskAssigneesCell}  columnMenu={TaskAssigneeColumnMenuCheckboxFilter} width="150px" />

My TaskAssigneeColumnMenuCheckboxFilter component looks like this:

export const TaskAssigneeColumnMenuCheckboxFilter = (props: GridColumnMenuProps) => {
  const {data} = useFetchTaskAssignees();
  //let taskAssignees = (data || []).map(assignee => { return { "liveTasks.assignedTo" : {"displayName" : assignee }} });
  let taskAssignees = (data || []).map(assignee => { return { displayName : assignee } });
  return (
    <div>
      <GridColumnMenuCheckboxFilter {...props} data={taskAssignees} expanded={true} />
    </div>
  );
}

I've tried various formats in the "let taskAssignees... " line, but nothing has worked. 

 

Hopefully that gives enough context. Is what I'm trying to do possible at all?

Many thanks.

[Yanko]

Hello, James, 

Thank you very much for the extensive description and the code snippets provided.

The column menu supports filtering for top-level fields and also deeply nested ones. I prepared an example displaying filtering by deeply nested primitive values:

• https://stackblitz.com/edit/react-9cmw5pwq?file=app%2Fapp.tsx 

However, the built-in column menu does not support filtering an array like in the described scenario. In this case, you can implement an entirely custom column menu filter. I can suggest contacting our professional service team and they will implement it for you:

• https://www.telerik.com/services 

Please let me know if I can further assist you.

Regards,
Yanko
Progress Telerik