I have an issue with IG if there any one can help me.
I upgraded to Oracle APEX 18.2, So I have to get rid of all Tabular forms and change it to Interactive Grids, the problem is that when I need to compute Net Value (QTY*UNIT_PRICE), I used to create a dynamic action like this:
var row_id = $(this.triggeringElement).attr('id').substr(4);
$('#f11_'+row_id).val(parseInt($('#f04_'+row_id).val()) * parseFloat($('#f10_'+row_id).val()))
Does anyone know how to do it in interactive grid?
Regards
You'd now create a dynamic action; actually, two of them - on both QTY and UNIT_PRICE Interactive Grid's columns. Dynamic actions would look the same:
event = "Change"
true action: "Set value"
set type: "PL/SQL Expression": :QTY * :UNIT_PRICE
items to submit: QTY, UNIT_PRICE
affected element: column NET_VALUE (or whatever its name is)
That should do it.
Related
I have a tabular form which I need to disbale and re-enable some of the columns based on some conditions.
I have the below javascript in my dynamic action which is working. I am referencing the columns by their names (f01_0001, f01_0002, f02_0001, f02_0002....)
$("[name='f01']").each(function(i){
// columns to be disabled
var coltext5 = $("[name='f05']").get(i).id;
var checkbox8 = $("[name='f08']").get(i).id.substring(0,8);
$("#"+coltext5).prop( "disabled", true );
$("#"+checkbox8).prop( "disabled", true );
})
But the issue I have is, if I switch the position of these columns, or add more editable columns to the tabular form, the name of these columns will be changed.
e.g in the above example, if I add one more textbox before coltext5, then coltext5's name will become f06....
Is there any better way to reference the tabular form columns? like ID or class, something that's static and won't be changed even the position of columns are changed?
Thanks
I've hit this issue before, and I've successfully used data attributes to do it - e.g. https://jeffkemponoracle.com/2016/04/05/declarative-tabular-form-dynamic-totals/
For example, you can set Element Attributes on the "Address" column to data-col="address", and refer to them in javascript using $("[data-col='address']").
Of course, you have to add this to each column you need to refer to.
I've been working on JQGid and has a requirement to combine common cells together in one big cell as shown!
Now the requirement is the add another cell below the last to that would have a clickable button in new cell in the Address column.Which is for adding a new address for adam whose dob is 11/11/1988.
So the help I require is to create a an empty cell dynamically as the datasource for the jqgrid is a json object and I won't be able to modify the json value
PLease let me know any custom formatter you know for this specific odd requirement
Any help would be appreciated
Below given is the cellattr function I've used to combine then Name field
cellattr: function (rowId, val, rawObject, cm, rdata) {
var result;
if (prevCellVal.value == val) {
result = ' style="display: none" rowspanid="' + prevCellVal.cellId + '"';
}
else {
var cellId = this.id + '_row_' + rowId + '_' + cm.name;
result = ' rowspan="1" id="' + cellId + '"'+'"+"';
prevCellVal = { cellId: cellId, value: val };
}
return result ;
}
May be I'm not getting what you are trying to say but this is my current scenario and what I would need to is to move the add new Value dropdown to be added as a new row on the right side under the existing file or files (could be multiple based on the returned value from the server). I have used cellattr function as said above. with the answers i'm not able to fix this.
Using formatter I'm able to move it to the right side when there are no files are returned. But I'm not able to move it to the side with values returned
Further help would be appreciated
Thanks in advance
I posted the answer which shows how one can use rowspan attribute to fill the grid which is close to what you do. The demo from the answer you cellattr, but one can use setCell too to set rowspan too.
I made the demo to demonstrate this. It displays the following grid originally
after one clicks on the button "Click me to add new row" I use addRowData to add the row and use setCell to set new values for rowspan attributes of some previous rows. So one sees the following picture
I disable the button "Click me to add new row" because what I wrote is very rough code. I used just fixed values of rowid instead of analyzing the data and evaluating all required values full dynamically. Nevertheless the demo shows clear that one can fill such grids dynamically.
Inside of click event handler I used just the following calles
$("#list").jqGrid("addRowData", "100", { country: "USA", state: "California",... },
"last");
$("#list").jqGrid("setCell", "60", "state", "", "", {rowspan: "5"});
$("#list").jqGrid("setCell", "10", "country", "", "", {rowspan: "10"});
UPDATED: One can add any HTML fragment (like <button>) in the same way. One more demo add buttons in the grid
I need to implement a hierarchical choice list in my DataGrid. Depending on the value of the first column, the available options for the second column need to change. Is there any way to attach a selection listener to the DataGrid (or all cells?) and modify the options value of the second column (in this specific row) to display values depending on the first columns value?
I haven't tried this but the dojox.grid.DataGrid has among its defined events:
onApplyCellEdit(inValue, inRowIndex, inFieldIndex)
so you can:
dojo.connect(grid, 'onApplyCellEdit',
function(inValue,inRowIndex, inFieldIndex){
var colObj = grid.getCell(2);
var node = colObj.getNode(inRowIndex);
var select = dojo.query(".dojoxGridSelect",node)[0];
console.log(select);
}
);
as long as the field is set alwaysEditing=true
That will give you access to the node and the cell... but if you change the options it rewrites it. There should be a better way of doing it by using the dojo's methods.
http://jsfiddle.net/dacabdi89/2acjt/
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.
I have two distinct gridpanels and throughout my code, whenever value of one of the cells in Grid1 changes I want to be able to change value of certain cells in the Grid2,
How can I change the css of the second grid from within the Grid1.
The following allows me to change the css for an entire row in Grid2 but I need to be able to change the css for a cell of Grid2 row: 2, column 3
var Grid2Store= Ext.data.StoreManager.get("MainComparisonStore");
Grid2.getView().addRowCls(Grid2Store.getAt(2), 'orange-bar');
Get a hold of the element and you can use cellElement.addCls('orange-bar');. See Ext.dom.Element.addCls() documentation. I put together a jsFiddle for you to see an example. Just click the "Test" button in the grid toolbar.
Here is the code that does the work. It is hard coded to add a class to column 1, row 1.
var grid = Ext.getCmp('myGrid');
var column = grid.columns[1];
var record = grid.store.getAt(1);
var cell = grid.getView().getCell(record, column);
cell.addCls('orange-bar');
Here (Sencha Forum) is some discussion on how to get the cell. This is what I used to put together my example. You can see how you could make a helper like getCell(rowIndex, columnIndex) pretty easily.