jQuery UI Widgets Forums Grid grid does not display column names if more than 30 columns

This topic contains 4 replies, has 4 voices, and was last updated by  totomo 3 years, 6 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author

  • jpm78
    Participant

    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
         });
     });
    

    Stanislav
    Participant

    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/


    totomo
    Participant

    Hi Stanislav,

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


    Hristo
    Participant

    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


    totomo
    Participant

    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/

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.