I am working on a grid with virtualization and we need to be able to drag and drop rows from one place to another in the grid. We've enabled this by using jQueryUI Sortable and the rows can be moved. We first used continuous virtualization and when moving a row really far, the row gets dropped as the new set of data is rendered. I thought to try the fixed virtualization since the rows don't rerender, as per my understanding of the API, however when I switched to fixed it breaks everything else with my grid. In Firefox, the other features I have set for the grid no longer work and rows cannot be dragged. In IE8 (which is a target for the app we will be making) it throws the error "SCRIPT5007: Unable to get property '0' of undefined or null reference" at infragistics.lob.js, Line: 108, Column: 21741.
When I look in the code it shows "this._virtualDom[i][j].innerHTML=c[j+this._startColIndex].innerHTML" as being the problem. Drilling down into the object, "this" is referring to the grid. This is inside your "_renderVirtualRecordsFixed:function()". It appears that _virtualDom is a two dimensional array of dom elements. When I examine this array in the console it has a length of 0.
What is the code trying to do and how can i resolve this error. Any help would be greatly appreciated.
Hi Miguel Pinales,
Thank you for posting on our forums.
Please note, the igGrid doesn't natively have the available for dragging and dropping rows. If you wish for this feature to be available in a future version of our product, please submit a new Product Idea using https://www.infragistics.com/community/ideas/i/ignite-ui-for-javascript.
I don't believe virtualization is going to work when implementing a drag/drop feature with virtualization because if the row you are currently dragging becomes out of view, the grid no longer has the row in memory. Remember, the reason for virtualization is to increase performance by rendering only the rows in view (fixed) or a pre-defined number of rows (continuous). If you still want to use the igGrid's virtualization feature, I recommend storing the selected row in an external collection and placing it back into the grid (similar to a cut/paste).
The documentation for Virualization can be found here:https://www.igniteui.com/help/14.1/iggrid-virtualization-overview
Please let me know if you have any questions regarding this matter.
Jose,
Thank you for your response. I've thought about the cut and past option before, but that seems a bit tedious to the user. I've also thought about having the program do the cut and paste in the background while the user is dragging. I will look into these.
One other issue is that i have used Knockout to data bind the grid. When dragging and dropping the data, the view model responds appropriately and the information gets reordered in the observable array. However, the data is not changing on the UI. If I move a row and scroll away when I scroll back the rows are in the same order. I understand that each row has a class called data-row-idx that defines the order on the DOM. I have directly changed this index and the information still stays in the same order. I have tried copying the underlying data array from the view model, erasing it, copying it back, and the grid still has the information from the original binding. How can I actually get the grid to reflect these changes? I've been able to get a grid to display changes from a textbox live, or if I edit information or even adding a new record. Why can't the grid show changes in order? Is my only option to destroy the grid and make an entirely new one?
Again, any help would be greatly appreciated.