We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. React - EJ 2
  4. Tree grid search not workins as expected

Tree grid search not workins as expected

Hi,


I have the following code using the Treegrid component.

<div className='treeGrid-container'>
    <TreeGridComponent
      id='grdActivityTree'
      ref={grdFullActivityTree}
      className='treeGrid-class'
      rowTemplate={treeRowTemplate}
      enableCollapseAll={true}
      dataSource={fullActivitySchedule}
      childMapping="subTasks"
      treeColumnIndex={0}
      toolbar={toolbarOptions}
      allowTextWrap={true}
      allowSelection={true}
      height="500"
      width="100%"
    >
      <Inject services={[Filter, Toolbar]}/>
      <ColumnsDirective>
        <ColumnDirective field='name' width='500' headerText='Name:' textAlign='left'></ColumnDirective>
        <ColumnDirective field='code' width='200' headerText='Code:' textAlign='left'></ColumnDirective>
        <ColumnDirective field='startDate' width='140' headerText='Start Date:' textAlign='left'></ColumnDirective>
        <ColumnDirective field='endDate' width='140' headerText='End Date:' textAlign='left'></ColumnDirective>
        <ColumnDirective field='select' headerText='Select:' textAlign='right'></ColumnDirective>
      </ColumnsDirective>
    </TreeGridComponent>
</div>


Following is an example of the data

[{

        "ItemId": "5b5d0793-f763-45c1-986a-805ad340b8f3",

        "WbsName": "Parent 1",

        "SubTasks": [{

                "ItemId": "4334d966-87fe-4eec-a14e-c802d4383194",

                "WbsName": "Parent 2",

                "SubTasks": [{

                        "ItemId": "46cce3b3-aa72-47c9-027e-3eb019547b6f",

                        "WbsName": "Parent 3",

                        "SubTasks": [{

                                "ItemId": "7c353fb5-15e3-4092-9e95-2c631b330208",

                                "ActivityId": "7c353fb5-15e3-4092-9e9a-2c631b330208",

                                "ActivityCode": "ABCDEFG",

                                "ActivityName": "Child 1",

                                "PlannedStartDate": "2022-08-01 16:00:00",

                                "PlannedEndDate": "2022-08-01 16:00:00",

                                "SubTasks": []

                            }, {

                                "ItemId": "4b0271b1-d49c-4eb8-9d92-485a068655d5",

                                "ActivityId": "4b0271b1-d49c-4eb8-9d92-0cda068655d5",

                                "ActivityCode": "HIJKLM",

                                "ActivityName": "Child 2",

                                "PlannedStartDate": "2022-03-10 16:00:00",

                                "PlannedEndDate": "2022-03-10 16:00:00",

                                "SubTasks": []

                            }, {

                                "ItemId": "e24cce2c-c84f-4674-b184-4133c6f18a3d",

                                "ActivityId": "e24cce2c-c84f-4674-b184-8283c6f18a3d",

                                "ActivityCode": "NOPQR",

                                "ActivityName": "Child 3",

                                "PlannedStartDate": "2022-08-01 16:00:00",

                                "PlannedEndDate": "2022-08-01 16:00:00",

                                "SubTasks": []

                            }

                        ]

                    }

                ]

            }

        ]

    }

]


The last child also has a "SubTasks" in it but it would be empty. When I do a search on this using the in built search feature, I get a response of "No Records found"


The Tree grid works fine in another component using a data which does not contain the empty "SubTasks" in the last child.


Need to know how to handle this.


3 Replies
PS Pon Selva Jeganathan Syncfusion Team December 6, 2022 01:13 PM UTC

Hi Aravind,


Query: Tree grid search not workins as expected


Based on your shared code snippet, we could see that you are using the rowTemplate feature with searching functionality. The row template feature is not compatible with searching functionality rather, it is a limitation of rowTemplate feature.


Kindly get back to us for further assistance.


Regards,

Pon selva


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


AR Aravind Rajagopal December 6, 2022 04:30 PM UTC

Hi,


I have another component where a similar TreeGrid is used with rowTemplate.

In that component, search is working fine though.

The only difference I could find was the data structure is slightly different.

Here the last child does not have a subTask property in it

<div className='treeGrid-container'>
            <TreeGridComponent
              id='grdActivityTree'
              ref={grdActivityTree}
              className='treeGrid-class'
              rowTemplate={treeRowTemplate}
              enableCollapseAll={true}
              dataSource={activitySchedule}
              childMapping="subtasks"
              treeColumnIndex={1}
              toolbar={toolbarOptions}
              allowTextWrap={true}
              allowSelection={true}
              dataBound={dataBound}
              height="500"
              width="100%"
            >
              <Inject services={[Filter, Toolbar]}/>
              <ColumnsDirective>
                <ColumnDirective headerText='Type:' field='type' width='80' textAlign='left' ></ColumnDirective>
                <ColumnDirective field='name' headerTemplate={nameHeaderTemp} width='500' textAlign='left'></ColumnDirective>
                <ColumnDirective field='code' width='200' headerText='Code:' textAlign='left'></ColumnDirective>
                <ColumnDirective field='startDate' width='100' headerText='Start Date:' textAlign='left'></ColumnDirective>
                <ColumnDirective field='endDate' width='100' headerText='End Date:' textAlign='left'></ColumnDirective>
                <ColumnDirective field='select' headerText='Select:' textAlign='right'></ColumnDirective>
              </ColumnsDirective>
            </TreeGridComponent>


Data

"Disciplines": [{

        "DisciplineId": "5ae14587-99a2-4614-8f08-745a55569ee8",

        "Name": "ABC",

        "Type": "Discipline",

        "PlannedStartDate": "2021-02-01T08:00:00",

        "PlannedEndDate": "2024-05-10T16:00:00",

        "Subtasks": [{

                "PackageId": "429086fc-e7c3-113a-9b2a-fbba6d15902c",

                "Name": "DEF",

                "Type": "Package",

                "PlannedStartDate": "2021-02-01T08:00:00",

                "PlannedEndDate": "2023-07-17T16:00:00",

                "Subtasks": [{

                        "PhaseId": "593ca7c0-237s-4c57-8871-c755d431fbd8",

                        "Name": "GHI",

                        "Type": "Phase",

                        "PlannedStartDate": "2021-02-01T08:00:00",

                        "PlannedEndDate": "2021-07-29T16:00:00",

                        "Subtasks": [{

                                "ActivityId": "8a6c307c-aa3f-46dc-a09e-93db68146342",

                                "Name": "JKL",

                                "Type": "Milestone",

                                "ActivityCompletionStatusId": 2,

                                "ActivityReportedStatus": "Completed",

                                "PlannedStartDate": "2021-02-01T08:00:00",

                                "PlannedEndDate": "2021-02-01T08:00:00",

                            }, {

                                "ActivityId": "abfba2b8-qw1e-4538-86e6-ff0b0f4a9de0",

                                "Name": "MNO",

                                "Type": "Task",

                                "ActivityCompletionStatusId": 1,

                                "ActivityReportedStatus": "Completed",

                                "PlannedStartDate": "2021-02-01T08:00:00",

                                "PlannedEndDate": "2021-07-29T16:00:00",

                            }, {

                                "ActivityId": "515f0ff2-c737-23b4-a39f-a2a5d68ce702",

                                "Name": "PQR",

                                "Type": "Task",

                                "ActivityCompletionStatusId": 1,

                                "ActivityReportedStatus": "Completed",

                                "PlannedStartDate": "2021-04-19T08:00:00",

                                "PlannedEndDate": "2021-06-01T16:00:00",

                            }

                        ]

                    }

                ]

            }

        ]

    }

]



So this is why I am confused. Search works fine here but not in the earlier componet


PS Pon Selva Jeganathan Syncfusion Team December 7, 2022 05:15 PM UTC

Hi Aravind,


The functionalities such as Searching are not feasible for RowTemplate feature. It will perform these actions based on the actual datasource bind for the particular field property alone but not for the customized data provided in Template. So ,it is not feasible to implement this as feature.



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


Loader.
Live Chat Icon For mobile
Up arrow icon