1. Feedback
  2. JavaScript
  3. 39035

Welcome to the JavaScript feedback portal. We’re happy you’re here! If you have feedback on how to improve the JavaScript, we’d love to hear it!

  • Check out the features or bugs others have reported and vote on your favorites. Feedback will be prioritized based on popularity.
  • If you have feedback that’s not listed yet, submit your own.

Thanks for joining our community and helping improve Syncfusion products!

0
Votes

CustomDataAdaptor: SharePoint List

I am looking to bind a TreeGrid to a SharePoint List ... I believe I have the code right but it keeps throwing the following error:

Empty

Code:

/* CustomDataAdaptor */
<div class="control-section">
    <div class="content-wrapper">
        <div id="TreeGrid">
        </div>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<link href="https://cdn.syncfusion.com/ej2/20.3.52/bootstrap5.css" rel="stylesheet" />
<!-- Essential JS 2 global script -->
<script src="https://cdn.syncfusion.com/ej2/20.3.52/dist/ej2.min.js" type="text/javascript"></script>
<script type="text/javascript">
ej.base.registerLicense('ORg4AjUWIQA/Gnt2VVhjQlFaclhJXGFWfVJpTGpQdk5xdV9DaVZUTWY/P1ZhSXxRdkxhUH9bcnxWT2hVUEM=');

PopulateTree();
function PopulateTree() {
    var url = "https://m365x767297.sharepoint.com/sites/pwastage/_api/web/lists(guid'E5902532-AEB7-4EF5-AC42-030DE83A3B50')/items?$Select=ID,Title,ParentID/Id,StartDate&$expand=ParentID"
    var griddata = []
    var datatemp = []
    var data = []
    new ej.data.DataManager({
        adaptor: new ej.data.CustomDataAdaptor({
            getData: function(option) {
                var xhttp = new XMLHttpRequest();
                xhttp.onreadystatechange = function () {
                if (this.readyState == 4) {
                        request = $.extend({}, option, { xhttp });
                        if ((xhttp.status >= 200 && xhttp.status <= 299) || xhttp.status === 304) {
                            datatemp = JSON.parse(xhttp.responseText);
                            data.push({"result":datatemp.d.results,"count":datatemp.d.results.length});
                            console.log(data[0]);
                            option.onSuccess(data[0], request);
                    } else {
                        option.onFailure(request);
                    }
                }
                };
                xhttp.open("GET", url, true);
                xhttp.setRequestHeader('Accept', 'application/json;odata=verbose');
                xhttp.setRequestHeader('Content-Type', 'application/json;odata=verbose');
                xhttp.setRequestHeader('X-RequestDigest', $("#__REQUESTDIGEST").val());
                xhttp.send(option.data);
            }
        })
    }).executeQuery(new ej.data.Query().take(8)).then((e) => {
        griddata = e.result //will contain the records
    });
    var treeGridObj = new ej.treegrid.TreeGrid({
        dataSource: griddata,
        idMapping: 'Id',
        parentIdMapping: 'ParentID/Id',
        height: 400,
        treeColumnIndex: 1,
        allowPaging: true,
        toolbar: [ 'ExpandAll', 'CollapseAll', 'Add', 'Edit', 'Delete', 'Update', 'Cancel', 'Print','ExcelExport', 'Search'],
        editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: "Row", newRowPosition: 'Child' },
        columns: [
            { field: 'ID', headerText: 'Task ID', width: 80, textAlign: 'Right', isPrimaryKey: true, },
            { field: 'Title', headerText: 'Task Name', width: 200, textAlign: 'Left' },
            { field: 'StartDate', headerText: 'Start Date', width: 90, textAlign: 'Right', type: 'date', format: 'yMd' }
        ]
    });
    treeGridObj.appendTo('#TreeGrid');
};
</script>