[hurricaneParticipant]

Sorry for not being clear in my question. Since you agree that there are changes to the zIndex in core libraries, My question was why I am not finding this mention anywhere in the documents ?

This is leading to the confusion. After having new version of jqx , it has started breaking up in my application all over. And when I was referring the api documents reference it was completely indicating that default value should be something else then what got changed.

I hope I was able to put all of the things together.

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.

[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]

Question asked in the previous post

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

[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]

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

[hurricaneParticipant]

Thanks Stanislav for your inputs. I got a situation where some of my data coming from database and rest of them I needed to copy it from excel or somewhere else. So far, I have used only single type of source binding to the grid. Not mix of (excel & database). Let me know if I am overlooking any of the examples here.

If you don’t mind me asking , Do you have any plans of considering these issues for upcoming releases ?

Regards.

[hurricaneParticipant]

Hi Stanislav,

Also, I would like to register on more issue happening with the cut/paste functionality.

Steps I have followed :
1. Opened : http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/
2. From left side option selected Default functionality
3. Do copy the description written on the top of the grid. for example copy this to the clipboard (ctrl+c),
This demo illustrates the basic functionality of the Grid plugin. The jQWidgets Grid plugin offers rich support for interacting with data, including paging, grouping and sorting.

4. Now, Select first cell from the first column (i.e Chai (Product)). Do ctrl +x (cut).
5. select Chang from the second row and do ctrl+v (paste).
6. I am seeing that instead of result from 4th point , it is copying data of 3rd point.

Please update if you need more information.

Regards.

[hurricaneParticipant]

Hi Stanislav,

I see that solution work only when I have to copy data to specific cell in editmode. Whereas, I am having a situation where data is getting copied from excel to the grid. It seems I may not be able to fit the solution which you are mentioning for this use case.

Let me know if you have any other thoughts.

Regards.

[hurricaneParticipant]

Hi Stanislav, Peter

We are experiencing problem with this issue more frequently since we are dealing with copy/paste functionality more often with the grids. Can you please update if there is any scope of this issue being considered for upcoming jqx release? if not soon, We would appreciate your guidance with providing temporary fix to this.

Regards.

[hurricaneParticipant]

Hi Peter,

Sorry for the misunderstanding here! I am still experiencing this problem on the given demo list. I am using version 4.4.0 for my development , but the demo similar problem I am seeing on given demo list examples. I hope demo list examples are referring to v4.5.3.

Steps I have followed :
1. Opened : http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/
2. From left side option selected Default functionality
3. I am doing copy/paste on demo grid.

Let me know if you need any additional details.

Regards.

Regards

[hurricaneParticipant]

++Adding exception details :

TypeError: that.source.hierarchy is undefined

[hurricaneParticipant]

Hi Peter,

Thanks for your quick response.

Do you mean that updateBoundData is not even needed for this type of implementation? If so then, As mentioned in the second scenario where I have only used clear method to reset the grid which is loading data back using the existing data source (ie. ajax associated for expandedrecords in virtual mode).But once data is loaded like that, I was performing sorting on some of the columns which was resulting into an exception of data binding.

Please suggest if there is a way to reset the grid in virtual mode for parent records.

Regards.

[hurricaneParticipant]

Hi Peter,

I looked at the example given above. I am also having the similar implementation for the grid in addition to it I have used the 2 events as described in my previous post. Also, My data binding is of type JSON not Array (hope this is not making any diff). To confirm, yes, I have used a single call to addrow to add all of the rows in one go.

My json object is consist of 19 properties.

var commit = $("#jqxGrid").jqxGrid('addrow', null, datarows); //datarows - will have the list of rows to add

By commenting out the code for 2 events ( cellclassname & cellsrenderer) , I could see some improvements in performance. But, As stated by you, It is no where coming to 210ms for 1000+ rows.

I would like to know your thoughts on this.

Regards.

[hurricaneParticipant]

Hi Peter,

Thanks for the reply. I agree on your comments that custom logic might have affected the performance. But that too a one liner logic applying css to columns based on the value defined . Here is the code for cellclassname : highlightFirstName ,

var highlightFirstName =  function (row, column, value, data) {
	if(data[column]!=null && column == 'firstname' && data[column] == 'Peter')
	{
                return "highlightClass";
	}
} 

cellsrenderer : checkvalidValues 
var _checkvalidValues = function (index, datafield, value, defaultvalue, column, rowdata) {
	if(rowdata[datafield]!=null && datafield == 'zip')
	{
		if(jQuery.inArray(rowdata[datafield],validziplist) ==-1)
		{
			return "<div style='margin: 6px; color:red; font-weight: bold;'/>"+rowdata[datafield] +"</div>";
		}
	}
}

I also would like to highlight my observation for different browser I have used to see this performance diff.

chrome : Version 56.0.2924.87
firefox :51.0.1 (32-bit)

stats for row addition :

No of rows 23 | 46 | 92 | 184 | 368 | 736 | 1472 | 2944
chrome (ms) 191.827 | 182.914 | 211.945 | 300.316 | 629.13 | 1950.169 | 7434.451 | 25042.355

firefox (ms) 335.13 | 338.44 | 433.95 | 952.71 | 3219.47 | 11945.91 | 46510.31 | 190485.82

I hope this information is helpful for you to check the performance with 1000+ rows .

[Author]

Posts