IgTreeGrid angular2 loadOnDemand sample

Roman posted over 7 years ago

Hi All!

I use igniteui igTreeGrid component (enableRemoteLoadOnDemand: true) with angular2.

import { Component } from '@angular/core';
import { RoutingComponent } from '../navigation/route.decorator';

declare var $: any;

const dataUrl = '/nodes.json';

@Component({
    templateUrl: `<ig-tree-grid [(widgetId)]='id' [options]="tgridOptions"></ig-tree-grid>`
})
@RoutingComponent()
export class UsersTreeView {

    private id: string = 'tgrid';
    private tgridOptions: any;

    constructor() {

        this.tgridOptions = {
            autoCommit: true,
            autoGenerateColumns: false,
            dataSource: [],
            dataSourceUrl: dataUrl,
            enableRemoteLoadOnDemand: true,
            features: [
                { name: 'Resizing' },
                //{ name: 'RowSelectors', rowSelectorNumberingMode: 'sequential' },
                //{ name: 'Selection' }
            ],
            initialExpandDepth: 0,
            primaryKey: "id",
            childDataKey: "objects",
            renderExpansionIndicatorColumn: true,
            height: "400px",
            width: "100%",
            columns: [
                { key: "id", headerText: "id" },
                { key: "name", headerText: "name" },
                { key: "description", headerText: "description" }
            ]
        };
    }
}

And here's nodes.json structure

[
{
    "id": 0,
    "name": "Project Plan",
    "description": "6/2/2014",
    "objects": []
},
{
    "id": 1,
    "name": "Project Plan",
    "description": "6/2/2014",
    "objects": [
      {
        "id": 3,
        "objects": [ { "id": 4} ],
        "name": "3"
      }
    ]
}
]

1. First node ({
    "id": 0,
    "name": "Project Plan",
    "description": "6/2/2014",
    "objects": []
})

is not expanding instead of havingobjects(this is childkey) field array.

2. If treegrid options doesn't have dataSource (I'm using RemoteLoadOnDemand mode) property component gets error -Cannot read property 'length' of undefined

What settings I have lost to include into igTreeGrid to resolve such behaviour?

Thanks.

Parents

3995

Offline Deyan Kamburov posted over 7 years ago

Hi Roman,

At this point not setting dataSource is not supported scenario. But I investigated this and logged an issue in github, so that we could support loadOnDemand capabilities into an Angular TreeGrid.

You can see the issue here https://github.com/IgniteUI/igniteui-angular2/issues/146

Once we got it solved you could verify your scenario. In my opinion when there is no data source the treegrid should not throw an error "Cannot read property 'length' of undefined"
Cancel
Reply

Cancel
60

Roman posted over 7 years ago in reply to Deyan Kamburov

Hi, Deyank!

I solved TreeGrid remote filling.

The reson was tha remote json-data must be bounded withDataKeyprop. (f.e. { data : [{......} ]} ).

Another question: how add addittional (remove unnecessary) request parameters which is passing to server side during node expanding?

Thanks.
Cancel
Reply

Cancel
3995

Verified Answer
Offline Deyan Kamburov posted over 7 years ago in reply to Roman

Hello Roman,

You can specify requestDataCallback and use your custom request to get the data and the additional parameters you want to send.

You could specify this callback into the rowExpanding event.

For example:

rowExpanding: function() {

if (ui.owner.dataSource.settings.treeDS.requestDataCallback === null ||
ui.owner.dataSource.settings.treeDS.requestDataCallback === undefined) {
ui.owner.dataSource.settings.treeDS.requestDataCallback = function (record, expand, callbackArgs) {
  if (!record) {
   return;
  }
  var opts, me = ui.owner.dataSource, url, path, params, func, s = ui.owner.dataSource.settings.treeDS,
   args = {
    record: record,
    callbackArgs: callbackArgs,
    expand: expand
   };
  path = ui.owner.dataSource.getPathBy(record);
  params = ui.owner.dataSource._encodeUrl();
  params.expand = expand;
  url = s.dataSourceUrl + "?" + ui.owner.dataSource._encodeUrlPath(path, record[ s.propertyDataLevel ]);
  opts = {
   type: "GET",
   url: url,
   data: params,
   success: function (data, textStatus, jqXHR) {
    var func = s.requestDataErrorCallback,
     noCancel = true;
    if ($.type(func) === "function") {
     noCancel = func(args, data, textStatus, jqXHR);
    }
    if (noCancel) {
     me._requestDataSuccess(args, data, textStatus, jqXHR);
    }
   },
   error: function (jqXHR, textStatus, errorThrown) {
    var func = s.requestDataErrorCallback;
    if ($.type(func) === "function") {
     func(args, jqXHR, textStatus, errorThrown);
    }
   }
  };
  $.ajax(opts);
}
}

}

You can add your custom parameters to the params variable
Cancel
Reply

Reject Answer

Cancel

Reply

60

Roman posted over 7 years ago in reply to Deyan Kamburov

Thank you, DeyanK!

I found that there's treeDS.customEncodeUrlFunc method to overwrite url params.

But igTreeGrid erases treeDS during each rowExpand/Collapse event.

So if form customEncodeUrlFunc after widget's creation

this.treegridOptions = {

create: e => {

let treeGrid = $(e.target).data("igTreeGrid");

treeGrid.dataSource.settings.treeDS.customEncodeUrlFunc = function(rec, expanded){...}

}

}

customEncodeUrlFunc will be null

Such is default behaviour?

Maybe there's place in treegrid initialization pipeline where it can be placed only once?
Cancel
Reply

Cancel

Children

3995

Verified Answer
Offline Deyan Kamburov posted over 7 years ago in reply to Roman

Hi Roman,

No you can assign the customEncodeUrlFunc into the rendered event, to make sure the data source is already created:

rendered: function (e, ui) {
var ds = ui.owner.dataSource;
ui.owner.dataSource.settings.treeDS.customEncodeUrlFunc = function(record, expand){
  var dsUrl = ds.settings.treeDS.dataSourceUrl;
  var path = ds.getPathBy(record);
  return dsUrl + "?" + "path=" + path + "&depth=" + record[ds.settings.treeDS.propertyDataLevel] + "&additionalparam=foo";
}
}
Cancel
Reply

Reject Answer

Cancel