Grid row gets moved and then hidden after adding

[dance2dieParticipant]

I am using jqx-grid angular control for grid with ASP.NET MVC4 as backend.

When I add a new row after getting a new jQuery instance of grid and call “addrow”, previously added rows get moved up in grid and won’t show up.
Here is how it looks before and after.

I am using jqWidgets ver. 4.1.2 released on 2016-04-28

Here are the codes in question.

HTML page
When I press “Add Result” button below, json should be moved from “jqx-instance=’jqxGrid0′” grid to “jqx-instance=’jqxGrid1′” grid.

<div class=”col-sm-7 result”>
<div class=”panel panel-default”>
<div class=”panel-body searchResultPanel”>
<fieldset>
<legend>
Search Result
<span class=”glyphicon glyphicon-th” aria-hidden=”true”></span>
</legend>

<jqx-grid jqx-on-bindingcomplete=”bindingComplete()”
jqx-instance=”jqxGrid0″
jqx-create=”createWidget”
jqx-settings=”searchResultGridSettings”>
</jqx-grid>

<button id=”addToFinalResultButton” jqx-button ng-click=”addToFinalResultClick()”>
Add Results
<span class=”glyphicon glyphicon-arrow-down” aria-hidden=”true”></span>
</button>
</fieldset>
</div>
</div>
</div>

<div class=”container-fluid”>
<div class=”row”>
<jqx-grid jqx-on-bindingcomplete=”bindingComplete()”
jqx-instance=”jqxGrid1″
jqx-create=”createWidget”
jqx-settings=”finalGridSettings”>
</jqx-grid>
</div>
</div>

Here is “addToFinalResultClick” event handler and all functions used in it.
“addRowsToGrid() is where adding rows occurs.”

$scope.addToFinalResultClick = function () {
// http://www.jqwidgets.com/create-remove-or-update-many-grid-rows/
var resultGrid = getResultGrid();
var finalGrid = getFinalGrid();

try {
resultGrid.jqxGrid(“beginupdate”);
finalGrid.jqxGrid(“beginupdate”);

resultGrid.jqxGrid(‘showloadelement’);
finalGrid.jqxGrid(‘showloadelement’);

// Add rows to Final grid.
var selectedRows = getSelectedRows(resultGrid);
addRowsToGrid(finalGrid, selectedRows);

// Remove moved data from search grid to the final grid.
var selectedRowIds = getSelectedRowIds(resultGrid);
deleteRowsFromGrid(resultGrid, selectedRowIds);

clearGridSelections(resultGrid);
}
finally {
selectAllRows(finalGrid);

finalGrid.jqxGrid(‘ensurerowvisible’, 0);

resultGrid.jqxGrid(‘hideloadelement’);
finalGrid.jqxGrid(‘hideloadelement’);

resultGrid.jqxGrid(“resumeupdate”);
finalGrid.jqxGrid(“resumeupdate”);
}
}

function getResultGrid() {
return $(“div[jqx-instance=’jqxGrid0′]”);
}

function getFinalGrid() {
return $(“div[jqx-instance=’jqxGrid1′]”);
}

function getSelectedRows(grid) {
//var grid = $(“#” + gridId);
var rowIndexes = grid.jqxGrid(‘selectedrowindexes’);
var selectedRows = new Array();

for (var i = 0; i < rowIndexes.length; i++) {
var row = grid.jqxGrid(‘getrowdata’, rowIndexes[i]);
selectedRows[selectedRows.length] = row;
}

return selectedRows;
}

function addRowsToGrid(grid, rowsToAdd) {
var rows = [];

if (angular.isArray(rowsToAdd)) {
rows = rowsToAdd;
} else {
rows.push(rowsToAdd);
}

grid.jqxGrid(“addrow”, null, rows);
}

function getSelectedRowIds(grid) {
//var grid = $(“#” + gridId);
var rowIndexes = grid.jqxGrid(‘selectedrowindexes’);
var selectedRows = [];

for (var i = 0; i < rowIndexes.length; i++) {
//var row = grid.jqxGrid(‘getrowdata’, rowIndexes[i]);
var rowId = grid.jqxGrid(‘getrowid’, rowIndexes[i]);
//selectedRows[selectedRows.length] = rowId;
selectedRows[i] = rowId;
}

return selectedRows;
}

function deleteRowsFromGrid(grid, rowIdsToDelete) {
var rowIds = [];

// If array is passed, then add each item to the rows collection
// else “rowIdsToDelete” contains just one element, so add it to the rows collection
//if (rowIdsToDelete.length) {
if ((angular.isArray(rowIdsToDelete))) {
for (var i = 0; i < rowIdsToDelete.length; i++) {
rowIds.push(rowIdsToDelete[i]);
}
} else {
rowIds.push(rowIdsToDelete);
}

grid.jqxGrid(“deleterow”, rowIds);
}

function clearGridSelections(grid) {
//var grid = $(“#” + gridId);
grid.jqxGrid(“clearselection”);
}

function selectAllRows(grid) { //, rowsToSelect) {
//if (angular.isArray(rowsToSelect)) {
// $.each(rowsToSelect, function(index, value) {
// grid.jqxGrid(‘selectrow’, value.uid);
// });
//} else {
// grid.jqxGrid(‘selectrow’, rowsToSelect.uid);
//}

grid.jqxGrid(‘selectallrows’);
};

[adminKeymaster]

Hi dance2die,

addrow expects a New JSON object. This means that adding rows using selectedRows array built like that: selectedRows[selectedRows.length] = row; is wrong. Your problem would be solved when you create New JSON object and pass it when you add rows.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[dance2dieParticipant]

Thanks Peter,
As you suggested, I “extended” the row using jQuery and passing that data fixed the issue.
http://stackoverflow.com/a/122704/4035

Now my code looks like this.

function getSelectedRows(grid) {
//var grid = $(“#” + gridId);
var rowIndexes = grid.jqxGrid(‘selectedrowindexes’);
var selectedRows = new Array();

for (var i = 0; i < rowIndexes.length; i++) {
var row = grid.jqxGrid(‘getrowdata’, rowIndexes[i]);
//selectedRows[selectedRows.length] = row;

var newRow = $.extend(true, {}, row);
selectedRows[selectedRows.length] = newRow;
}

return selectedRows;
}

[Peter StoevKeymaster]

I would better suggest to copy only the datafields i.e if you have “firstname” and “lastname” data fields, the new JSON object should be

var newrow = {};
for(var i = 0; i < myDataFields.length; i++) { var field = myDataFields[i]; newrow[field] = oldrow[field]; } It's faster and copies only the necessary things. Otherwise, the object is New, but still holds some internal members such as uid. Best Regards, Peter Stoev jQWidgets Team http://www.jqwidgets.com

[Author]

Posts