I've checked the jqgrid documentation page, and also here, here and here but none of them answers my problem.
I have a jqgrid with the inline navigator (the buttons at the bottom left of the grid that allow adding/editing rows) displayed.
The grid has a hidden column, with the name hidden_col.
I would like to make the following - When the user selects a row and tries to delete it, the javascript makes an alert - which shows the value of hidden_col for the selected row.
For this, I have the following code
$("#myjqgrid").jqGrid('navGrid',"#myjqgrid_pager",
{}, //options
{}, // edit options
{}, // add options
{ mtype:"POST",
reloadAfterSubmit:true, //Reload data after deleting
onclickSubmit: function(rowid)
{
var rowData = $('#broadcast_table').jqGrid('getRowData', rowid);
alert(rowData);
}
}, // del options
{} // search options);
);
The alert returns "[Object object]". How can I get the value of hidden_col?
I tried adding
var col_value = rowData.hidden_col;
And
var col_value = rowData['hidden_col'];
But both return undefined.
I checked the value in rowid - it is correct. I also know that hidden_col has a value for each row.
What can I be doing wrong?
Turns out I was not using the parameter "rowid" as I should.
Here is the code, which I replaced in the first post, that does what I want:
onclickSubmit: function(){
var selected_row = $('#myjqgrid').jqGrid('getGridParam', 'selrow');
var rowdata = $('#myjqgrid').getRowData(selected_row);
alert(rowdata.hidden_col);
}
Related
Since my previous questions I learned and progressed a lot (this all started from HTML code in println inside a Java file !)
I'm close to my target.
I've got 2 dropdown : dd1 and dd2
I got a java to get values in database
dd1 is an independant list
dd2 options depend of the choice in dd1
Using gson/jquery it works perfectly
My issue is the initialisation of the page.
I load the dd1 using my fillOption function and by default my page display the first value as selected.
So I want that dd2 initialised with this value but when I trigger the change() on dd1 this.value is empty and I don't get why.
$(document).ready(function() {
fillOptions('dd1', this); // Init the first dropdown with my values, works fine
$('#dd1 option:eq(1)').prop('selected', true); // Here I tried to force the selection of the first item, doesn't change anything
// Delcaration of the change function for the first dropwdown
$('#dd1').on('change', function() {
alert(this.value); // display blank on the page load, display the value if I select manually afterwards
fillOptions('dd2', this); // at load, 'this' is blank so nothing is loaded for dd2. Works fine if selected manually. I expected to have the value displayed on screen here.
});
$('#dd1').trigger('change');
});
function fillOptions(ddId, callingElement) {
var dd = $('#' + ddId);
$.getJSON('${pageContext.request.contextPath}/optionsSousType?dd=' + ddId + '&val=' + $(callingElement).val(), function(opts) {
$('>option', dd).remove(); // Clean old options first.
if (opts) {
$.each(opts, function(key, value) {
dd.append($('<option/>').val(key).text(value));
});
} else {
dd.append($('<option/>').text("Choisir parent"));
}
});
}
I also tried getting the value using :
$('#colonne').on('change', function() {
var col = $('#colonne').find(":selected").text();
alert(col);
fillOptions('libelle', col);
});
Same result, col is blank. I'm pretty sure it's simple but I couldn't find an answer. Thanks for your help
I'm using the DataTables library to create a table with extra functionality. What I'd like to achieve, is that the user can select rows and then press a button. This will call the server, do some stuff and the rows should be updated accordingly.
However, after I'm done iterating over the rows to be changed and setting its values, re-drawing the table does not actually update its values. I update the data object, invalidate the cache and call table.draw(). It's very similar to the last example on this page.
I have created a JSFiddle of this issue. The button updates the date objects of the selected rows and the table is re-drawn, but the data inside the table is not updated. The core JS code:
$('#updateRow').click(function() {
//Get the table
var table = $('#example').DataTable();
//Iterate over selected rows
var rowData = table.rows({
selected: true
}).every(function() {
//For every selected row, update startDate
var d = this.data();
d.startDate = "01/01/2017";
console.log('Set startDate of ' + d.name + ' to ' + d.startDate);
//Invalidate the cache
this.invalidate();
});
//Re-draw the table
table.draw();
});
I forked and did the solution from your JsFiddle. Here's the relevant snippet from fiddle https://jsfiddle.net/k38r9be5/1/
var rowData = table.rows({
selected: true
}).every(function(rowIdx) {
var colIdx = 4; // startDate is the fifth column, or "4" from 0-base (0,1,2,3,4...)
table.cell( rowIdx, colIdx).data('01/01/2017').draw();
});
Basically, via the API you can get the cell object itself, and modify the contents with .data(). In your version you weren't actually getting a particular cell object and instead just copied the data contents of the row to a variable, and modified that.
I have two kendo grids in a page, I am trying to transfer some items from one grid to another on button click . my code is working perfectly in Chrome but not in IE.
$('#btn_move_1_2').on('click', function(){
var grid1 = $('#grid1').data('kendoGrid');
var grid2 = $('#grid2').data('kendoGrid');
grid1.select().each(function(key , value){
var currItem = grid1.dataItem(value);
grid1.dataSource.remove(currItem);
//on second iteration gets error- Unable to get property 'uid' of undefined or null reference
grid2.dataSource.add(currItem);
});
grid1.select().each(function(){ grid1.removeRow($(this)); });
grid2.refresh();
});
single selection will work fine. on multiple selection it broke in second iteration with error "Unable to get property 'uid' of undefined or null reference"
I created a sample snippet to show the error http://dojo.telerik.com/#jomet/oVICI
Please try with the below code snippet. Instead of passing full TR declaration I am passing only the row's unique Id to get the modal/item detail.
$('#btn_move_1_2').on('click', function () {
var grid1 = $('#grid1').data('kendoGrid');
var grid2 = $('#grid2').data('kendoGrid');
var rowSelected = grid1.select();
grid1.select().each(function (key, value) {
// I have updated below code line
var currItem = grid1.dataSource.getByUid($(value).data('uid'));
grid1.dataSource.remove(currItem);
grid2.dataSource.add(currItem);
});
grid1.select().each(function () { grid1.removeRow($(this)); });
grid2.refresh();
});
Let me know if any concern.
I've got two datatables and there is a dropdown created in the second one with data from the first. I've created a jsbin here
If you add a couple of instructions to the first table (add any text and then click Add Instruction) - then click on the Load Copied Data button, you will see the dropdown box is populated from the first table.
If I do:
$('#btnTest').on('click', function (e) {
var tsor = $('#tblSORSInstall').dataTable();
var ins = tsor.fnGetData();
alert(ins);
});
It basically gives me the html for the dropdown - how do I get which value they have chosen? I was thinking of having a hidden column and updating that on the onchange of the dropdown, but is there a better way?
Thanks in advance
You may use jQuery.map() to generate an array of selected text/value, like below.
$('#btnTest').on('click', function (e) {
//var tsor = $('#tblSORSInstall').dataTable();
var ins = $('#tblSORSInstall').find("tbody select").map(function() {
return $(this).find(":selected").text() // get selected text
//return $(this).val() // get selected value
}).get()
alert ( JSON.stringify(ins, null, 2) )
});
Here is your JS Bin - updated
Using tsor.fnGetNodes() you can get all table row nodes, then you can loop through those and get the select values.
Final code will look something like
$('#btnTest').on('click', function (e) {
var tsor = $('#tblSORSInstall').dataTable();
var ins = tsor.fnGetData();
var a = tsor.fnGetNodes();
$.each(tsor.fnGetNodes(), function (index, value) {
alert($(value).find('select').val());
});
});
I have the following Problem:
I want to dynamically create table rows and cells with different settings.
The Solution mentioned here: Dynamic binding of table column and rows
was a good starting point for my problem, but I still could not get it to work.
The table should display each object of the model in a new row with the binding for the given attributes of that object.
The checked attribute should be displayed in/as a checkbox that is either checked or unchecked depending on the value (true or false) of checked.
Now, this works perfectly fine if I define the bindings and columns as they are in the SAPUI5 Table Example
The Problem:
Depending on value (true or false) of the objects existsLocal attribute I want the checkbox of that row to be either enabled or disabled. Further that row should get a new class - called existsLocalClass wich sets its background to grey if existsLocal is true.
I was thinking that this can be solved with a factory function that creates my rows and its cells. Unfortunately my factory does not work as intended.
Here is my code:
Model definition:
var model = [
{name: "name1", description: "description1", checked: true, existsLocal: true},
{name: "name2", description: "description2", checked: false, existsLocal: false}
]
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({modelData: model});
Table plus factory function:
var oTable = new sap.ui.table.Table({
visibleRowCount: 7,
firstVisibleRow: 3,
selectionMode: sap.ui.table.SelectionMode.None
});
var tableRowFactory = function (sId, oContext) {
console.log("row factory");
var exists = oContext.getProperty("existsLocal");
if(exists){
return new sap.ui.table.Row(sId)
.addCell(new sap.ui.commons.TextView()
.bindProperty("text", oContext.sPath + "/name"))
.addCell(new sap.ui.commons.TextView()
.bindProperty("text", oContext.sPath+ "/description"))
.addCell(new sap.ui.commons.CheckBox()
.bindProperty("checked", oContext.sPath+ "/checked").setEnabled(false))
.addStyleClass("existsLocal");
}else{
return new sap.ui.table.Row(sId)
.addCell(new sap.ui.commons.TextView()
.bindProperty("text", oContext.sPath + "/name"))
.addCell(new sap.ui.commons.TextView()
.bindProperty("text", oContext.sPath+ "/description"))
.addCell(new sap.ui.commons.CheckBox()
.bindProperty("checked", oContext.sPath+ "/checked"))
}
};
oTable.setModel(oModel);
oTable.bindRows("/modelData",tableRowFactory); // does not work
oTable.bindAggregation("rows", "/modelData", tableRowFactory); //doesn't work either
The browser does not show any errors and the table stays empty. I think the function does not even get called but I could not manage to fix it.
Maybe my entire approach is wrong - I don't really understand sapui5's binding and context thingy.
I hope that you can help me with this.
Edit:
I found a kinda hacky solution for this:
var model = oTable.getModel();
var rows = oTable.getRows();
var indicesOfRows = [];
$.each(rows, function (index, row){
indicesOfRows.push(oTable.indexOfRow(row));
});
$.each(rows, function(index, row){
var rowIndex = indicesOfRows[index];
var exists = model.getProperty("existsLocal", oTable.getContextByIndex(rowIndex));
var cells = row.getCells();
if(exists){
$.each(cells, function(index, cell){
if(cell instanceof sap.ui.commons.CheckBox){
row.$().toggleClass("existsLocal", true);
cell.setEnabled(false);
}
})
}
})
Instead you could bind to column with template. You have only rows binding and table does not know the columns.
BTW, You can define "enable" property of the checkbox with formatters. You need factory only for addStyleClass when necessary
So something like that: http://jsbin.com/poyetoqa/1/edit
See my edited solution in the original question. If you have a better working solution feel free to answer. Meanwhile I'll mark the question as answered.