grid does not display column names if more than 30 columns

[jpm78Participant]

With V5.5.0 dynamic columns setting in grid prevent display of column names for columns after the 30th column
This worked fine with previous versions.
Here is a test case (hit the “set columns” button to see the result) :

 var data = generatedata(50);
 var source = {
     localdata: data,
     datafields: [{
         name: 'firstname',
         type: 'string'
     }, {
         name: 'lastname',
         type: 'string'
     }, {
         name: 'productname',
         type: 'string'
     }, {
         name: 'date',
         type: 'date'
     }, {
         name: 'quantity',
         type: 'number'
     }, {
         name: 'price0',
         type: 'number'
     }, {
         name: 'price1',
         type: 'number'
     }, {
         name: 'price2',
         type: 'number'
     }, {
         name: 'price3',
         type: 'number'
     }, {
         name: 'price4',
         type: 'number'
     }, {
         name: 'price5',
         type: 'number'
     }, {
         name: 'price6',
         type: 'number'
     }, {
         name: 'price7',
         type: 'number'
     }, {
         name: 'price8',
         type: 'number'
     }, {
         name: 'price9',
         type: 'number'
     }, {
         name: 'price10',
         type: 'number'
     }, {
         name: 'price11',
         type: 'number'
     }, {
         name: 'price12',
         type: 'number'
     }, {
         name: 'price13',
         type: 'number'
     }, {
         name: 'price14',
         type: 'number'
     }, {
         name: 'price15',
         type: 'number'
     }, {
         name: 'price16',
         type: 'number'
     }, {
         name: 'price17',
         type: 'number'
     }, {
         name: 'price18',
         type: 'number'
     }, {
         name: 'price19',
         type: 'number'
     }, {
         name: 'price20',
         type: 'number'
     }, {
         name: 'price21',
         type: 'number'
     }, {
         name: 'price22',
         type: 'number'
     }, {
         name: 'price23',
         type: 'number'
     }, {
         name: 'price24',
         type: 'number'
     }, {
         name: 'price25',
         type: 'number'
     }, {
         name: 'price26',
         type: 'number'
     }, {
         name: 'price27',
         type: 'number'
     }, {
         name: 'price28',
         type: 'number'
     }, {
         name: 'price29',
         type: 'number'
     }, {
         name: 'price30',
         type: 'number'
     }, {
         name: 'price31',
         type: 'number'
     }, {
         name: 'price32',
         type: 'number'
     }, {
         name: 'price33',
         type: 'number'
     }, {
         name: 'price34',
         type: 'number'
     }, {
         name: 'price35',
         type: 'number'
     }, {
         name: 'price36',
         type: 'number'
     }, {
         name: 'price37',
         type: 'number'
     }, {
         name: 'price38',
         type: 'number'
     }, {
         name: 'price39',
         type: 'number'
     }],
     datatype: "array"
 };

 var columns = [{
     text: 'First Name',
     datafield: 'firstname',
     width: 90
 }, {
     text: 'Last Name',
     datafield: 'lastname',
     width: 90
 }, {
     text: 'Product',
     datafield: 'productname',
     width: 170
 }, {
     text: 'Order Date',
     datafield: 'date',
     width: 160,
     cellsformat: 'dd-MMMM-yyyy'
 }, {
     text: 'Quantity',
     datafield: 'quantity',
     width: 80,
     cellsalign: 'right'
 }, {
     text: 'Unit Price',
     datafield: 'price',
     cellsalign: 'right',
     cellsformat: 'c2'
 }];

 var columns2 = [{
     text: 'Order Date',
     datafield: 'date',
     width: 160,
     cellsformat: 'dd-MMMM-yyyy'
 }, {
     text: 'Col2',
     datafield: 'price2',
     cellsalign: 'right',
     cellsformat: 'c2'
 }, {
     text: 'Col3',
     datafield: 'price3',
     cellsalign: 'right',
     cellsformat: 'c2'
 }, {
     text: 'Col4',
     datafield: 'price4',
     cellsalign: 'right',
     cellsformat: 'c2'
 }, {
     text: 'Col5',
     datafield: 'price5',
     cellsalign: 'right',
     cellsformat: 'c2'
 }, {
     text: 'Col6',
     datafield: 'price6',
     cellsalign: 'right',
     cellsformat: 'c2'
 }, {
     text: 'Col7',
     datafield: 'price7',
     cellsalign: 'right',
     cellsformat: 'c2'
 }, {
     text: 'Col8',
     datafield: 'price8',
     cellsalign: 'right',
     cellsformat: 'c2'
 }, {
     text: 'Col9',
     datafield: 'price9',
     cellsalign: 'right',
     cellsformat: 'c2'
 }, {
     text: 'Col10',
     datafield: 'price10',
     cellsalign: 'right',
     cellsformat: 'c2'
 }, {
     text: 'Col11',
     datafield: 'price11',
     cellsalign: 'right',
     cellsformat: 'c2'
 }, {
     text: 'Col12',
     datafield: 'price12',
     cellsalign: 'right',
     cellsformat: 'c2'
 }, {
     text: 'Col13',
     datafield: 'price13',
     cellsalign: 'right',
     cellsformat: 'c2'
 }, {
     text: 'Col14',
     datafield: 'price14',
     cellsalign: 'right',
     cellsformat: 'c2'
 }, {
     text: 'Col15',
     datafield: 'price15',
     cellsalign: 'right',
     cellsformat: 'c2'
 }, {
     text: 'Col16',
     datafield: 'price16',
     cellsalign: 'right',
     cellsformat: 'c2'
 }, {
     text: 'Col17',
     datafield: 'price17',
     cellsalign: 'right',
     cellsformat: 'c2'
 }, {
     text: 'Col18',
     datafield: 'price18',
     cellsalign: 'right',
     cellsformat: 'c2'
 }, {
     text: 'Col19',
     datafield: 'price19',
     cellsalign: 'right',
     cellsformat: 'c2'
 }, {
     text: 'Col20',
     datafield: 'price20',
     cellsalign: 'right',
     cellsformat: 'c2'
 }, {
     text: 'Col21',
     datafield: 'price21',
     cellsalign: 'right',
     cellsformat: 'c2'
 }, {
     text: 'Col22',
     datafield: 'price22',
     cellsalign: 'right',
     cellsformat: 'c2'
 }, {
     text: 'Col23',
     datafield: 'price23',
     cellsalign: 'right',
     cellsformat: 'c2'
 }, {
     text: 'Col24',
     datafield: 'price24',
     cellsalign: 'right',
     cellsformat: 'c2'
 }, {
     text: 'Col25',
     datafield: 'price25',
     cellsalign: 'right',
     cellsformat: 'c2'
 }, {
     text: 'Col26',
     datafield: 'price26',
     cellsalign: 'right',
     cellsformat: 'c2'
 }, {
     text: 'Col27',
     datafield: 'price27',
     cellsalign: 'right',
     cellsformat: 'c2'
 }, {
     text: 'Col28',
     datafield: 'price28',
     cellsalign: 'right',
     cellsformat: 'c2'
 }, {
     text: 'Col29',
     datafield: 'price29',
     cellsalign: 'right',
     cellsformat: 'c2'
 }, {
     text: 'Col30',
     datafield: 'price30',
     cellsalign: 'right',
     cellsformat: 'c2'
 }, {
     text: 'Col31',
     datafield: 'price31',
     cellsalign: 'right',
     cellsformat: 'c2'
 }, {
     text: 'Col32',
     datafield: 'price32',
     cellsalign: 'right',
     cellsformat: 'c2'
 }, {
     text: 'Col33',
     datafield: 'price33',
     cellsalign: 'right',
     cellsformat: 'c2'
 }];
 var adapter = new $.jqx.dataAdapter(source);
 $("#jqxgrid").jqxGrid({
     width: 500,
     theme: 'energyblue',
     source: adapter,
     columns: columns
 });

 $("#columnsButton").jqxButton({
     theme: 'energyblue'
 });
 $("#columnsButton").click(function () {
     $("#jqxgrid").jqxGrid({
         columns: columns2,
         width: 2000
     });
 });

[StanislavParticipant]

Hello jpm78,

Thank you for reporting this issue to us!
A fix should be out in the near future.

Best Regards,
Stanislav

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

[totomoParticipant]

Hi Stanislav,

I still meet this issue in jQWidgets v10.1.6 (2020-Oct)
Is this issue is fixed?

[HristoParticipant]

Hello totomo,

Could you clarify it?
I tested this example and it seems to work fine.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[totomoParticipant]

Hi Hristo,
Sorry I found it’s my columns settings in wrong structure, no used array.
Thanks for your response.

Otherwise, could you help solve this issue?
https://www.jqwidgets.com/community/topic/jqxpivotgrid-render-data-error/

[Author]

Posts