grid with charts in the cells

[frankburParticipant]

hi folks,

i have a problem with a jqxgrid and charts, from highcharts, in each gridcell.
everything works fine.
but, when i have larger amount of data and the grid generates a scrollbar and i use the scrollbar all of the charts are destroyed, sourcecode is empty.
does anybode know that problem?
is there a solution for that?

kindest regards, frank

[StanislavParticipant]

Hello frank,

I would suggest you to try using virtualmode, you just set it in the grid properties: virtualmode: true.

If this doesn’t help, please send us an example, a fiddle or a snippet so we can have a closer look and better understanding of the situation.

Best Regards,
Stanislav

jQWidgets Team
http://www.jqwidgets.com/

[frankburParticipant]

hi stanislav,

sorry for late answer, christmas…
virtualmode didnt work for me…
before i will go in details, is it possible in general to put barchart in gridcells and the barcharts are still alive, while scrolling the grid?
case yes: do you have an example for me?

kindest regards,
frank

[StanislavParticipant]

Hello frank,

Unfortunately, jqxGrid doesn’t have a functionality like this. You can use jqxDataTable to achieve this, here is an example of dataTable: Link.

Another user asked a similar question on the forums as well, you can take a look HERE.

Best Regards,
Stanislav

jQWidgets Team
http://www.jqwidgets.com/

[frankburParticipant]

hi stanislav,

i changed jqxgrid to jqxdatatable and it works like a charme…

THX for your help.

kindest regards, frank

[frankburParticipant]

hi stanislav,

i have a new question concerning my construct.
everything works fine since changing from grid to datatable.
but now i need the first column to be fixed, pinned.

i use a simple loop to generate the columns:

for (var i = 0; i < cols.length; i++) {
var obj = {};
obj[“text”] = cols[i].name;
obj[“datafield”] = cols[i].name;
obj[“width”] = 180;
columns.push(obj);
}

this works fine, but not pinned, then i tried this:

for (var i = 0; i < cols.length; i++) {
var obj = {};
obj[“text”] = cols[i].name;
obj[“datafield”] = cols[i].name;
obj[“width”] = 180;

if (cols[i].name == ‘Callcenter’) {
obj[“pinned”] = true;
} else {
obj[“pinned”] = false;
}

columns.push(obj);
}

now callcenter column is pinned, but all the charts are destroyed again, rendering-div is still alive in datatable, but empty…
when i pin all the columns,

for (var i = 0; i < cols.length; i++) {
var obj = {};
obj[“text”] = cols[i].name;
obj[“datafield”] = cols[i].name;
obj[“width”] = 180;
obj[“pinned”] = true;

columns.push(obj);
}

which is senseless, only for testing, it works, all the charts are visible.
i have no error on console.

i also tried a button whith click-event:

$(“#datatable”).jqxDataTable(‘setColumnProperty’, ‘Callcenter’, ‘pinned’, true);

the site gets loaded, all charts are visible, but when i press the button, first column is pinned and charts are gone…

so my question: why are the charts alive when i pin no column or all columns and when i pin one column the charts are destroyed?

kindest regards,
frank

[StanislavParticipant]

Hello frank,

jqxDataTable has a built-in property for pinned(frozen) columns, take a look at this example: Link
The first column is frozen and column reorder is enabled.

As for the question, you have probably set an option that conflicts with another one, I would suggest searching for the API of the widget before start using some other method to achieve your goal.

Best Regards,
Stanislav

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts