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
Related
I have a two grid columns set up to display as editable drop-down fields. The column definition for each field uses this code to render the selection values:
return '<div class="editCell-innerDiv">' + params.value +
'<img class="alignRight" src="/resource/images/triangle-down_filled_12.png" alt="">' +
'</div>';
and render like this in the grid:
When the user changes a value in one drop-down, I need to clear the value in the other drop-down. When I use this JS code:
params.node.setDataValue('Some_Field', '');
I get this error in the console:
Cannot read properties of null (reading 'getColDef')
What code would I use to programmatically clear the other editable select field in the grid?
The way I do this, although I am not sure if the context is exactly the same (I do it within an event handler for Tab keys), is as follows...
params.node.data.Some_Field = '';
api.refreshCells({ rowNodes: [params.node], force: true });
I am not sure how you will get access to the ag-grid api (the api object in my code sample). This will depend on the context of your code.
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.
I am trying to create a grid that has a column where the editor is always available, so that editing the cell is a "one click" process. By this I mean rather than having to click on the cell to first switch to edit mode, and then select from the combo box, the user can straight away (using the mouse) click on the combobox down arrow to open it and select a value.
I thought I could do this using a column template (as opposed to editor) as follows...
function createComboTemplate(dataItem) {
var tmpl = '<input style="width:100%" ' +
'kendo-combo-box ' +
'k-data-text-field="\'display\'" ' +
'k-data-value-field="\'rego\'" ' +
'k-data-source="getCarList()"' +
'k-value="dataItem.rego"' +
'k-on-change="handleDDLChange(kendoEvent, dataItem)"/>';
return tmpl;
}
Full code here
The above shows the combo box, however as soon as I click on it, the cell goes to a text edit field. So I thought that perhaps the cell going into edit mode was causing this, so I set the columns editable property to false , but this made no difference.
IF I set the whole grid's editable property to false, then when I click on the combo box, it stays there, however it is empty.
In this example, the combobox data source is via a function, I also tried setting directly to a global list object (incase it was the function call that was the problem), but this didn't work either.
So, I Have a couple of related questions here.
The first, is to do with the property names in the template.
When I create a combobox in straight code, I have as follows (as in the above demo)
function createCombo(container, options, data) {
var dataField = options.field.split('.');
var fieldName = dataField[0];
var input = $('<input/>')
input.appendTo(container)
input.kendoComboBox({
autoBind: true,
filter: "contains",
placeholder: "select...",
suggest: true,
dataTextField: "display",
dataValueField: "rego",
dataSource: data,
value: options.model[fieldName].rego,
change: function (e) {
var dataItem = this.dataItem();
options.model[fieldName]['rego'] = dataItem.rego;
options.model.set(fieldName + '.display', dataItem.display);
}
});
}
So the above snippet has properties like "dataTextField", and "dataSource", etc, but when I created the template, from another example of templates I found, it seemed to use names like "k-data-text-field" and "k-data-source".
Is there any doco, or rules on how these field names map in the "markup" that is used in the templates (I could not find any)? It appear that the property names are prefixed with "k-data", and then the camelcase names converted to the "dash" syntax (similar to what angular does). IS this just the rules that we follow? If not then perhaps my problems are the syntax above is incorrect.
The other question is of course, what have I done wrong to cause the 2 problems
The combobox disappears when I click on it (unless the whole, grid is set to non editable)
Why the combo has no data
Or am I going about this the wrong way.
Thanks in advance for any help!
It appear that the property names are prefixed with "k-data", and then
the camelcase names converted to the "dash" syntax (similar to what
angular does). IS this just the rules that we follow?
Yes - the documentation is here.
The combobox disappears when I click on it (unless the whole, grid is
set to non editable)
This is because the column is editable, so it gets replaced by the default editor. You can prevent this from happening using the technique I described here. I also used it in the demo.
Why the combo has no data
Your template doesn't work; it should be something like this:
var tmpl = '<input style="width:100%" ' +
'kendo-combo-box ' +
'k-data-text-field="\'display\'" ' +
'k-data-value-field="\'rego\'" ' +
'k-data-source="dataItem.carSource"' +
'k-value="dataItem.car.rego" />';
and for that to work, you need to give each data item a reference to the car data (you can't execute a function there, the template is evaluated against a kendo.data.Model instance).
(updated demo)
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 a table for adding a new budget details like the image below:
When I select an Income Account then another row is added to the viewmodel collection:
I want to set all field values to "0.00" when the new row is added and also I have a problem because if I delete a row then the "change" event of the combo doesnt exist so there is no way to add a new row when changing the last combo.
Any clue? Here is the fiddle working sample: http://jsfiddle.net/rLUyS/9/
Here is the code that I use to bind the change action to the last added combo:
$('select[name=cboincomeaccount_' + newRowIndex + ']').bind("change", {
combo: $(this)
}, handler);
function handler(event) {
newRowIndex++;
var combo = jQuery(this);
var row = combo.parent().parent();
appViewModel.addRow();
// Unbind
combo.unbind('change');
// Bind new combo
jQuery('select[name=cboincomeaccount_' + newRowIndex + ']').bind("change", {
combo: jQuery(this)
}, handler)
jQuery(row).find('input[name^="txtincmonth"]').removeAttr('disabled');
};
Thanks in advance!!
This might not be so much of a Knockout issue as it is a user interface issue.
I want to set all field values to "0.00" when the new row is added
Well that's easy enough. Simply initialize the the observable row to all zeros.
When I select an Income Account then another row is added to the viewmodel collection...
and also I have a problem because if I delete a row then the "change" event of the combo doesnt exist so there is no way to add a new row when changing the last combo.
This is probably a negotiable requirement.
Why not create an 'Add' button instead of insisting on this "nifty" behavior that adds a row when the user makes a section in the dropdown list?
Besides, even if we could accomplish what you're asking for (and I can envision a way that we could do this), what will you do when it's time to save the user's input to the server? Were you planning on ignore that last empty row?