When load data in child ,the child record duplicated in parent level too

[Ahmed]

Hi,

Q1- In self reference tree grid, When parent data load, it loaded perfectly ,

But when click to load child records ,the child records duplicated in the parent level 

  How to fix this problem  ?

Note: the duplication in UI only not in database.

In View (Index.cshtml)

<ejs-toast id="element" showCloseButton="true" >

    <e-toast-position X="Right" Y="Bottom"></e-toast-position>

</ejs-toast>

<ejs-treegrid id="TreeGrid" queryCellInfo="OnQueryCellInfo" allowTextWrap="true" height="400" idMapping="ID" actionFailure="failure" hasChildMapping="Isparent" allowSelection="true" allowPaging="true" parentIdMapping='ParentExcuseConfigurationID'   treeColumnIndex="1" toolbar="@(new List<string>() { "Add","Edit", "Delete", "Update", "Cancel" })" created="created">

    @*<e-data-manager url="/ExcuseConfiguration/DataSource" insertUrl="/ExcuseConfiguration/Create" updateUrl="/ExcuseConfiguration/Edit" removeUrl="/ExcuseConfiguration/Delete" adaptor="UrlAdaptor"></e-data-manager>*@

    <e-treegrid-editsettings allowAdding="true" allowEditing="true" allowDeleting="true" mode="Dialog" allowEditOnDblClick="false"></e-treegrid-editsettings>

    <e-treegrid-columns>

        <e-treegrid-column field="ID" headerText="ID" visible="false" isPrimaryKey="true" textAlign="Right" width="70"></e-treegrid-column>

        <e-treegrid-column field="ExcuseName" headerText="@ResourcesWeb.PayrollResource.ExcuseName" editType="stringedit" width="180"></e-treegrid-column>

       @* <e-treegrid-column field="MaxNumberAllowed" headerText="MaxNumberAllowed" editType="numericedit" validationRules="@(new {required=true , number = true, min = 0 })" width="180"></e-treegrid-column>*@

        <e-treegrid-column field="TotalNumberAllowed" headerText="TotalNumberAllowed" editType="numericedit" validationRules="@(new {required=true , number = true, min = 0 })" width="180"></e-treegrid-column>

        <e-treegrid-column field="TotalDurationAllowed" headerText="TotalDurationAllowed" editType="numericedit" validationRules="@(new {required=true , number = true, min = 0 })" width="180"></e-treegrid-column>

        <e-treegrid-column field="MaxDurationAllowd" headerText="MaxDurationAllowd" editType="numericedit" validationRules="@(new {required=true , number = true, min = 0 })" width="180"></e-treegrid-column>

        <e-treegrid-column field="MinDurationAllowd" headerText="MinDurationAllowd" editType="numericedit" validationRules="@(new {required=true , number = true, min = 0 })" width="180"></e-treegrid-column>

        <e-treegrid-column field="IntervalTimeOfExcuse" headerText="IntervalTimeOfExcuse" editType="numericedit" validationRules="@(new {required=true , number = true, min = 0 })" width="180"></e-treegrid-column>

        <e-treegrid-column field="ResetIntervalCreditDuration" headerText="ResetIntervalCreditDuration" width="180" editType="dropdownedit" edit="new {@params = DDL_ResetIntervals }" validationRules="@(new {required=true  })"></e-treegrid-column>

        <e-treegrid-column field="CustomYearsNumber" headerText="CustomYearsNumber" editType="numericedit" validationRules="@(new {number = true, min = 0 })" width="180"></e-treegrid-column>

        <e-treegrid-column field="MinToleranceDaysExcuse" headerText="MinToleranceDaysExcuse" editType="numericedit" validationRules="@(new {required=true , number = true, min = 0 })" width="180"></e-treegrid-column>

        <e-treegrid-column field="DurationType" headerText="DurationType" width="180" editType="dropdownedit" edit="new {@params = DDL_MinEmpDurationType }"></e-treegrid-column>

        <e-treegrid-column field="MinEmployeeDuration" headerText="MinEmployeeDuration" width="180"></e-treegrid-column>

        <e-treegrid-column field="TicketDeductionType" headerText="TicketDeductionType" width="180" editType="dropdownedit" edit="new {@params = DDL_TicketDeduction }"></e-treegrid-column>

      @*  <e-treegrid-column field="ExcuseDurationTypeID" headerText="ExcuseDurationType" width="180" editType="dropdownedit" edit="new {@params = DDL_DurationTypes }"></e-treegrid-column>*@

        <e-treegrid-column field="ParentExcuseConfigurationID" headerText="ParentExcuseConfiguration" width="180" editType="dropdownedit" edit="new {@params = DDL_ExcuseConfigurations }"></e-treegrid-column>

    </e-treegrid-columns>

</ejs-treegrid>

<script>

 function created(args) {

///Some Code

        // extending the default UrlAdaptor

        class CustomAdaptor extends ej.data.UrlAdaptor {

            processResponse(data, ds, query, xhr, request, changes) {

                if (!ej.base.isNullOrUndefined(data.message)) {

                    setTimeout(

                        () => {

                            var toastObj = document.getElementById('element').ej2_instances[0];

                            toastObj.content = data.message;

                            toastObj.target = document.body;

                            toastObj.show();

                        }, 500);

                }

                if (!ej.base.isNullOrUndefined(data.data))

                    return data.data;

                else

                    return data;

            }

        }

        var grid = document.querySelector('#TreeGrid').ej2_instances[0];

        grid.dataSource = new ej.data.DataManager({

            url: "/ExcuseConfiguration/DataSource",

            insertUrl: "/ExcuseConfiguration/Create",

            updateUrl: "/ExcuseConfiguration/Edit",

            removeUrl: "/ExcuseConfiguration/Delete",

            adaptor: new CustomAdaptor()

        });

    }

</script> 

Pictures for More Details

Thanks very much.

[Padmavathy Kamalanathan]

Hi Ahmed, 

 

Greetings from Syncfusion Support. 

 

Query: when click to load child records ,the child records duplicated in the parent level 

 

We can reproduce the reported issue at our end with your code. For remote data, we need to return only parent records from the server side at initial rendering. Since you are using custom adaptor, we need to handle the same in application level. We need to pass the query at client end which will fetch and return only Parent record(at initial load) from server end. Please check the below code, 

 

 

<script> 

    function created(args) { 

        var grid = document.querySelector('#TreeGrid').ej2_instances[0]; 

 

        // extending the default UrlAdaptor 

        class CustomAdaptor extends ej.data.UrlAdaptor { 

        ------------- 

        } 

 

        grid.dataSource = new ej.data.DataManager({ 

            url: "/Home/DataSource", 

             --------- 

            adaptor: new CustomAdaptor() 

        }); 

        grid.query = new ej.data.Query().where('ParentId', 'equal', null); 

        // for root parent records, parentIdMapping(here ParentId is parentIdMapping property)  

        will be null – in your case use your own parentIdMapping – i.e ParentExcuseConfigurationID.  

        //So, we need to send filter query, which will filter and return parent record alone 

 

    } 

</script> 

 

 

Please check the below help documentation, 

https://ej2.syncfusion.com/javascript/documentation/data/querying/#querying  

https://ej2.syncfusion.com/javascript/documentation/data/querying/#filtering  

                                                                                                                                         

Kindly use the above solution to resolve your issue and get back to us if you need further assistance. 

 

Regards, 

Padmavathy Kamalanathan 

[Ahmed]

Perfect,

Thanks very much For your response 

[Padmavathy Kamalanathan]

Hi Ahmed, 

 

We are glad to hear that your issue has been resolved. 

 

Kindly get back to us for further assistance. 

 

Regards, 

Padmavathy Kamalanathan