Develop Reference

How to set grid post param dynamically and trigger reload with the new URL?

I have the following jQgrid Free (version: 4.15.2) definition:
$(document).ready(function () {
var $load_form = $("#load_form"),
$form_id = sessionStorage.getItem('form_id') === null ? 1 : sessionStorage.form_id,
$questions_grid = $("#questions");
$(document).on("click", $load_form, function (ev) {
// get the new form_id value and reload the grid by passing
// the new form_id as post parameter for the AJAX request
});
$questions_grid.jqGrid({
url: '/ajax/questions/get/' + $form_id,
datatype: "json",
colNames: ['id', 'grid_id', 'seq', 'type', 'text'],
colModel: [
{name: 'field_id', index: 'id', width: 100, editable: false, editoptions: {readonly: true, size: 10}},
{name: 'grid_id', index: 'grid_id', width: 50, editable: false, editoptions: {readonly: true, size: 10}},
{name: 'field_seq', index: 'seq', width: 45, editable: true, editoptions: {size: 10}},
{name: 'type', index: 'type', width: 125, editable: false, editoptions: {readonly: true, size: 10}},
{
name: 'field_name',
index: 'text',
width: 585,
editable: true,
edittype: "textarea",
editoptions: {rows: "5", cols: "45"}
}
],
autowidth: true,
iconSet: "fontAwesome",
rowNum: 100,
guiStyle: "bootstrap",
pager: 'questions_pager',
pgbuttons: false,
pginput: false,
sortname: 'seq',
viewrecords: true,
caption: "Questions",
width: 100,
height: "auto",
editurl: 'ajax/questions/edit',
multiselect: true,
subGrid: false,
subGridUrl: 'ajax/questions/get_options',
subGridModel: [{name: ['id', 'text', 'is required'], width: [55, 200, 20]}],
gridComplete: function () {
// Don't need the +1 because it includes ".jqgfirstrow"
var seq_number = this.rows.length;
$("#next_seq_num").val(seq_number);
$("#field_seq").empty();
$("#grid_field_seq").empty();
for (var i = 1; i <= seq_number; i++) {
var sel = (i == seq_number) ? 'selected' : null;
$("#field_seq").append("<option " + sel + ">" + i + "</option>");
$("#grid_field_seq").append("<option " + sel + ">" + i + "</option>");
}
$(window).trigger('resize');
},
onSelectRow: function (ids) {
if (ids !== null) {
$("#option_field_id").val(ids);
$(".field_seq_section").hide();
$.ajax({
type: "POST",
url: "ajax/questions/get_grid_example/" + ids,
success: function (msg) {
if (msg !== "") {
jQuery('#options_ids').empty();
}
jQuery('#grid_cells_example').html(msg);
}
});
edit_question("<?php echo site_url('ajax/questions/get_by_id') ?>/" + ids, false);
}
}
}).jqGrid('hideCol', 'cb');
});
At some point and dynamically I am setting the value of the property data-formid for $("#load_form"). Since $("#load_form") is a button (see definition below) I would like to trigger the reloadGrid event using the new $formid value so I get a new fresh data from the DB.
<button type="submit" class="btn btn-default" data-formid="" id="load_form">
Load form
</button>
In a few logical steps:
Set the value for data-formid
Click on the button
Trigger reloadGrid with $("#load_form").data("formid")
I have found this: how to set postData in jqgrid AFTER it has been constructed? but I am not sure how to apply on my scenerio.
How I can achieve this?

If I understand you correctly you want to change url parameter. The code of the click-event handler could be close to the following:
$(document).on("click", $load_form, function (ev) {
var p = $questions_grid.jqGrid("getGridParam");
p.url = "/ajax/questions/get/" + $("#load_form").data("formid");
$questions_grid.trigger("reloadGrid");
});

Define custom sorting on free jqgrid

I have a column called InterestedValue, where I would like to allow sorting, by the label of the dropdown.
I found similar questions and I implemented the recommended solution, but it does not work.
Essentially, nothing happens, the applications behaves exactly like before we added the custom sorttype. Even adding alerts in it, nothing happens, get no errors, or anything.
{
name: 'InterestedValue', editable: true, sortable: true, formatter: 'select', width: 110, search: false, edittype: 'select',
editoptions: {
value: InterestedStatusList,
},
sorttype: function (cellvalue)
{
return InterestedStatusList[cellvalue];
}
}
I added the loadonce: true as suggested, and now I can sort the data correctly, but when I have more records than the ones shown in the first screen, I cannot visualize them.
My code is:
$(gridId).jqGrid(//'setGroupHeaders',
{
url: actionMethod,
shrinkToFit: false,
datatype: 'json',
mtype: 'GET',
loadonce: true,
//sortable: true,
colNames: [MyColumns],
colModel: [
{MyModel }
],
pager: jQuery(pagerId), //jQuery('#pager'),
rowNum: 10,
rowTotal: 2000,
rowList: [10, 20, 30, 40],
height: '100%',
//width:700,
viewrecords: true,
caption: caption,
emptyrecords: 'No records to display',
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
Id: "0"
},
//autowidth: true,
multiselect: false,
gridview: true,
editurl: '/InvestorList/Edit',
onSelectRow: function (id) {
if (id) {
$(gridId).jqGrid("editRow", id, true, '', '', '', '', reload)
//ORIGINAL CODE: $(gridId).editRow(id, true,'', '', '', '', reload);
lastSelectedId = id;
}
},
serializeRowData: function (postdata) {
//var response = JSON.stringify(postdata);
var s = '';//'<select>';
$(postdata).each(function (index, data) {
//s += '<option value="' + index + '">' + data + '</option>';
$.each(data, function (k, v) {
if (k == "InterestedValue")
s += v;//'<option value="' + k + '">' + v + '</option>';
});
});
//alert("s=" + s);
if (s.indexOf("100010002") != -1) { //"2_1") {
if (confirm('Are you sure you want to deactivate this record? ')) {
// do things if OK
return postdata;
}
else
return false;
}
return postdata;
},
Essentially I see the first ten records, and I have no way of accessing the remaining ones.
How can I fix this?

free-jqGrid search button does not work on second click

The search button works on the first click, but once it is closed either by clicking the X (close button) or by running a search (setting to close after search) it does not open, there are also no errors in the console so I am unable to determine what is wrong and how to fix it.
var previouslySelectedRow = null;
var rowIsSelected = null;
var previousRowIsSelected = null;
var currentRowId;
var currentCount;
var cancelEditing = function(theGrid) {
var lrid;
if (typeof previouslySelectedRow !== "undefined") {
// cancel editing of the previous selected row if it was in editing state.
// jqGrid hold intern savedRow array inside of jqGrid object,
// so it is safe to call restoreRow method with any id parameter
// if jqGrid not in editing state
theGrid.jqGrid('restoreRow', previouslySelectedRow);
// now we need to restore the icons in the formatter:"actions"
lrid = $.jgrid.jqID(previouslySelectedRow);
$("tr#" + lrid + " div.ui-inline-edit").show();
$("tr#" + lrid + " div.ui-inline-save, " + "tr#" + lrid + " div.ui-inline-cancel").hide();
}
};
var parsedResult = JSON.parse(DecodeAscii(result));
ShowDebugNotification("DEBUG INFO(" + ajaxCall + "): <br />" + result, false);
$("#productsTable").jqGrid({
data: parsedResult,
datatype: "local",
loadonce: true,
height: 'auto',
marginLeft: 'auto',
colNames: [
'Product Id', 'Add', 'Product Name', 'Product Code', 'Customer Price'
],
colModel: [
{ name: 'Id', width: 0, hidden:true },
{ name: "actions", template: "actions", width: 50, formatoptions:{
delbutton: false,
editbutton: false
} },
{ name: 'Name', index: 'Name', width: 550, search: true, searchoptions:{sopt:['eq','bw','bn','cn','nc','ew','en']} },
{ name: 'ProductCode', index: 'ProductCode', width: 150, search: true, searchoptions:{sopt:['eq','bw','bn','cn','nc','ew','en']} },
{ name: 'Price', index: 'Price', width: 100, search: false, formatter: 'currency', formatoptions:{decimalSeparator:".", thousandsSeparator: ",", decimalPlaces: 2, prefix: "$"}}
],
rowNum: 15,
rowList: [5, 10, 15, 20],
pager: true,
gridView: true,
viewrecords: true,
iconSet: "jQueryUI",
sortname: 'Name',
sortorder: 'asc',
inlineEditing: { keys: false },
actionsNavOptions: {
addToCarticon: "ui-icon-cart",
addToCarttitle: "Add item to the cart",
custom: [
{ action: "addToCart", position: "first", onClick: function (options) {
var rowData = $('#productsTable').getRowData(options.rowid);
var cartButton = $(".ui-icon", "#jAddToCartButton_"+options.rowid);
if(cartButton.hasClass("ui-icon-cancel")){
cart.shift(rowData);
cartButton.removeClass("ui-icon-cancel");
cartButton.addClass("ui-icon-cart");
}
else if(cartButton.hasClass("ui-icon-cart")){
cart.push(rowData);
cartButton.removeClass("ui-icon-cart");
cartButton.addClass("ui-icon-cancel");
}
}
}]
},
loadComplete: function() {
$("#add-product-dialog-loading-message").hide();
$(".spinner").hide();
$("#add-product-dialog-form").dialog("open");
//for each object in cart
//if prodcut ID matches product Id in product
//grid then set button to a cancel icon
if(cart.length !== 0){
var cartIds = [];
var jsonCart = JSON.stringify(cart);
var parsedJsonCart = JSON.parse(jsonCart);
var productsInCart = $.grep(parsedJsonCart, function(el, i){
cartIds.push(el.Id);
});
var currentRows = $('#productsTable').getRowData();
var shownProductsThatAreInCart = $.grep(currentRows, function (el, i) {
return $.inArray(el.Id, cartIds) !== -1;
});
if(shownProductsThatAreInCart.length > 0){
var rowIds = $(this).jqGrid('getDataIDs');
$.each(rowIds, function(k, v) {
rowData = $('#productsTable').getRowData(v);
if($.inArray(rowData['Id'], cartIds) !== -1){
alert("Matched Product:\nRowData['id'] = " + rowData['Id'] + "\nto\nProduct in cart: " + cartIds.Id);
$(".ui-icon", "#jAddToCartButton_"+v).removeClass("ui-icon-cart");
$(".ui-icon", "#jAddToCartButton_"+v).addClass("ui-icon-cancel");
}
});
}
}
},
gridComplete: function() {
}
});
$("#productsTable").jqGrid("navGrid", {edit:false,add:false,del:false},
{},// use default settings for edit
{},// use default settings for add
{},// delete instead that del:false we need this
{multipleSearch:false,overlay:false,ignoreCase:true,closeAfterSearch:true,closeOnEscape:true,showQuery:true});
I don't think its a bug as I have seen many demos demonstrating how it is supposed to work, I am guessing I have a mis-configuration, please have a look over my code and help determine the issue.
One thing to keep in mind is I am getting the data to load the grid via an ajax call that returns json, all manipulation is done on the client, there is no posting data back to server at all.
Thank you!

The main problem is the combination of Searching options which you use:
{
multipleSearch: false, // it's default and can be removed
overlay: false, // !!! the option make the problem
ignoreCase: true, // it's not exist at all
closeAfterSearch: true,
closeOnEscape: true,
showQuery: true
}
The usage of the option overlay: false is bad because it makes another option toTop: true not working and the Searching dialog will be placed as the children of jQuery UI Dialog. If you remove the option then one can work with the Searching Dialog more easy and the second problem (a bug in calculation of position of jqGrid Searching Dialog) will not exist. Look at the modified demo:
https://jsfiddle.net/OlegKi/su7mf5k9/3/
UPDATED: It seems one have the problem in creating modal jqGrid dialog inside of modal jQuery UI dialog. The problem could be solved by removing modal: true option from the outer jQuery UI dialog. See https://jsfiddle.net/OlegKi/su7mf5k9/3/
In general one could create hybrid solution which changes the type of jQuery UI dialog from modal to non-modal dynamically, but it could be tricky https://jsfiddle.net/OlegKi/su7mf5k9/5/

jqGrid get cell data into delOptions property

I have a colModel column that when a user presses the button, it will delete the row. However, I need this to go to the server (which is does) and delete it from the database using the row's ID.
This is the code that does it
colModel: [
...
{ name: 'id', index: 'Id', width: 70, hidden: true, editable: true,
{
name: 'actions', index: 'actions', width: 20, sortable: false, editable: false, formatter: imageFormat,
formatoptions: {
keys: true,
editbutton: false,
// I need to pass id from above into the server....this is what should happen here
delOptions: { url: Controller + 'Action?paramenter=' + id}
}
},
],
The problem is that I need to get the value of the id column and pass it in the parameter like above.
How can this be done?
Thanks

Ok I didnt use delOptions I used the .jqGrid('delGridRow') method inside the onSelectRow property,
and to get the id I used..
var myGrid = $('#grid'),
selRowId = myGrid.jqGrid('getGridParam', 'selrow'),
celValue = myGrid.jqGrid('getCell', selRowId, 'name');
So therefore...
jQuery("#resume").jqGrid('delGridRow', id, { height: 480, width: 400, closeAfterAdd: true, closeAfterEdit: true, recreateForm: true,url: Controller + 'Action?paramenter=' + celValue });

with the loadComplete() method, you can do like this:
$(table).find(".ui-inline-del").each(function() {
var delDivBtn = $(this);
var id_reg = /(\w+)([_]{1})(\w+$)/;
// remove the delete event
$(delDivBtn).removeAttr("onclick");
// add new click event
$(delDivBtn).click(function() {
var rowid = delDivBtn.attr("id").replace(id_reg, '$3');
alert(rowid);
});
});

Obtaining data from jqgrid on mouseover

I'm trying to do a mouseover for the jquery and when the mouse is hovered over a certain row I can get the id from that row and populate information and display an image. However, I have been having the hardest time trying to do so.
Here is what I want to happen
Just like in the onSelectRow where I obtain the data using the following code
var ret = $('#list').jqGrid('getRowData', Id);
I want to use when I do a mouseover. However, I don't see a way of doing this. I tried the following under gridComplete
gridComplete: function() {'.jqgrow').mouseover(function(e) {
var rowId = $('.jqgrow').parent(tr:first).attr('id');
alert("You rolled over " + rowId.Id);
});
}
but it only gave me the ide number of the row of that table inside the jqgrid and I need the data from that row instead.
For instance, in my data I have Id, FirstName, LastName, FullName, Title, SortID
I would like to present a picture on the right side of my HTML page when hovered over certain rows by passing the Id to the HTML page, and querying through an array. If I can some how get the actual Id that's within my dataset I can do the rest.
Any help would be lovely.
I have given the entire code of my jqGrid at the bottom for reference.
jQuery("#list").jqGrid({
url: '/Providers/DynamicGridData/',
datatype: 'json',
mtype: 'GET',
colNames: ['Id', 'LastName', 'FirstName', 'FullName', 'Title', 'Url', 'SortId'],
colModel: [
{ name: 'Id', index: 'Id', width: 30, align: 'left', hidden: true },
{ name: 'LastName', index: 'LastName', width: 30, align: 'left', hidden: true },
{ name: 'FirstName', index: 'FirstName', width: 30, align: 'left', hidden: true },
{ name: 'FullName', index: 'FullName', width: 100, align: 'left' },
/*{ name: 'FirstName', index: 'FirstName', width: 100, align: 'left' },*/
{name: 'Title', index: 'Title', width: 200, align: 'left' },
{ name: 'Url', index: 'Url', width: 30, align: 'left', hidden: true },
{ name: 'SortId', index: 'SortId', width: 30, align: 'left', hidden: true}],
pager: jQuery('#pager'),
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname: 'Id',
scrollOffset: 0,
width: '425',
altRows: 'true',
altClass: 'ui-priority-secondary',
autowidth: 'true',
height: '300',
altRows: 'true',
altClass: 'ui-priority-secondary',
viewrecords: true,
caption: 'Clinical Providers',
onSelectRow: function() {
var Id = $("#list").jqGrid('getGridParam', 'selrow');
if (Id) {
var ret = $('#list').jqGrid('getRowData', Id);
var url = ret.Url;
url.split(' ').join('');
//alert("id=" + ret.Id + "FullName=" + ret.FullName + "...");
window.location = "/" + url;
}
else { alert("Please select a row"); }
},
gridComplete: function() {
$('.jqgrow').mouseover(function(e) {
var rowId = $('.jqgrow').
alert("You rolled over " + rowId.Id);
});
}
});

I'm trying this code and it works fine:
gridComplete: function() {
$('.jqgrow').mouseover(function(e) {
var rowId = $(this).attr('id');
alert('You rolled over ' + rowId);
});
}

I am confused - when you say:
var rowId = $('.jqgrow').parent(tr:first).attr('id');
That should be returning the ID of the row. You can then pass rowID to the getRowData method to retrieve additional data for the row.

try this code..this code work...
this code retrieve jqgrid row object ..
$('.jqgrow').mouseover(function(e) {
var rowId = $(this).attr('id');
var dataFromTheRow = jQuery("#list").jqGrid('getRowData',rowId);// this is your jqgrid row object;
alert('your jqgrid row object id = ' + dataFromTheRow.id);
});