[ae50042Participant]

Hi,
I solved using a different strategy: I added another column called ‘icon’ as first (before I had just ‘label’ column and I used the settings icons:true in the jqxTreeGrid creation):

var iconsrenderer = function (rowKey, dataField, value, data) {
    if(data.level == 2)
    return '<img style="margin-left:-20px" width="14" height="14" src="' + data.icon + '"/>';
    else
    return '';
}

var columns_list = [
       { text: '', dataField: 'icon', width:'70', cellsrenderer: iconsrenderer },
       { text: labels["DSP_COL_NOME"], dataField: 'label', width:'auto'}
    ];
jQuery("#jqxTreeGrid").jqxTreeGrid({
        width: '100%',
        height:'500px',
        columns: columns_list,
        altRows: true,
        autoRowHeight: false,
        source : source,
        showHeader: false,
        editable: true,
        selectionMode: 'singlerow',
        icons: function (rowKey, rowData) {
            if (rowData.level == 0 || rowData.level == 1) {
              return rowData.icon;
            }
          }
});

The problems maybe rely on the fact the with just the ‘label’ column, and using icons setting, the icon didn’t really exist, so nothing was produced as output.

So, now that the ‘icon’ really exist as column, if I invoke the method setCellValue, it update it correctly.

Regards,
Giorgio

[ae50042Participant]

Hi Hristo,

And what about update to update the icon using the method updateRow when the grid has icons: true?
I have invoked the method updateRow and setCellValue changing the image but nothing happens.
This maybe rely on the fact that there is no column icon in the columns attribute, because for the label field it works correctly.
Is there any workaround?

Regards,
Giorgio.

[ae50042Participant]

Hi Hirsto,
First of all, the error:

Uncaught RangeError: Maximum call stack size exceeded
    at V (jqx-all.js:7)
    at V (jqx-all.js:7)
    at V (jqx-all.js:7)
    at V (jqx-all.js:7)
    at V (jqx-all.js:7)
    at V (jqx-all.js:7)
    at V (jqx-all.js:7)
    at V (jqx-all.js:7)
    at V (jqx-all.js:7)
    at V (jqx-all.js:7)

is basically related to the id field: if it contains special characters like ‘_’ or ‘-‘ it generate the error above.
Maybe it is a bug, because in the documentation I don’t have read nothing about this limitation.

In order for you to understand maybe what I have to achieve, is better if I share my code. As I told you I need in virtualmode, to update from server just the leaf of level 2, that are basically devices, so I need to keep track when a devices is connected or not and change icon accordingly. Because at the moment, I don’t really know how to use the dataAdapter for achieve that, I keep track of the row_expanded of level 1 and the devices_to_update of level 2. I want to invoke the updateRow method just when there are changes of the status, but here I found another problem trying to update the icon: when I invoke the updateRow with the changed icon, nothing happen, but the code is correct because if I try to update label it works. I tried also to update manually the icon updating the DOM, but is a very poor technique.
Below my code:

var row_expanded = new Set();
var devices_to_update = new Map();

function main_function(){

    var source = {
           datatype: "json",
           datafields:[
                 { name: 'id'},
                 { name: 'node_id'},
                 { name: 'parentid' },
                 { name: 'label' },
                 { name: 'icon'}
           ],
           hierarchy:{
               keyDataField: { name: 'node_id' },
               parentDataField: { name: 'parentid' }
           },
           id: 'node_id',
           url: url_php,
           root: 'devices'
        };
    
    var dataAdapter = new jQuery.jqx.dataAdapter(source);

    jQuery("#jqxTreeGrid").jqxTreeGrid({
        width: '100%',
        height:'500px',
        columns: [{ text: labels["DSP_COL_NOME"], dataField: 'label', width:'auto'}],
        altRows: true,
        autoRowHeight: false,
        showHeader: false,
        editable: true,
        selectionMode: 'singlerow',
        icons:true,
        editSettings: { saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: true, editOnDoubleClick: true, editOnF2: false },
        virtualModeCreateRecords: function (expandedRecord, done) {
            dataAdapter._options = {
                formatData: function (data) {
                    jQuery.extend(data,
                    {
                        type: "LIST",
                        id_cliente: id_cliente,
                        loggedRole: jQuery("#loggedRole").val(),
                        id_user: jQuery("#id").val(),
                        level: (expandedRecord == null) ? -1 : expandedRecord.level,
                        id_user_selected: (expandedRecord != null && expandedRecord.level == 1) ? expandedRecord.id : null
                    });
                    return data;
                },
                loadComplete: function()
                {
                    if(expandedRecord != null && expandedRecord.level == 1 ){
                        for (let dev of dataAdapter.records) devices_to_update.set(dev.node_id,((({ id, node_id, label, parentid, icon  }) => ({ id, node_id, label, parentid, icon }))(dev)));
                    }
                    done(dataAdapter.records);
                },
                loadError: function (xhr, status, error) {
                    done(false);
                    throw new Error(url_php + error.toString());
                }
            }
            dataAdapter.dataBind();
            if (expandedRecord != null && expandedRecord.level == 1)
                row_expanded.add(expandedRecord.node_id);
        },
        virtualModeRecordCreating: function (record) {
            if (record.level == 2) {
                record.leaf = true;
            }
            else{
                jQuery("#jqxTreeGrid").jqxTreeGrid('lockRow', record.node_id);
            }
        }
    });

    jQuery("#jqxTreeGrid").on('rowCollapse', function (event){
        var key = event.args.key;
        var row = event.args.row;
        row_expanded.delete(key);
        if (row.level == 1){
            for(let r of row.records) devices_to_update.delete(r.node_id)
        }
    });

    jQuery("#jqxTreeGrid").on('rowExpand', function (event){
        var key = event.args.key;
        var row = event.args.row;
        row_expanded.add(key);
        if(row.level == 1){
            for (let dev of row.records) devices_to_update.set(dev.node_id,((({id, node_id, label, parentid, icon}) => ({id, node_id, label, parentid, icon}))(dev)));
        }
    });

    window.setInterval(getListTable, 10000);

};

function getListTable()
{
    jQuery.get(url_php,
    {
        "type":"UPDATED",
        "id_user_selected":"('" + Array.from(row_expanded).join("', '") + "')",
        "id_cliente":jQuery("#id_cliente").val()
    },
    function(data,status){
        var devices = JSON.parse(data).devices;
         for (dev of devices) {
            if(devices_to_update.has(dev.node_id) && JSON.stringify(dev) !== JSON.stringify(devices_to_update.get(dev.node_id))) {
                devices_to_update.set(dev.node_id, dev);
                jQuery('#jqxTreeGrid').jqxTreeGrid('updateRow', dev.node_id, dev);
            }
        }
    })
};

Please, help me to understand what I should have to do for update just the expanded rows every 10 sec, because I really can’t figure out to do that. Should I use the same dataAdapter? If so, how? How can I handle duplicate coming from server?
I saw the post you share me, but seems very different for what I need to do, it talks about inline editing, so updating coming from webpage to server, but this is the opposite: every 10 sec the server give rows that already exist and that can maybe I need to update.

Regards,
Giorgio.

[ae50042Participant]

Hi Hirsto, just for your understanding, the code produced is similar to the :
http://jsfiddle.net/jqwidgets/j82VQ/

I have a dataAdapter defined into the method virtualModeCreateRecords.
Now if I want to refresh from server every 10 seconds only expanded row, should I use the same dataAdapter with updated functions like formatData, etc in order to parametrize the query parameters to pass to the server?
If I call dataBind and the records returned already exists it will complains for double Error ID right?

How can I accomplish just the refresh of the expanded rows?

Regards,
Giorgio.

[ae50042Participant]

Hi Peter,

I’m trying to update my jqxtreegrid using virtualmode. Basically the code I’ve done is similar to:
http://jsfiddle.net/jqwidgets/j82VQ/

My hierarchy level is 2, but I can’t no realize how can I implement the solution mentioned before:

If you want to refresh data, use the dataAdapter of each level which you load and call its dataBind method or use the updateRow, addRow, removeRow methods of jqxTreeGrid.

How can I reuse same dataAdapters if the parameters I need to pass are different(for example query parameters to pass to the server)?
The dataAdapter.bind when called, could generate duplicate ID Errors or automatically update the rows returned from the call?
Please, if you can show a modified code in which you explain how to accomplish that, will be great.

Regards,
Giorgio

[ae50042Participant]

Hi Hirsto,

I implemented the jqxtreegrid in virtualmode as you suggest me.
Now for requirement, I need to update date every 10 seconds, actually I need to update just the expanded rows (I have a hierarchy of maximum two levels)
How can I do that? Please show me an example if you can.

Regards,
Giorgio

[ae50042Participant]

Hi Hristo,

Thanks for your reply. I’m a bit confused when you mentioned the one time initialization and the main function, could you show me how to modify my code in order to adhere to the best practices you told above?

Thanks very much,
Giorgio.

[ae50042Participant]

For the sake of completeness, I post also the output generated from AJAX call:

{
  "devices": [
    {
      "id": "1003",
      "label": "Technodal",
      "parentid": -1,
      "icon": "../../images/inthegra/blue_user.png"
    },
    {
      "id": "108",
      "label": "Giuseppe Manzulli",
      "parentid": "1003",
      "icon": "../../images/inthegra/grey_user.png"
    },
    {
      "id": "113",
      "label": "Giovanni Gabriele",
      "parentid": "1003",
      "icon": "../../images/inthegra/grey_user.png"
    },
    {
      "id": "108_12",
      "label": "s15_003",
      "parentid": "108",
      "icon": "../../images/inthegra/connesso_OK_1.gif"
    },
    {
      "id": "108_51",
      "label": "s15_040",
      "parentid": "108",
      "icon": "../../images/inthegra/connesso_OK_1.gif"
    },
    {
      "id": "108_52",
      "label": "s15_041",
      "parentid": "108",
      "icon": "../../images/inthegra/connesso_KO_1.gif"
    },
    {
      "id": "108_62",
      "label": "s15_050",
      "parentid": "108",
      "icon": "../../images/inthegra/connesso_KO_1.gif"
    },
    {
      "id": "108_63",
      "label": "s15_051",
      "parentid": "108",
      "icon": "../../images/inthegra/connesso_OK_1.gif"
    },
    {
      "id": "108_67",
      "label": "s15_055",
      "parentid": "108",
      "icon": "../../images/inthegra/connesso_OK_1.gif"
    },
    {
      "id": "108_68",
      "label": "s15_056",
      "parentid": "108",
      "icon": "../../images/inthegra/connesso_OK_1.gif"
    },
    {
      "id": "108_69",
      "label": "s15_057",
      "parentid": "108",
      "icon": "../../images/inthegra/connesso_OK_1.gif"
    },
    {
      "id": "113_12",
      "label": "s15_003",
      "parentid": "113",
      "icon": "../../images/inthegra/connesso_OK_1.gif"
    },
    {
      "id": "113_51",
      "label": "s15_040",
      "parentid": "113",
      "icon": "../../images/inthegra/connesso_OK_1.gif"
    },
    {
      "id": "113_52",
      "label": "s15_041",
      "parentid": "113",
      "icon": "../../images/inthegra/connesso_KO_1.gif"
    },
    {
      "id": "113_62",
      "label": "s15_050",
      "parentid": "113",
      "icon": "../../images/inthegra/connesso_KO_1.gif"
    },
    {
      "id": "113_63",
      "label": "s15_051",
      "parentid": "113",
      "icon": "../../images/inthegra/connesso_OK_1.gif"
    },
    {
      "id": "113_67",
      "label": "s15_055",
      "parentid": "113",
      "icon": "../../images/inthegra/connesso_OK_1.gif"
    },
    {
      "id": "113_68",
      "label": "s15_056",
      "parentid": "113",
      "icon": "../../images/inthegra/connesso_OK_1.gif"
    },
    {
      "id": "113_69",
      "label": "s15_057",
      "parentid": "113",
      "icon": "../../images/inthegra/connesso_OK_1.gif"
    }
  ]
}

What I change between AJAX calls, is simply a different icon for an item, but for the rest the json returned from every request is the same, could be that the problem?
If I don’t return the leafs of level 2 from AJAX calls, when I invoke updateBoundData, the call is ok, but the tree collapse totally. Can we prevent this behaviour?

Regards,
Giorgio.

[ae50042Participant]

Thanks very much Hirsto,

I found a solution for renaming a node using jqxTree component.
I have few more questions:

• basically as per requirement my tree is very long and is refreshed every 10sec using ajax call.
  I used selectItem for selecting the same node before ajax call and it works fine.
  The problem arise when I scroll the tree, because after ajax call it scroll at the top.
  I tried also to use ensureVisible property, but there is still a visual glitch when the node is not visible
  I tried using scrollTop property, but nothing to do.
  Is there a way to track scroll position and use later for restore the same div position?
• The visual glitch problem described above, could be resolved using jxqTreeGrid?
• Should be possibile to stylish jqxTreeGrid like a jqxTree? for example removing borders of the single column, something
  like that?

Thanks very much for your help.
Giorgio.

[ae50042Participant]

Thanks for your replay Hristov,
Actually I don’t want any animati in, I would like just to see whenever the bullet or gauce chart is showed, always the Value pointer and not to see It just with a tooltip.

It is a static Value, I mean: whenever the page is loaded, will be ever the same and the chart Will be displayed in a readonly mode.

I want this because on My page i have a lot of linear gauge( or bullet) so i would like to give client immediately both the value and range.

[ae50042Participant]

Hi Hristo,

Maybe I will go to use BulletChart, but it will be possible with that,
to show always the value instead of waiting for tooltip event?

Best Regards,
Giorgio.

[ae50042Participant]

Hi Hristo,
Thanks, that’s exactly what I’m looking for!!

Best Regards,
Giorgio.

[ae50042Participant]

Hi ok, if I don’t put width at the last columns, the grid is not layout responsive:
When I make the browser window smaller, I will able to see just few px of the last column also if I try to scroll horizontal.

Ho can I fix that?

Best Regards,
Giorgio.

[ae50042Participant]

Hi Christopher,

Sorry, sad mistake!:( I’m using jqxGrid and I just googled the wrong API.

Thanks

[ae50042Participant]

Hi Peter,
I understand now!
Thanks for your quick replay, the problem in defining the grid once is that I can’t know before phpColumns, so first I get phpColumns and then I generate the grid. Could you provide just a quick excperpt of my code reworked please?

Best regards,
Giorgio.

[Author]

Posts