I'm using jqgrid 3.8.2 and the grid have many columns that are non-editable but still want to be posted to the server. How I can do that? (If I set editable:false then the field is not getting posted the the server)
It seems to me that the column settings
hidden: true, editable: true, editrules: { edithidden: false }
will do what you need.
I realize this question is pretty old now but I needed to do this same thing today and the accepted answer doesn't actually answer the question. Sorry Oleg, you are still awesome. Anyway, if you have visible columns and are doing inline editing where some of those columns should not be editable the following worked for me.
Use these column setting
editable: true, edittype: 'custom', editoptions: { custom_element: readOnlyElement, custom_value: readOnlyValue}
and define these functions
function readOnlyElement(value, options) {
return $('<span></span>', { text: value });
},
function readOnlyValue(elem, operation, value) {
if (operation === 'get') {
return $(elem).text();
} else if (operation === 'set') {
$('span', elem).text(value);
}
}
About 'editable: "hidden"'...
This method is perfect until you change the contents of a cell. With 'editable:' hidden '', the jqgrid does not contain <input /> but aria-describedby which is less simple to target.
ex:
without 'editable:"hidden"'
you target the input by its 'id '==>' $("#yourgrid #jqg3_your_field")
with 'editable:' hidden 'you target like that ...
You need your current row id
rowID = $("#yourgrid").jqGrid('getGridParam', 'selrow');
$("tr[id='"+rowID+"'] [aria-describedby='yourgrid_your_field']>.u-jqgrid-cell-wrapper").html()
It's a lot less convenient :-)
Despite everything, it works very well ;-)
I see the answer in the comments for Oleg's answer by #singe3.
Set,
editable: "hidden"
Related
I am using select2 with jqgrid.
something is not working correctly, these are the cases when I edit a row.
WITHOUT OPTGROUP
standard select (no select2) without optgroup: select will show the selected item (the one i’m editing)
select2 without optgroup: select will show the selected item (the one i’m editing)
WITH OPTGROUP
standard select (no select2) with optgroup: select will show the selected item (the one i’m editing)
select2 with optgroup: select will NOT show the selected item (the one i’m editing) but when I open it il will focus the selected item.
So as you see #2 works, my problem is #4. Is it a bug or am I missing something?
Thank you,
Lorenzo
Not sure what you search, but the problem when navigating row is described here
In your case I have tested and the following code work:
$('#grid'). jqGrid('navGrid', pager, {params},
...
{ // edit params
{ afterclickPgButtons : function(button, form, id ) {
$("#name").trigger('change.select2');
},...
}
);
Note the difference of the link above.
UPDATED
In order to solve the problem you will need to use setTimeout within dataInit function. Try with one of the following settings:
{
name: "name",
index: "name",
autosize: true,
searchoptions:{clearSearch:false},
width:200,
editable:true,
edittype: 'select',
editoptions: {
// Simulo la risposta di una chiamata
// Per funzionare deve esistere più sotto
// ajaxSelectOptions
dataUrl:'/echo/html/',
postData: {
html: serverResponce
},
//
dataInit: function(element) {
setTimeout(function(){
$(element).select2({
allowClear: false,
// Imposto il tema bootstrap
theme: "bootstrap4",
dropdownAutoWidth : true,
width: 'auto',
placeholder: 'Search...'
});
}, 500);
}
}
}
I expect to have a demo with optgroup
I am in need of assistance in an attempt to programmatically check/uncheck a checkbox in a kendo grid.
I have part of my Grids datasource for this relevant field as...
receivereport: {
editable: true,
nullable: false,
required: false,
type: 'boolean',
validation: {
required: false
}
},
And the grids configuration is...
$("#contactGrid").kendoGrid({
dataSource: contactGridDS,
navigatable: true,
dataBound: mapContactTypes,
editable: true,
edit: function (input) {
},
toolbar: ["save", "cancel"],
pageable: false,
columns: [
{ field: 'email', title: 'Email', hidden: false, attributes: { "class": 'contactCell_email' } },
{ field: 'receivereport', title: 'Receive Reports?', hidden: false, attributes: { "class": 'contactCell_receivereport' }, template: '<input type="checkbox" #= receivereport ? "checked=checked" : "" # value="" disabled="disabled" ></input>' }
],
//filterable: true,
sortable: {
mode: 'single',
allowUnsort: false
}
});
For brevity sake, I cut some of the other code out that's not relevant, such as other fields not involved here.
So, I have an email method that has a regex in it that works, and what I want to do is, if on focus, or focus out of the email field, if that email is invalid, make the receive report field false, but it's not registering dirty editing, and I even tried forcing it by appending some CSS rules and classes, which makes it "look" dirty, but when I change the value of the checkbox, on save, it goes back to what it was.
The data is bound to the receivereport data. So I think I read on the forums here that I need to do something like datasource.set("receivereport", false); And maybe a sync? The syncinc fires but it doesn't help and I must be calling the set incorrectly because the console says its firing on an unidentified object.
Here's the real kicker, I know how to access that check box and render it as false, but it flips right back to what it was bound to! It's not holding. Unless I click into that cell and do a click on the check box, it doesn't hold...
...unless I can simulate a fake click event on the target, being the checkbox...
I looked at the example here, Disable/Enable the checkbox in kendo grid based on column Value, but it seems a bit different and not what I need.
Bottom line - if the checkbox is true/checked, and a user goes back into the email field and renders it invalid, I want to automatically uncheck that checkbox, as well as make that checkbox disabled, until the user makes the email valid again. This also implies that a null email, means the checkbox must be false and disabled.
Anyways, any help would be immensely appreciated. Thanks.
This can be done using the "change" event of the dataSource:
dataSource = new kendo.data.DataSource({
change: function(e) {
if (e.action == "itemchange" && e.field == "email") {
//you can check the email value as well:
//var model = e.items[0];
e.items[0].set("receivereport", false)
}
},
Here is the full example:
Grid: change field value depending on another field
In the inline editing, before the editing be made, it creates internally an array (savedRow) and fill it with the values of the fields that are being editable, so I can access this values.
I'd like to know if in the form editing it has something similar to this, because I need to access the values of the fields before the editing will be completed to do a validation before the fields are "saved" in the database.
Someone could help me?
EDITED :
I'm posting here a part of my code (the code of one field), and I'm trying to validate in both way (inline editing and form editing). For inline editing I'm validating using dataEvents and there I'm using savedRow to access the data that were not stored yet. But when I try to edit using form editing because of the the use of savedRow, it shows me an error: savedRow is not defined. In the case of this field the editrules fits with what I want to do, but I don't know if this will occurs in all of those fields.
{ name: 'ac_fd', index: 'ac_fd', width: 50, editable: true,
formatter: 'number', editrules: { number:true, required:true, minValue: 0.1,
maxValue: 1.0 }, formatoptions: { decimalPlaces: 1, decimalSeparator: '.'},
editoptions: {
dataEvents: [ {
type: 'blur', fn: function(e) {
var savedrow = $("#list").getGridParam('savedRow');
console.log($(this).val());
if($(this).val() != savedrow[0]['ac_fd']) {
var eid='#' + savedrow[0]['id'] + '_ac_fd';
var val_fd=$(this).val();
var fd_min=0.1;
var fd_max=1.0;
if( isNaN(val_fd) || val_fd > fd_max || val_fd < fd_min) {
setTimeout(function(){
$(eid).focus().select();
},600);
$(eid).qtip({
content: {
text: 'Fator de Demanda deve ser um <b>número</b>
entre <b>' + fd_min.toFixed(1) + '</b> e <b>'
+ fd_max.toFixed(1) + '</b>.',
title: {
text: 'Atenção:',
button: true
}
},
show: {
event: false,
ready: true,
effect: function() {
$(this).stop(0, 1).fadeIn(400);
},
delay: 0,
},
hide: {
event: false,
effect: function(api) {
$(this).stop(0, 1).fadeOut(900).queue(function() {
api.destroy();
});
},
},
style: {
classes: 'qtip-red qtip-rounded trif_tip_err',
tip: {
width: 10,
height:12
}
},
position: {
my: 'bottom left',
at: 'top center',
},
events: {
render: function(event, api) {
tip_timer.call(api.elements.tooltip, event);
}
}
});
}
}
}
} ]
}
},
So if dataEvents is common and used for the three forms of edit, where can I do this type of validation (using qtip too and I want that this validation be used in inline editing too)?
The reason why jqGrid save the editing row in interval savedRow parameter is because jqGrid modify the editing row in-place. Only because of that inline editing and cell editing use interval savedRow parameter. Form editing don't modifies the original row of grid till the editing will be finished. So no savedRow parameter are used by form editing.
If the form are closed or if the server response will contains some error HTTP code the new data entered by user will be not saved in the grid. So simple server side validation is typically enough. If you want implement additional client side validation you can use editrules feature. Custom validation is typically enough. It can help validate one field of the form. If you need compare multiple fields of form during validation (if the value of one field defines valid values of another field) then one uses beforeCheckValues callback additionally.
UPDATED: Inside of fn event handler you can test whether it will be called inside of form editing or not. There are many ways to do this. For example you can test $(e.target).closest(".FormGrid").length > 0. If it's true then the event is inside of form. Additionally it's important to understand that the current editing row is not changed till successful saving on the server. So you can use any time getGridParam with "selrow" option to get the id of editing row and you can use getRowData or getCell to get the data from the grid before modification started (the same as savedrow).
I have a grid (version 4.1.1) using a subGrid. I'm using loadonce: true and scroll: 1. When the grid first loads, I can open subGrids with no problem, until I scroll the main grid down to the point where it loads more data. After that, no subgrid will open or close. If I click on the plus icon, I see the "Loading...", but nothing happens. I can't even close the subGrids that were previously opened.
Here is my grid definition:
$("#grid_sites").jqGrid({
url:'getgridxmlsites.php',
postData: {detailid: function() {return $('#hdnDetailId').val(); }},
datatype: 'xml',
height: 260,
width: 832,
shrinkToFit: false,
caption:'',
colNames :['studydetailid', 'Site', 'Name', 'Status', 'Location'],
colModel :[
{name:'detailid', index:'detailid', width:0, hidden: true },
{name:'sitenumber', index:'sitenumber', width:60, align:'right'},
{name:'name', index:'name', width:230},
{name:'status', index:'status', width:110, align:'center'},
{name:'location', index:'location', width:74}
],
pager:'pager_sites',
scroll: 1,
viewrecords:true,
sortable:true,
sortname: 'sitenumber',
autowidth: true,
pgbuttons: false,
loadonce: true,
// gridview: true, // Cannot be used when using subGrid.
onSelectRow: function(id){ gridRowSelect(id) },
subGrid: true,
subGridUrl: 'getgridxmldatabysite.php',
subgridtype: 'xml',
subGridModel: [{
name: ['Owner', 'Phone', 'Status'],
width: [120, 100, 100],
align: ['left', 'left', 'left'],
params: ['detailid']
}],
subGridOptions: { reloadOnExpand : false }
});
I hope you can help.
I am experiencing a similar problem. It looks like the addSubGrid function in jqgrid is adding a click event to toggle the subgrid to every row in the table (not just the ones that were just loaded).
This was causing the new rows to behave fine but the first set to rapidly expand and then collapse (two click handlers). When another set of data got loaded the first set of rows worked fine (although they'd expand, collapse, and expand again) but the second set no longer worked.
I got kind of lost in the combination of addJSON and addSubGrid when trying to figure out if I was missing some of the row metadata in the JSON. For now I just modified the line:
$(ts.rows[i].cells[pos]).bind('click', function(e) {
to:
$(ts.rows[i].cells[pos]).unbind('click');
$(ts.rows[i].cells[pos]).bind('click', function(e) {
and everything seems to work as expected. This is for version 4.2.0 of jqGrid. I'm still not sure if this is a bug, a configuration problem, or a data problem but at least I'm working again.
Typical the "Loading..." means an error in the processing of the server response. I recommend you to use jquery.jqGrid.src.js instead of jquery.jqGrid.min.js and to start your page in the debugger. For example you can use Developer Tools of Internet Explorer. Do do this you should press F12 to start Developer Tools, then choose "Script" and click on "Start debugging" button. Either the page will be stopped on error or you will be see some additional information in the "Colsole" on the right pane.
I personally not use scroll: 1 option because of complexity of the data processing and different known bugs or problems. It seems to me that you use incompatible combination of parameters. I would recommended you to remove either loadonce: true or scroll: 1 parameter.
In your configuration, you do not set rowNum. So I believe jqgrid will use the default rowNum which is 20. This causes the scrolling issue due to the click binding issue mentioned by Robert Simmons.
Another way to fix this issue without having to change the jqgrid code is to set the rowNum to -1. This will just get all rows, which should be fine because you are using local data. This fix may not work in previous versions to 4.6.0 however. (See How to show all rows in the jqGrid? for more info on setting rowNum to -1). In versions prior to 4.6.0 I think the main solution was to just set rowNum to a large number.
I'd like to be able to invoke the find button on the search dialog when the "Enter/Return" key is pressed. Unfortunately the 'savekey' option doesn't submit the form and the same way it does in the edit and add Form Editing.
Here's a snippet of the code I'm using.
$("#list").jqGrid('navGrid', '#pager',
{edit: true, add: true, del: true, search: true, view: true},
...
{
caption: "Search",
closeAfterSearch: true,
closeOnEscape: true,
sopt: ['cn','eq'],
savekey: [true, 13]
},
Here's a link to the form_editing documentation I've consulted:
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing&s[]=savekey
Here's a link to the Single field searching documentation:
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:singe_searching&s[]=navgrid
I can't find anything to suggest this feature exists but I seems like a no-brainer. As always, any help or direction is greatly appreciated.
It seems to me that the problem cam be solved if you replace savekey: [true, 13] option which really not work for searching to the following beforeShowSearch and onClose event handle
beforeShowSearch: function(form){
form.keydown(function(e) {
if (e.which == 13) {
$(".ui-search", form).click();
}
});
},
onClose: function(form){
form.unbind('keydown');
}
This method will work not only for the single field searching but for advance searching also.
If you want that the 'Enter' key work only in the input fields you can replace form.keydown to $('.vdata',form).keydown and make the corresponding changes in the unbind.
I had the same problem on FireFox but the above solution worked fine in IE. In order to make it work on Firefox I had to use the focus function instead of click as below:
beforeShowSearch: function (form) {
form.keydown(function (e) {
if (e.which == 13) {
$("#fbox_list_search").focus();
}
});
},
This was pretty helpful, but I'm the provided solution isn't quite working for me. I tweaked the code provided and it somewhat works now, but it doesn't appear to be submitting the correct data. Whenever I press the enter key, it submits a "0" in the input box instead of whatever I've actually put in there. For whatever reason it is not posting the searchString. The code I'm using is:
beforeShowSearch: function(form){
$(form).keydown(function(e) {
if (e.keyCode == 13) {
$("#fbox_cust_grid_search").click();
}
});
},
onClose: function(form){
$(form).unbind('keydown');
}
Do any of you guys have a suggestion as to what might be going on here?
Edit: Interesting, when I alert something out(anything) right before the .click() method, the data is posted perfectly. Any ideas?
Try the following code. Works for me:
beforeShowSearch: function(form){
$(form).keydown(function(e) {
if (e.keyCode == 13) {
setTimeout(function() {
$("#fbox_cust_grid_search").click();
}, 200);
}
});
return true;
},
onClose: function(form){
$("#fbox_cust_grid_search").unbind('keydown');
}
There seems to be an issue when the click method is called too quickly. Giving the grid 200ms to do what it has to do before searching seems to do the trick.