Showing sparkine in tree jqgrid

Question

I need to show a line graph inside a jqgrid. So, I come across this question

Here in this question, it is shown how easily we can show sparkline graph in jqgrid cell. I used the same thing and it worked but the problem is mine is a tree grid. So, here only parent node are populating not the child nodes.

This is my code

 loadComplete: function () {
                var ts = this;
                if (ts.p.reccount === 0) {
                    $(this).hide();
                    emptyMsgDiv.show();
                } else {
                    $(this).show();
                    emptyMsgDiv.hide();
                }
                var index = getColumnIndexByName('col_chart');
                $('tr.jqgrow td:nth-child('+(index+1)+')').each(function(index, value) {
                var ar;
                    try {
                        var chartData = [];
                        var height;
                        height = $(this.innerHTML.split(','));
                        for(i=0;i<height.length;i++){
                            chartData.push(height[i]);

                        }

                        ar = chartData;
                        var largest = Math.max.apply(Math, ar);
                        if (ar && ar.length>0) {
                            console.log(ar);
                        $(this).sparkline(ar,{
                        type: 'line',

                        tooltipFormat: "{{y:value}}",});
                        }
                    } catch(e) { alert (true);}
                });
            }

I checked by using console everything is working fine as expected only chart is not shown.

Can anyone please tell me what is wrong here?

Oleg · Accepted Answer · 2017-05-19T13:16:11.350

1

I suppose that sparkline don't work on hidden nodes. I'd suggest you to call sparkline inside of treeGridAfterExpandRow callback or jqGridTreeGridAfterExpandNode event handler. Another possible problem could exist if you loads the nodes dynamically from the server. In the case you should include call of sparkline inside of loadComplete callback or jqGridLoadComplete event.

UPDATED: The modification of your demo http://jsfiddle.net/adishri22/98yxbjgc/ could be the following: https://jsfiddle.net/OlegKi/98yxbjgc/3/

I used the following code of treeGridAfterExpandRow:

treeGridAfterExpandRow: function (options) {
    var $self = $(this), p = $self.jqGrid("getGridParam"),
        iCol = p.iColByName.sl, item, i, tr, $td, rowid,
        idName = p.localReader.id,
        children = $self.jqGrid("getNodeChildren", options.item);
    for (i = 0; i < children.length; i++) {
        item = children[i];
        rowid = item[idName];
        tr = $self.jqGrid("getGridRowById", rowid);
        $td = $.jgrid.getDataFieldOfCell.call(this, tr, iCol);
        try {
            $td.sparkline($.parseJSON(item.sl));
        } catch(e) {}
    }
}

edited May 19 '17 at 13:16

answered May 19 '17 at 07:24

Oleg

220,925
34
403
798

sorry for not adding the whole code at once. I am calling it inside loadComplete only. I added the new code as well. I will check on the other solution you provide – shv22 May 19 '17 at 07:32
@shv22: The problem can't be analysed based on the code fragment. It's unclear, whether the same problem exist with TreeGrid and local data or you load nodes on demand. It's unclear which version of jqGrid you use, which jQuery, jQuery UI/Bootstrap, sparkline, ... It's better you prepare the demo, which reproduces the problem. One could see the problem, debug and analyse it. – Oleg May 19 '17 at 07:39
Hi I created a demo http://jsfiddle.net/adishri22/98yxbjgc/ here with same problem I am having – shv22 May 19 '17 at 12:08
@shv22: Small remark. I suppose that you don't know, that the searching engine (even Google) uses voting counter in ordering of searching results. It means that it's difficult to find the information by searching if the answer/question has low voting. You have right to vote about 30 answers **per day** (see [here](https://meta.stackexchange.com/a/5213/147495)), but during 1 year and 9 months you voted only 27 times. Please use your right and **vote any information on stackoverflow, which you find helpful**, if you want help other people to find the information. – Oleg May 19 '17 at 15:44
from now onwards I will follow this – shv22 May 19 '17 at 15:47

Showing sparkine in tree jqgrid

1 Answers1

Linked