TreeGrid with DataSource

[bobby123o]

Hello! I have been looking through all Tree examples in the showcase page. However, they do not match what I am looking for. From what I can tell, they all have nodes that are of the same "object", like people, or folders. My data comes in as a JSON which consists of a list with many "machines". The showcase menu itself would be more like what I am looking at, which the source code does not seem available to.

Simplified JSON:

{
"machines": [
{
"id": "123",
"name": "name",
"country": "123",
"station": "123",
"terminal": "123",
"status": "online"
... (other random data)
},]}

What would be the best approach to this? Would a single DS file some how be able to solve this or do I need to modify the JSON and create another that holds the categories?
This is what I've got in the DS at the moment which obviously is not enough.

public static KCollectionDS [I]instance [/I]= null;

public static KCollectionDS getInstance() {
    if ([I]instance [/I]== null) {
[I]instance [/I]= new KCollectionDS("kCollectionDS_JSON");
    }
    return [I]instance[/I];
}
public KCollectionDS(String id) {
    setID(id);
    setDataFormat(DSDataFormat.[I]JSON[/I]);
    DataSourceTextField countryField = new DataSourceTextField("country_name", "Country");
    DataSourceTextField stationField = new DataSourceTextField("station_name", "Station");
    DataSourceTextField terminalField = new DataSourceTextField("terminal","Terminal");
    DataSourceTextField machineField = new DataSourceTextField("computer_name", "Machine");
    machineField.setPrimaryKey(true);
    machineField.setRequired(true);

    setFields(countryField, stationField, terminalField, machineField);
    setDataURL("ksjson.json");
}

Any insight would be very appreciated, thanks!

Best regards, Bobby

[Isomorphic]

You can solve this a number of ways, but ultimately the result has to be that you provide the data to the TreeGrid in one of its supported formats.

You haven't said anything about how this data is ultimately stored and/or loaded, but yes, either client- or server-side you could have a DataSource that transforms this JSON into the expected format.

[bobby123o]

The data is retrieved from a server and is retrieved in the format mentioned above (rest php). Would I have to reformat the JSON and make it more like how it is represented in the image or what is the supported formats of the TreeGrid? Could it take a JSON with multiple dimensions (first country, then stations... and at last machines) or should it be like what it is now (every machine at the top layer with category data as fields)? It is possible to see how the showcase left menu was designed?

Thanks

[Isomorphic]

You can do the transform wherever you want, but you need to ultimately end up with one of the formats that TreeGrid supports. These are extensively documented, with several samples.

https://smartclient.com/smartclient-...ttr..Tree.data

https://smartclient.com/smartclient-...reeDataBinding

[bobby123o]

Thanks for the links, they helped a lot. How many nodes would be considered large in case of providing all data at creation? I will probably have over 2000 nodes at a maximum depth of 4-5. I am currently using a JSON file that exists locally using: "setDataURL("kiosksjsonF1.json");". I will of course change this later to the actual URL. I will need to add a few objects to the JSON (Not currently looking at changing the server). What would be the best way to fetch the JSON, modify the string and then send it to the datastructure?

I am also considering the skin editor. How much is it possible to change the styles in this editor? I am very familiar with CSS but I feel like the editor would be a better choice, especially when each component has so many different stages like hover etc.

[Isomorphic]

We don't have enough information to answer. 2000+ nodes is OK on the client, but if this information is coming live from a database, you probably want to do load-on-demand instead. Unless of course every user pretty much visits the whole tree. Or you might be able to cache it. And so on. We offer Consulting services if you need help in this area.

Meanwhile, if you don't want to change your server, the typical approach is DataSource.transformRequest. Read the QuickStart Guide to get an idea of the different options.

Skin Editor documentation is here:

https://smartclient.com/smartclient-...up..skinEditor

It is generally designed to make it possible to re-theme an entire skin by just specifying a couple of base colors. If you want to customize more deeply, like changing shapes and sizes of controls, you can combine the Skin Editor with additional, hand-written customizations maintained outside of the Skin Editor. All explained in the docs - note that the docs are also searchable.

[bobby123o]

Thanks!