jqxgrid problem with grouping on v5.x.x

[hurricaneParticipant]

Hi ,

I have upgraded my current jqx v4.4.0 to v5.1.0. After upgrading this , I noticed that grid has stopped working.

Problem: I have a grid1 defined with two columns say( name & code). I am grouping this grid with code column. Also , This grid got drag n drop event bound with dropTarget set to grid2.

Input data :
Code | name
ABC John
ABC Harry
XYZ Nick

Grid1 looks like on UI:
> Code :ABC
> Code :XYZ

Now, Problem here comes when I take my mouse pointer(i.e drag icon) over pinned column which is arrow icon (>) and try to click on that arrow icon to expand groups and nothing happens. Whereas, In the v4.4.0 , It does expand group for me.

Rendered event defined on the grid1 :

  rendered: function (type) {
              if (type == "full") {
                  // select all grid cells.
                  var gridCells = $('#grid1').find('.jqx-grid-cell');
                   if ($('#grid1').jqxGrid('groups').length > 0) {
                    	gridCells = $('#grid1').find('.jqx-grid-group-cell');
                  } 
                  // initialize the jqxDragDrop plug-in. Set its drop target to the second Grid.
              gridCells.jqxDragDrop({ appendTo: 'body',  dragZIndex: 99999,
                  dropAction: 'none',
                  initFeedback: function (feedback) {
                      var rowsindexes = $("#grid1").jqxGrid('getselectedrowindexes');
                      feedback.height(25);
                      feedback.width( $("#grid1").width());
                      feedback.css('background', '#D8EFFF');
                  },
                  dropTarget: $("#grid2"), revert: false
              });
....dragstart/stop and other events to support drag got defined here after.

Since, It did not worked for v5.1.0 , I tried rollback it to the previous latest major version one by one and came to know it did not work for v5.1.0 & 5.0.0. At last, I found it working on v4.5.4 in the same way as it was working for me in v4.4.0

I couldn’t figure out what it is causing the problem here. Same code is working fine on the lower version and not on the higher versions. We are planning to upgrade our jqx version in order to resolve few of the existing issues which got resolved in the higher releases. Kindly guide how to deal with the above problem in order to work with latest version.

Regards.

[hurricaneParticipant]

Continuing earlier post, Providing a completed example to understand the problem better.

Problem description: Unable to expand grouped rows.

 var data = generatedata(500);
 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: 'price',
         type: 'number'
     }],
     datatype: "array"
 };

 var adapter = new $.jqx.dataAdapter(source);
 $("#grid1").jqxGrid({
     width: 500,
     theme: 'energyblue',
     source: adapter,
     groupable: true,
     sortable: true,
     selectionmode: 'singlerow',
     columns: [{
         text: 'First Name',
         datafield: 'firstname',
         columngroup: 'Name',
         width: 90
     }, {
         text: 'Last Name',
         columngroup: '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'
     }],
     
      rendered: function(type)
                {
                    
                    var gridCells = $('#grid1').find('.jqx-grid-cell');
                   
                    
                    if ($('#grid1').jqxGrid('groups').length > 0) {
                    	gridCells = $('#grid1').find('.jqx-grid-group-cell');
                  } 
                    gridCells.jqxDragDrop({
                        appendTo: 'body',  dragZIndex: 99999,
                        dropAction: 'none',
                        initFeedback: function (feedback) {
                            feedback.height(25);
                        },
                        dropTarget: $('#grid2'), revert: true
                    });
                    gridCells.off('dragStart');
                    gridCells.off('dragEnd');
                    gridCells.off('dropTargetEnter');
                    gridCells.off('dropTargetLeave');
                    
                    gridCells.on('dropTargetEnter', function () {
                        gridCells.jqxDragDrop({ revert: false });
                    });
                    
                    gridCells.on('dropTargetLeave', function () {
                        gridCells.jqxDragDrop({ revert: true });
                    });
                   
                    gridCells.on('dragStart', function (event) {
                        var value = $(this).text();
                        var position = $.jqx.position(event.args);
                        var cell = $("#grid1").jqxGrid('getcellatposition', position.left, position.top);
                        $(this).jqxDragDrop('data', {
                            value: value
                        });
                    });
                          
                    gridCells.on('dragEnd', function (event) {
                        var value = $(this).text();
                        var position = $.jqx.position(event.args);
                        var cell = $("#grid2").jqxGrid('getcellatposition', position.left, position.top);
                        if (cell != null) {
                            $("#grid2").jqxGrid('setcellvalue', cell.row, cell.column, value);
                        }
                    });
                }
 });

 $('#grid1').jqxGrid('addgroup', 'productname');
 $('#grid1').jqxGrid('addgroup', 'price');

 
  $("#grid2").jqxGrid(
            {
                width: 850,
                selectionmode: 'singlecell',
                autoheight: true,
                source: { totalrecords: 10, unboundmode: true, datafields:
                [
                    { name: 'firstname' },
                    { name: 'lastname' },
                    { name: 'productname' }
                ]
                },
                columns: [
                   { text: 'First Name', dataField: 'firstname', width: 300 },
                   { text: 'Last Name', dataField: 'lastname', width: 300 },
                   { text: 'Product', dataField: 'productname' }
                ]
            });

[StanislavParticipant]

Hello hurricane,

We did some testing with the example you have provided us, but we couldn’t recreate an issue.
Everything seems to be working as it should, maybe you are missing a reference to something.
Also, are you getting and errors?

Our latest version is 5.2.0, that is the version we tested your example on, maybe you can update your project and see if it works there.

Best Regards,
Stanislav

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

[hurricaneParticipant]

Hi Stanislav,

Thanks for your response! I can reproduce this issue. Providing few more steps to recreated this, Hope this will be helpful:

1. I have used an existing JSfiddle link example, http://jsfiddle.net/jqwidgets/5DcnB/
2. Defined html as :

<div id='jqxWidget'>
    <div id="grid1"></div>
    <div id="grid2"></div>
</div>

3. Defined Javascript as is from my post September 8, 2017 at 9:09 pm.

4. Then executed it through pressing Run button.

Expected Result : It should allow me to expand groups when I take my mouse cursor to the arrow icon (>).
Actual Result : It is showing me drag cursor when we take mouse over the arrow icon (>). But do nothing when we click. Meaning, I am not able to exapand any of the groups.

I am thinking the example which I referred was referring to the jqx latest version v5.2.0 . Hence, It is a problem with the latest version too. I can only upgrade version from v4.4.0 to v4.5.4.

Please let me know if this steps are not helping. I will try to put in more information if needed.

Regards.

[hurricaneParticipant]

Question asked in the previous post

Q. Also, are you getting and errors?
- I did not find any errors on console.

[StanislavParticipant]

Hello hurricane,

We found that this is indeed an issue. Thank you for reporting it.

As for your second question, No I didn’t get any errors.

Best Regards,
Stanislav

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

[hurricaneParticipant]

Hi Stanislav,

Thanks for confirming the issue. Any plans of having this patched to the upcoming release?
We would want to upgrade our jqx version to the latest soon. As of now, I am experiencing this problem with v5.x.x. I could only upgrade it to v4.5.4

Regards.

[hurricaneParticipant]

Hi Stanislav,

Do you recommend me to upgrade with v5.3.2 ? I am facing few of the issues with grid using on v4.5.4 which are seems like resolved in the higher versions. If you can confirm, problem mentioned in the thread is also addressed with it , I can remove roadblock for my system. Please suggest, I am running system in production.
*I am following roadmap regularly but didn’t find any mention for this issue yet.

[StanislavParticipant]

Hello hurricane,

Yes, I did some testing and everything seems to be working correctly.
You can drag&drop to the grid as well as click on the arrows and expand the groups.

Best Regards,
Stanislav

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

[Author]

Posts