Develop Reference

ui-grid has duplicate rows

I don't know how this started happening but a ui-grid (project home) on my page (angular SPA) is duplicating 2 rows somehow (and I don't want it to).
Refreshing the page (Chrome) has no effect (I have devtools open, with Disable cache checked).
For reference: I am setting the grid.data to an array with 65 entities, so that count is correct, and if I remove all filters it shows all 65, but actually 67 rows shown (I took the time to count, with the interesting find that alternating rows don't necessarily keep their grey or white color as you scroll up and down).
Here's what I am seeing. If I click row 3 or 4, both are selected and 1 and 2 are unselected. I assume that they have the same generated Id. Note here that it does say that only one row is selected, but 4 are shown!
I can open the page in Firefox and log in, then go to this page which then looks right, so it is either something in Chrome or something in this instance and other users wouldn't see it.
Here is the array from the grid.data:
[{"Name":"Trainer","Desc":"","Type":"string","OptionsCount":6,"$$hashKey":"uiGrid-000W"},
{"Name":"System","Desc":"Practice","Type":"string","OptionsCount":97,"$$hashKey":"uiGrid-000Y"},
{"Name":"EMR","Desc":"Electronic","Type":"string","OptionsCount":67,"$$hashKey":"uiGrid-0010"},
{"Name":"Guideline","Desc":"Guideline","Type":"string","OptionsCount":7,"$$hashKey":"uiGrid-0012"},
{"Name":"Notes","Desc":"Notes","Type":"string","OptionsCount":4,"$$hashKey":"uiGrid-0014"},
{"Name":"Scorecard","Desc":"April 2015","Type":"string","OptionsCount":27,"$$hashKey":"uiGrid-0016"},
{"Name":"Scorecard","Desc":"July 2015 ","Type":"string","OptionsCount":27,"$$hashKey":"uiGrid-0018"},
{"Name":"Scorecard","Desc":"November 2","Type":"string","OptionsCount":27,"$$hashKey":"uiGrid-001A"},
{"Name":"Scorecard","Desc":"December 2","Type":"string","OptionsCount":27,"$$hashKey":"uiGrid-001C"},
{"Name":"Scorecard","Desc":"September ","Type":"string","OptionsCount":27,"$$hashKey":"uiGrid-001E"},
{"Name":"2012","Desc":"","Type":"money","$$hashKey":"uiGrid-001G"},
{"Name":"2014","Desc":"","Type":"money","$$hashKey":"uiGrid-001I"},
{"Name":"2015","Desc":"","Type":"money","$$hashKey":"uiGrid-001K"},
{"Name":"2016","Desc":"","Type":"money","$$hashKey":"uiGrid-001M"},
{"Name":"2017","Desc":"","Type":"money","$$hashKey":"uiGrid-001O"},
{"Name":"Specialty","Desc":"Primary","Type":"string","OptionsCount":191,"$$hashKey":"uiGrid-001Q"},
{"Name":"Specialty2","Desc":"Secondary","Type":"string","OptionsCount":191,"$$hashKey":"uiGrid-001S"},
{"Name":"Special","Desc":"Special","Type":"string","$$hashKey":"uiGrid-001U"},
{"Name":"Rooming In","Desc":"Rooming in","Type":"date","$$hashKey":"uiGrid-001W"},
{"Name":"HTN","Desc":"Hyper","Type":"date","$$hashKey":"uiGrid-001Y"},
{"Name":"Depression","Desc":"Depression","Type":"date","$$hashKey":"uiGrid-0020"},
{"Name":"Measure","Desc":"measure","Type":"date","$$hashKey":"uiGrid-0022"},
{"Name":"HCC","Desc":"HCC","Type":"date","$$hashKey":"uiGrid-0024"},
{"Name":"Data 1","Desc":"First","Type":"date","$$hashKey":"uiGrid-0026"},
{"Name":"Data 2","Desc":"Second","Type":"date","$$hashKey":"uiGrid-0028"},
{"Name":"Data 3","Desc":"Third","Type":"date","$$hashKey":"uiGrid-002A"},
{"Name":"Term Date","Desc":"Termination","Type":"date","$$hashKey":"uiGrid-002C"},
{"Name":"2015.11","Desc":"11.1.2015","Type":"float","$$hashKey":"uiGrid-002E"},
{"Name":"2016.07","Desc":"7.1.2016","Type":"float","$$hashKey":"uiGrid-002G"},
{"Name":"Status","Desc":"Practice","Type":"string","OptionsCount":3,"$$hashKey":"uiGrid-002I"},
{"Name":"Phase","Desc":"","Type":"string","OptionsCount":5,"$$hashKey":"uiGrid-002K"},
{"Name":"EMFMT","Desc":"","Type":"string","OptionsCount":2,"$$hashKey":"uiGrid-002M"},
{"Name":"LAB Data","Desc":"","Type":"string","OptionsCount":2,"$$hashKey":"uiGrid-002O"},
{"Name":"Phase #","Desc":"Performance","Type":"integer","$$hashKey":"uiGrid-002Q"},
{"Name":"Letter 1","Desc":"Performance","Type":"date","$$hashKey":"uiGrid-002S"},
{"Name":"Letter 2","Desc":"Performance","Type":"date","$$hashKey":"uiGrid-002U"},
{"Name":"Letter 3","Desc":"Performance","Type":"date","$$hashKey":"uiGrid-002W"},
{"Name":"I Term","Desc":"","Type":"date","$$hashKey":"uiGrid-002Y"},
{"Name":"CO","Desc":"CO","Type":"bit","$$hashKey":"uiGrid-0030"},
{"Name":"Chart","Desc":"Chart","Type":"string","OptionsCount":3,"$$hashKey":"uiGrid-0032"},
{"Name":"Test money","Desc":"","Type":"money","$$hashKey":"uiGrid-0034"},
{"Name":"End-testing","Desc":"","Type":"money","$$hashKey":"uiGrid-0036"},
{"Name":"test1234","Desc":"","Type":"string","OptionsCount":5,"$$hashKey":"uiGrid-0022"},
{"Name":"testAbc","Desc":"","Type":"date","$$hashKey":"uiGrid-003A"},
{"Name":"test456","Desc":"","Type":"bit","$$hashKey":"uiGrid-003C"},
{"Name":"M","Desc":"Meaningful","Type":"string","OptionsCount":2,"$$hashKey":"uiGrid-003E"},
{"Name":"test date","Desc":"","Type":"date","$$hashKey":"uiGrid-003G"},
{"Name":"Service","Desc":"","Type":"string","$$hashKey":"uiGrid-003I"},
{"Name":"R Notes","Desc":"","Type":"string","OptionsCount":17,"$$hashKey":"uiGrid-003K"},
{"Name":"Appointment","Desc":"Appointment","Type":"string","OptionsCount":3,"$$hashKey":"uiGrid-003M"},
{"Name":"Connection","Desc":"Type of Connection","Type":"string","OptionsCount":6,"$$hashKey":"uiGrid-003O"},
{"Name":"A","Desc":"","Type":"string","OptionsCount":6,"$$hashKey":"uiGrid-003Q"},
{"Name":"Billing","Desc":"B","Type":"string","OptionsCount":6,"$$hashKey":"uiGrid-003S"},
{"Name":"E Connection","Desc":"","Type":"string","$$hashKey":"uiGrid-003U"},
{"Name":"Addend","Desc":"Data Addend","Type":"string","OptionsCount":2,"$$hashKey":"uiGrid-003W"},
{"Name":"IT","Desc":"","Type":"string","OptionsCount":4,"$$hashKey":"uiGrid-003Y"},
{"Name":"Portal","Desc":"","Type":"string","OptionsCount":5,"$$hashKey":"uiGrid-0040"},
{"Name":"Follow-up ","Desc":"","Type":"string","OptionsCount":3,"$$hashKey":"uiGrid-0042"},
{"Name":"Subspecial","Desc":"","Type":"string","OptionsCount":4,"$$hashKey":"uiGrid-0044"},
{"Name":"T","Desc":"Trainerh","Type":"string","$$hashKey":"uiGrid-0046"},
{"Name":"S","Desc":"","Type":"string","OptionsCount":3,"$$hashKey":"uiGrid-0048"},
{"Name":"A","Desc":"Date","Type":"string","$$hashKey":"uiGrid-004A"},
{"Name":"Dual","Desc":"Date joint","Type":"date","$$hashKey":"uiGrid-004C"},
{"Name":"Start D","Desc":"","Type":"date","$$hashKey":"uiGrid-004E"},
{"Name":"CO Addend","Desc":"Data COA","Type":"string","OptionsCount":1,"$$hashKey":"uiGrid-004G"}]
Has anyone else experience this issue with ui-grid, and how did you resolve it?
Or can anyone explain why it is creating these extra rows, and consistently only for these 2 rows?

Ok, so here's my answer. I apologize that this wasn't all in the original question, but there was too much code for it to be helpful. I'm writing an answer to be helpful for anyone else that runs into similar issues and gets stuck debugging (as I see that sharing as the purpose of SO).
For background, a row is supposed to get selected during the page load process if the url has an Id for the row as a parameter.
In the code the data is loaded into the grid.data. Then if the url has a parameter a loop executes on grid.data to find the matching row(s). If it is found, then it would call
gridApi.grid.modifyRows(grid.data).then(action);
where the action would be something like
$timeout(function () {
// Do this after the columns and rows processors have finished and it is all rendered.
selectRows.forEach(function (row) {
gridApi.selection.selectRow(row);
});
gridApi.core.scrollTo(selectRows.pop(), grid.columnDefs[0]);
}, 100);
What is working for me now is to skip the "gridApi.grid.modifyRows" and just call the action. I think that code was in there earlier to update the grid if it had rendered before the data was retrieved and assigned to grid.data, but that is taken care of by waiting for onRegisterApi to fire, then assigning the grid.data.

Saving the highlighting of current row in Oracle Apex Classic Report after closing the dialog window

Good evening to everybody here!
At this moment I'm working with one page in Oracle Apex (version 4.2.6.00.03). It consists of two Classic Reports — the first is a "master" one, and the second contains "details" of the former. Also there are several buttons for performing actions of inserting/updating/deleting the data. My purpose is not only to make the actions work and "details" report to refresh on choosing the row from the "master" one (I've completed these tasks), but also to manage to save the highlighting of reports' rows even after performing the actions (not only just refreshing the page).
Now I'll explain what I've already done. One can choose the row (and simultaneously highlight it) by means of the script I put in every Report's footer and it looks like this:
<script>
$(".t20data","#master_report").live("click",function(){
chooseMST($(this).find("span.MASTER").attr("id"));
});
</script>
There master_report is an ID of "master" report's region and MASTER stands for span class, in which I wrap all the cells in report to keep the value of row's ID. The function chooseMST is this:
function chooseMST(docID){
$.post('wwv_flow.show',
{'p_request' : 'APPLICATION_PROCESS=SET_MASTER',
'p_flow_id' : $v('pFLowId'),
'p_flow_step_id' : $v('pFlowStepId'),
'p_instance' : $v('pInstance'),
'x01' : docID},
function(data){
//refreshes "details" report
$('#detail_report').trigger('apexrefresh');
//deletes color from all the rows of "master" report
$(".t20data","#master_report").parent("tr").children().css("background-color","#F2F2F5");
//highlights the chosen row in "master" report
$("#" + String(docID)).parent("td").parent("tr").children().css("background-color","#A3BED8");
}
);
}
The action (say, AJAX callback) SET_MASTER is this:
begin
--clears the choice from "detail" report
APEX_UTIL.SET_SESSION_STATE(P_NAME => 'P400_DETAIL_RN'
,P_VALUE => NULL);
--makes the choice from "master" one
APEX_UTIL.SET_SESSION_STATE(P_NAME => 'P400_MASTER_RN'
,P_VALUE => APEX_APPLICATION.G_X01);
end;
To say about refreshing the page, I solved the problem of clearing the hidden items P400_DETAIL_RN and P400_MASTER_RN by having a process which goes before header with this PL/SQL code:
begin
:P400_DETAIL_RN := APEX_UTIL.GET_NUMERIC_SESSION_STATE(P_ITEM => 'P400_DETAIL_RN');
:P400_MASTER_RN := APEX_UTIL.GET_NUMERIC_SESSION_STATE(P_ITEM => 'P400_MASTER_RN');
end;
and the Javascript function recolorRows which is executed every time the page is loading:
function recolorRows(){
$(".t20data","#master_report").parent("tr").children().css("background-color","#F2F2F5");
if($("P400_MASTER_RN").val() != "") $("#" + String($("P400_MASTER_RN").val())).parent("td").parent("tr").children().css("background-color","#A3BED8");
$(".t20data","#detail_report").parent("tr").children().css("background-color","#F2F2F5");
if($("P400_DETAIL_RN").val() != "") $("#" + String($("P400_DETAIL_RN").val())).parent("td").parent("tr").children().css("background-color","#A3BED8");
}
The code concerning rows from "details" report is alike, so let me omit this part. Problems begin for me from performing the actions of manipulating the data. Here is the function which opens the dialog window for inserting or updating the row chosen in "master" report:
function MST_open(action){
//the part of code which finds out with what parameteres we should call the dialog window
$("#dialogFrame").attr("src",stringToCall);
$("#dialogWindow").dialog({
title:windowName,
modal:true,
width:500,
height:500,
resizable:true,
close:reloadMST //the action on closing the window
});
}
The code of reloadMST looks as follows:
function reloadMST(){
$("master_report").trigger('apexrefresh');
$("detail_report").trigger('apexrefresh');
}
And the Javascript function, which executes in the dialog window on the certain button click (for example, "Update"), is this:
function mstUpdate(){
$.post('wwv_flow.show',
{'p_request' : 'APPLICATION_PROCESS=MASTER_UPDATE',
'p_flow_id' : $v('pFLowId'),
'p_flow_step_id' : $v('pFlowStepId'),
'p_instance' : $v('pInstance'),
'x01' : apex.item("P402_SNAME").getValue()},
function(data){
//returns the ID of updated row in "msg" part of "res" variable
var res = eval("(" + data + ")");
if(res.status != "OK"){
//the code which catches the error, if it appears
} else {
parent.MST_close(res.msg);
}
}
);
}
where MST_close is this:
function MST_close(docID){
$("#dialogWindow").dialog("close");
//see this function above
chooseMST(docID);
}
So, this is a chain of Javascript and PL/SQL actions, which concerns the updating of the row from "master" report. The actions of inserting/updating/deleting the data work great, but I can't say the same about the saving of rows' color. The latter works good while I'm only choosing rows or refresh the page, but after performing, for example, the updating, the current row loses its highlighting. By debugging (say, adding the function console.log in Javascript code) I found out that the chain of actions, which must lead to saving the highlighting, executes nominally, but it looks like refreshing the report either goes after coloring or just prevents the latter.
Thus, my question is this: is there any way to save the highlight of the current row even after opening and closing the child dialog window?

I think that the problem is that after you update the value of a record in the modal window you refresh the data in the 2 reports in the main page and so you lose the highlight.
To fix this try to create a Dynamic Action on the event After Refresh on Region: Your Classic Reports that will execute the javascript function recolorRows(). You can also do it with javascript. The main ideea is that after you refresh the 2 reports (using reloadMST() or other method) you must trigger recolorRows().

Thank you, Cristian_I, very much. I've recently solved my problem. My mistake was that I hadn't done the hidden items binding in HTML-code - in other words, by means of Javascript only. Watching the behaviour of the hidden items, I'd discovered that when I tried to find their value with the help of jQuery function $("#hidden_item").val(), I got the previous values, but not the current ones (i.e. session state values). So that's why I had the highlighting unstable.
In addition to Dynamic Actions triggering right after refreshing the reports, I should have just add these strings to my function chooseMST before the "coloring" code itself:
$("#P400_MASTER_RN").val(docID); //binding to exact string
and
$("#P400_DETAIL_RN").val(""); //clearing the choice in the "details" report.
Due to this the problem with recoloring the rows have just gone away! Thus, now my page works excellent: the highlighting is stable, and even new rows are highlighted right after inserting them.

jQuery DataTable : Delete row and reload

Now, I am working with jQuery DataTable. Everything is going well in intializing data tables with javascript data array.
In my table, it included remove row button. When I clicked the Remove button of each row, I delete record using following function.
function removeRow(itemList, recordIndex){
itemList.splice(recordIndex, 1);
dataTable.clear();
dataTable.rows.add(itemList);
dataTable.columns.adjust().draw(false);
}
This function performed well with no error. At that, I set false to draw() function to prevent going to first page when delete records in any other page.This one also working for me.
The problem is, when my itemList has 11 records, and I go to second page of data table and delete the 11th record.
So, my itemList will left only 10 record and My data table should show the first page of paging.
But, jQuery data table is not doing that. It still have in second page with no records.
I don't know how to fix that one. I want to show previous page after delete every records from current page.
I know `draw()`` function without false parameter will go to first page. But it go to first page in every deletion.
I only want to go to previous page, when I deleted all records from current page.
Please, help me. Thanks.

I found an hacky way to get the previous pagination when the current has been emptied.
It is specific to jQuery DataTable, since using it's class naming.
Try it in CodePen.
function removeRow(recordIndex){
// Get previous pagination number
var previousPagination= parseInt( $(document).find(".paginate_button.current").data("dt-idx") ) -1;
// Splice the data.
data.splice(recordIndex,1);
myTable.clear();
myTable.rows.add(data);
myTable.columns.adjust().draw(false); // May ajust the pagination as empty... `.draw(false)` is needed.
// Decide to redraw or not based on the presence of `.deleteBtn` elements.
var doIdraw=false;
if($(document).find(".deleteBtn").length==0){
doIdraw=true;
}
myTable.columns.adjust().draw(doIdraw); // Re-draw the whole dataTable to pagination 1
// If the page redraws and a previous pagination existed (except the first)
if(previousPagination>1 && doIdraw){
var previousPage = $(document).find("[data-dt-idx='" + previousPagination + "']").click();
}
// Just to debug... Console.log the fact that only one pagination is left. You can remove that.
if(previousPagination==0 && doIdraw){
}
}
Notice that I used:
#myTable as the table id
.deleteBtn as the delete buttons class
data as the dataTable data
I removed all console.log() and example related code in the code above (but not in CodePen).
"Delete this →" button handler is:
$("#myTable").on("click",".deleteBtn",function(){
var rowElement = $(this).closest("tr");
var rowIndex = myTable.row(rowElement).index();
removeRow(rowIndex);
});

Jquery DataTable keeps going back to first page when changing the checked status of checkboxes in other pages with javascript

I have the following code
$('input[name="select-all"]').click(function() {
//channel-data is initialised as DataTable
$('#channel-table').find('input[name="batch-select"]:checked').each(function () {
$(this).prop("checked",true);
});
});
whenever I click the select all button in any page other than 1st The datatable keeps reverting back to the first page.
I think it happens because of redraw due to change in checkboxes property.Any work around this?

Yes, probably - but have not seen any reason for test your hypothesis :) When dealing with dataTables, always go through the API! There is a neat every() method you can use to cycle through all rows and update a checkbox as checked. Here is an example, have tried to reproduce your setup with a "select all" button and checkboxes :
$('input[name="select-all"]').click(function() {
table.rows().every( function ( rowIdx, tableLoop, rowLoop ) {
var $tr = this.nodes().to$()
$tr.find('input[name="batch-select"]').prop('checked', true)
})
})
demo -> http://jsfiddle.net/u9Lq56v1/
does not change page
does actually update checkboxes also on hidden pages (that would the code in OP fail as well)

How to update ZK Grid values from jQuery

I have three Tabs and in each tab, I have a Grid.
The data for each Grid is coming from a database, so I am using rowRenderer to populate the Grids. The following code is common for all three Grids:
<grid id="myGrid1" width="950px" sizedByContent="true" rowRenderer="com.example.renderer.MyRowRenderer">
The rows are constructed from Doublebox objects. The data is populated successfully.
The Problem:
I need to handle multiple-cell editing on the client side. The editing is done via mouse-clicking on a particular cell and entering a value.
As example let's say that the user edits first cell on the first row and the value should be
propagated to all other cells on the same row and in all three Grids (so also the two Grids which the user currently does not see, because they are in tabpanes).
I am using jQuery to do this value propagation and it works OK.
I am passing the jQuery as follows:
doublebox.setWidgetListener(Events.ON_CHANGING, jQuerySelectors);
doublebox.setWidgetListener(Events.ON_CHANGE, jQuerySelectors);
This makes it possible to change the value in 1 cell and the change is instantly (visually) seen in all other cells filtered by jQuery selectors.
The problem is that the value is visually distributed to all the cells, but when I try to save the Grid data back to the database, the background values are the old ones.
I am assuming that ZK-Grid component is not aware that jQuery changed all the cell values. Nevertheless if I manually click on a cell that already has the NEW value (enter/leave/change focus) when I save the grid the NEW value is correct in that particular cell. Maybe that's a hint how can I resolve this.
Code of how I extract the Grid values:
Grid tGrid = (Grid) event.getTarget().getFellow("myGrid1");
ListModel model = tGrid.getModel();
MyCustomRow tRow = (MyCustomRow)model.getElementAt(i);
The model for my Grid is a List of MyCustomRow:
myGrid1.setModel(new ListModelList(List<MyCustomRow> populatedList));
I have a couple of assumptions, but whatever I have tried, hasn't worked. I have in mind that jQuery events and ZK-Events are different and probably isolated in different contexts. (Although I have tried to fire events from jQuery and so on..)
Do you have any suggestions? As a whole is my approach correct or there's another way to do this? Thanks for your time in advance!

Your problem is exactly what you are expecting.
Zk has it's own event system and do not care about your jq,
cos it's jq and zk don't observ the DOM.
The ways to solve your problem.
Use the "ZK-Way":
Simply listen at server-side and chage things there.
I am not sure if not selected Tabs
are updateable, but I am sure you could update the Grid
components on the select event of the Tab.
Fire an zk-event your self:
All you need to know, is written in the zk doc.
Basically, you collect your data at client side, send
an Event to the server via zAu.send() extract the
data from the json object at serverside and update your Grids
I would prefer the first one, cos it's less work and there should not be
a notable difference in traffic.

I post the solution we came up with:
This is the javascript attached to each Doublebox in the Z-Grid
//getting the value of the clicked cell
var currVal = jq(this).val();
//getting the next cell (on the right of the clicked cell)
objCells = jq(this).parents('td').next().find('.z-doublebox');
// if there's a next cell (returned array has length) - set the value and
// fire ZK onChange Event
if (objCells.length) {
zk.Widget.$(jq(objCells).attr('id')).setValue(currVal);
zk.Widget.$(jq(objCells).attr('id')).fireOnChange();
} else { //otherwise we assume this is the last cell of the current tab
//So we get the current row, because we want to edit the cells in the same row in the next tabs
var currRow = jq(this).parents('tr').prevAll().length;
//finding the next cell, on the same row in the hidden tab and applying the same logic
objCellsHiddenTabs = jq(this).parents('.z-tabpanel').next().find('.z-row:eq(' + currRow + ')').find('.z-doublebox');
if (objCellsHiddenTabs.length) {
zk.Widget.$(jq(objCellsHiddenTabs).attr('id')).setValue(currVal);
zk.Widget.$(jq(objCellsHiddenTabs).attr('id')).fireOnChange();
}
}
The java code in the RowRenderer class looks something like this:
...
if (someBean != null) {
binder.bindBean("tBean", someBean);
Doublebox box = new Doublebox();
setDefaultStyle(box);
row.appendChild(box);
binder.addBinding(box, "value", "tBean.someSetter");
...
private void setDefaultStyle(Doublebox box) {
box.setFormat("#.00");
box.setConstraint("no negative,no empty");
box.setWidth("50px");
String customJS = ""; //the JS above
//this is used to visually see that you're editing multiple cells at once
String customJSNoFireOnChange = "jq(this).parents('td').nextAll().find('.z-doublebox').val(jq(this).val());";
box.setWidgetListener(Events.ON_CHANGING, customJSNoFireOnChange);
box.setWidgetListener(Events.ON_CHANGE, customJS);
}
What is interesting to notice is that ZK optimizes this fireOnChange Events and send only 1 ajax request to the server containing the updates to the necessary cells.