1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. Controles are not working as expected with OdataV4adapter

Controles are not working as expected with OdataV4adapter

Hello, I am trying to use JavaScript (ES5) TreeGrid and DataManager with OdataV4Adapter, however it's not working as describe in documentation, I want to use like below to allow CRUD operation easily, but some reason TreeGrid is rendering first and DataManager second, because of that the grid is empty, I believe that it's may be due to async where TreeGrid is not waiting for DataManager to finish loading the data?

The desired way and as per the documentation, below is not working and showing empty TreeGrid
-----------------------------------------------------------------code-------------------------------------------------------------
        var DM = new ej.data.DataManager({
            url: 'https://localhost:44376/Users',
            adaptor: new ej.data.ODataV4Adaptor,
            crossDomain: true,
            headers: [{ 'Authorization': 'Bearer eyJhbseGciOiJIUsegeszI1NiIsInR5cCId6IkpXVCJ' }]
        });

var treeGridObj = new ej.treegrid.TreeGrid({
                dataSource: DM,
                height: 400,
                allowReordering: true,
                allowFiltering: true,
                allowSorting: true,
                filterSettings: { type: 'Excel' }
            });
            treeGridObj.appendTo('#TreeGrid');
 
-----------------------------------------------------------------code-------------------------------------------------------------


However, I manager to get it work, but it doesn't sound correct in prospect to CRUD operation
-----------------------------------------------------------------code-------------------------------------------------------------
        new ej.data.DataManager({
            url: 'https://localhost:44376/Users',
            adaptor: new ej.data.ODataV4Adaptor,
            crossDomain: true,
            headers: [{ 'Authorization': 'Bearer eyJhbseGciOiJIUsegeszI1NiIsInR5cCId6IkpXVCJ' }]
        }).executeQuery(new ej.data.Query()).then((e) => {
            var treeGridObj = new ej.treegrid.TreeGrid({
                dataSource: e.result,
                height: 400,
                allowReordering: true,
                allowFiltering: true,
                allowSorting: true,
                filterSettings: { type: 'Excel' }
            });
            treeGridObj.appendTo('#TreeGrid');
        });
-----------------------------------------------------------------code-------------------------------------------------------------

Many thx, Navneet


4 Replies 1 reply marked as answer
PK Padmavathy Kamalanathan Syncfusion Team June 10, 2020 03:20 PM UTC

Hi Navneet, 
  
Thanks for contacting Syncfusion Forums. 

 
QUERY1: the grid is empty 

We are unable to reproduce the reported issue at our end. We have created sample with OData V4 Adaptor and shared you here.

You can download the sample from the below location,

QUERY2: it doesn't sound correct in prospect to CRUD operation

We are validating the reported issue and we will get back to you with sample handling CRUD functionalities on or before 12, June 2020. 

In the mean time we request you to share us the below details so that we could validate the reported issue,
  1. Complete Tree Grid rendering code (both client and server end)
  2. Please share us your product version details
  3. Share us video demonstrating the issue
  4. Screenshot of error with stack trace (if any)
  5. If possible, share us issue reproducible sample or reproduce the issue in the above sample and share us
Regards,
Padmavathy Kamalanathan



PK Padmavathy Kamalanathan Syncfusion Team June 12, 2020 09:43 AM UTC

Hi Navneet, 
  
Thanks for your patience. 
  
QUERY2: it does not sound correct in prospect to crud operation

 
 
We are unable to reproduce the reported issue at our end. We have created sample with CRUD operation (edit mode as "Row" and newRowPostion as "Child").   

 
Please check the below code snippet, 

 
  
<div id="TreeGrid"></div> 
  
<script> 
var data = new ej.data.DataManager({ 
        url: 'http://localhost:49442/Orders', 
        adaptor: new ej.data.ODataV4Adaptor(), 
        crossDomain: true 
    }); 
  
  
    var treegrid = new ej.treegrid.TreeGrid({ 
        dataSource: data, 
        allowPaging: true, 
        idMapping: 'TaskId', 
        parentIdMapping: 'ParentId', 
        treeColumnIndex: 1, 
        toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'], 
        editSettings: { allowEditing: true, allowAdding: true, 
          allowDeleting: true, mode: 'Row', newRowPosition: 'Child' }, 
       columns: [ 
            { field: 'TaskId', isPrimaryKey: true, headerText: 'Task ID', width: 120 }, 
            { field: 'TaskName', width: 140, headerText: 'TaskName' }, 
            { field: 'Duration', width: 140, headerText: 'Duration' } 
        ] 
    }); 
    treegrid.appendTo('#TreeGrid'); 
</script> 
  
  [EnableQuery] 
        public IQueryable<TreeData> Get(ODataQueryOptions opts) 
        { 
            if (tree.Count == 0) 
            { 
                tree = TreeData.GetSelfData().ToList(); 
            } 
            var data = tree.AsQueryable(); 
            var count = data.Count(); 
            //perform filter 
            if (opts.Filter != null) 
                data = opts.Filter.ApplyTo(data, new ODataQuerySettings()).Cast<TreeData>(); 
            if (opts.Skip != null) 
                data = opts.Skip.ApplyTo(data, new ODataQuerySettings());  //perform skip 
            if (opts.Top != null) 
                data = opts.Top.ApplyTo(data, new ODataQuerySettings());  //perform take 
            return data.AsQueryable(); 
        } 
  
        //perform editing

 
        public TreeData Patch([FromODataUri]int key, [FromBody]Delta<TreeData> patch) 
        { 
            TreeData data = tree.Where(p => p.TaskId == key).FirstOrDefault(); 
            patch.Patch(data); 
            return data; 
        } 
  
        ////using inherited class for adding new record 
        public HttpResponseMessage Post(parentClass value) 
        { 
            TreeData val = value.taskData; 
            
            var i = 0; 
            //For Loop for Finding the parent record and setting it's "HasChildMapping" 
            (here it is "isParent")  to true 
            for (; i < tree.ToList().Count; i++) 
                { 
                    if (tree.ToList()[i].TaskId == val.ParentId) 
                    { 
                        if (tree.ToList()[i].isParent == null) 
                        { 
                            tree.ToList()[i].isParent = true; 
                        } 
                        break; 
                    } 
                } 
            tree.Add(val); 
            return Request.CreateResponse(HttpStatusCode.OK, value); 
        } 
  
        //perform delete 
        public HttpResponseMessage Delete([FromODataUri]int key) 
        { 
            TreeData data = tree.Where(p => p.TaskId == key).FirstOrDefault(); 
            if (data != null) 
            { 
                tree.Remove(data); 
            } 
            else 
            { 
                Request.CreateResponse(HttpStatusCode.NotFound); 
            } 
            return Request.CreateResponse(HttpStatusCode.OK, "Removed"); 
        } 

 
NOTE: In the "Put" method, we suggest you to use the inherited class (inherit the data model class with additional Tree Grid properties which are present in the post while adding new record - like index, level etc - shown in the sample -  for proper working of the "Add" operation). In the sample, we have "TreeData" data model class. But we have used inherited class "parentClass" as type of parameter 'value' in the "PUT" method.

 
 
You can download the sample from the below location, 
  
Still facing the issue, kindly get back to us with the details requested by us in our last update. 
  
Regards, 
Padmavathy Kamalanathan 


Marked as answer
NS Navneet Saraswat August 14, 2020 07:44 AM UTC

Many thx for your response and sorry for late reply

PK Padmavathy Kamalanathan Syncfusion Team August 17, 2020 03:38 AM UTC

Hi Navneet,

Thanks for updating.

For more assistance please come back to us.

Regards,
Padmavathy Kamalanathan


Loader.
Up arrow icon