Fontawesome set icon in JSON config file

Suite and Optimus Suite 5
#1

Hi

I want to set the row icon in the treeview to a column depending on the status and type of row.
For example:

The icon might be a green truck if the line is a delivery and running on time, a yellow truck if running a bit late or a green tick if the job is done.

It seems to be possible to do it in the XML format but I use JSON config files.

How is it done in the JSON format please.
Thanks

#2

Here you can find an example of using the font_awesome icons in the treeView in case of loading from the json file:
dhtmlx.com/docs/products/dhtmlx … esome.html
If the problem still occurs for you could you please, clarify the details of your problem.

#3

Hi

Sorry I mis-spoke it is a treeGrid that I am using not a tree view.

I would like to specify the icon as per the following snippet (or something similar). notice the icon and icon_color keywords. Can this be done (or something similar) ?
[{
“icon”: “car”,
“icon_color”: “blue”,
“deviceID”: “8500154829411”,
“id”: “8500154829411”,
“tree”: “<div style=“float: left; background-color:#03ba06; height: 100%; width: 7px”> </div>1ETP8794”,
“licensePlate”: “1ETP8794”,
“jobCount”: “8”,
“jobCompletedCount”: “7”,
“driver”: “Andrew”,

"UserData": {
	"scheduleID": "513"
},
"rows": [{
	"icon_color": "darkblue",
	"id": "11234",
	"tree": "1: 185664: Miss Smiths- Booragoon (BN)",
	"reference": "185664",
	"icon": "fa-book"
},
#4

Please, try to use the following solution:
[{
id: ‘1001’,
tree: {
“value”: “row A”,
“image”: “fa-book”,
“open” : “1”
},
title: “A Time to Kill”,
name: “John Grisham”,
price: “12.99”,
status: “1”,
date: “05/01/1998”,
…

#5

Thanks for the reply.

The method myGrid.setIconset(“fontawesome”); is saying it is not a valid method.

Do I need to include a file (other than the fontawsome font files) ?

regards
Grant

#6

Hi Sematik

Any chance of some help with this please

#7

the method is included in the dhtmlxGrid sources files.
no any additional extension should be included.
docs.dhtmlx.com/api__dhtmlxgrid_seticonset.html
What version of the dhtmlxtreegrid do you have? Please, try to update it.
If the problem still occurs for you please, provide a complete demo, where the issue can be reconstructed locally.
Here you can find a tutorial about creating a complete demo:
docs.dhtmlx.com/tutorials__auxi … pport.html

#8

Hi

I have tried many combinations to get this to work - to no avail. Below is a extract of our data that we display. It works fine except that the icons do not display. Can you please show what changes need to be made to the data rows below to make it work?.

At the moment all we get is an icon with alternating ?/! characters in a circle (see attached screenshot).

There is no examples that I can find anywhere on how this should be formatted.


[{ "id": 424, "tree": { "value": "Run # 13\/12\/17", "open": "0" }, "rows": [{ "deviceID": "8500154829411", "id": "1367-8500154829411", "parent": "424", "tree": { "value": "Jobs", "image": "fa-book", "open": "0" }, "driver": "Steve", "userdata": { "scheduleID": "1367", "deviceID": "8500154829411", "class": "device_class_8500154829411" }, "class": "device_class_8500154829411 schedule_class_1367", "rows": [{ "icon_color": "darkblue", "id": "36395", "class": "job_tr_id_36395", "tree": "1: 190629: Benny's Bar & Cafetos: 15", "parent": "1367-8500154829411", "icon": "fa-check" }, { "icon_color": "darkblue", "id": "36396", "class": "job_tr_id_36396", "tree": "2: 190642: Clancy's City Beach Kitchentos: 4", "parent": "1367-8500154829411", "icon": "fa-check" }] }] }]

#9

Could you please, open ticket at support.dhtmlx.com and provide a complete demo, where the problem can be reconstructed. So I can check it and modify if it’s needed.
Here you can find a tutorial about creating a complete demo:
docs.dhtmlx.com/tutorials__auxi … pport.html

#10

I have solved the issue. The correct format, for the benefit of others trying to solve this is below.
Note this is for real JSON not the dhtmlx hacked version.

See the Tree object. And the icon name is just the basic name of the Icon. DHTMLX assumes that all the icons are prefixed with fa-.
Note also that DHTMLX is compatible with font awesome 4.x not v5.

[{ "id": 425, "tree": { "value": "titleA", "icon": "th-list", "open": "0" }, "rows": [{ "parent": "425", "tree": { "value": "My Job 1", "icon": "truck", "open": "0" }, "id": "1371-8500154829429", "driver": "Steve", "userdata": { "scheduleID": "1371", "deviceID": "8500154829429" }, "rows": [{ "id": "36548", "class": "job_tr_id_36548", "tree": { "icon": "truck", "value": "Stones Ltd" }, "jobOrder": 1, "parent": "1371-8500154829429", "windowArriveEnd": "2017-12-14 14:00", "scheduleDate": "2017-12-14", "driverName": "Steve", "displayColor": "#ab2f03", "reference": "116997" }] ]} ]

1 Like
#11

How can we apply color for icons in JSON in treeGridView?

#12

For the common JSON format, please, try to use the following form:

[{
	"id": "1001",
	"tree": { // this is your "tree" column
		"value": "row A",
		"icon": "folder-o"
	},
	"title": "A Time to Kill",
	"name": "John Grisham",
	"price": "12.99",
	"status": "1",
	"date": "05/01/1998",
//...
}]

For the dhtmlx json format you need to use the following form:

{
rows:[
    { id:'1001', 
     data:[
      {"value":"row A","icon": "folder-o"}, //your "tree" column
      "A Time to Kill",
      "John Grisham",
      "12.99",
      "1",
      "05/01/1998"]}
}