Javascript variable into postdata of jqGrid

Javascript variable into postdata of jqGrid - javascript

Right now I have this postData: { search: function() { return $("#search").val(); },},
I then have jQuery function above the jqGrid function that performs some logic and produces a string variable. Right now I am just taking that variable and setting the value of the search element like this:
$("#startSearch").click(function() {
$("#search").val(searchVal);
$("#grid").trigger("reloadGrid");
});
This works but I was hopping to do this differently. I want to just pass the seachVal variable that my jQuery function produces right into the postdata.
I tried it like this but its not working postData: { search: function() { return searchVal; },},
I'm getting an error that says searchVal is not defined. I made sure that the searchVal variable is global but it is still not working.
Is this possible or am I just looking at this wrong?
Any help would be great.
Thanks
UPDATE:
Here is a stripped down version of the page:
<fieldset>
<input type='text' id='search' />
<button type='button' id='startSearch'>Search</button>
</fieldset>
<script type="text/javascript">
$(function(){
$("#startSearch").click(function() {
serchVal = 'transID > "5"';
$("#search").val(serchVal);
$("#grid").trigger("reloadGrid");
});
$("#list").jqGrid({
url:'data.cfc?method=gridData',
datatype: 'json',
mtype: 'POST',
jsonReader : {
root: "rows",
page: "currentpage",
total: "totalpages",
records: "totalrecords",
repeatitems: false,
id: "0",
},
postData: { search: function() { return $("#search").val(); },},
colModel :[
{name:'transid', label:'Trans ID', width:60},
{name:'companyname', label:'Company Name', width:245},
{name:'companycode', label:'Company Code', width:245},
{name:'datasource', label:'Datasource', width:245}
],
pager: '#pager',
rowList:[10,50,100],
rowNum:'10',
height:221,
sortname: 'transid',
sortorder: 'asc',
viewrecords: true,
gridview: true,
caption: 'Get Trans',
altRows: false,
autowidth: true,
forceFit: true,
rownumbers: true,
scroll: false,
sortable: true
});
$("#list").jqGrid('navGrid','#pager',{edit:false,add:false,del:false,search:false,view:true});
});
</script>
<table id="grid"></table>
<div id="pager"></div>

I suppose the problem exist just because you didn't declared the variable serchVal (you means probably searchVal). You can try to modify the code to the following
$(function () {
var searchVal = '';
$("#startSearch").click(function () {
searchVal = 'transID > "5"';
$("#grid").trigger("reloadGrid");
});
$("#list").jqGrid({
url: 'data.cfc?method=gridData',
datatype: 'json',
mtype: 'POST',
jsonReader : {
page: "currentpage",
total: "totalpages",
records: "totalrecords",
repeatitems: false,
id: "0"
},
postData: { search: function () { return searchVal; }},
colModel: [
{name: 'transid', label: 'Trans ID', width: 60},
{name: 'companyname', label: 'Company Name', width: 245},
{name: 'companycode', label: 'Company Code', width: 245},
{name: 'datasource', label: 'Datasource', width: 245}
],
pager: '#pager',
rowList: [10, 50, 100],
rowNum: 10,
height: 221,
sortname: 'transid',
viewrecords: true,
gridview: true,
caption: 'Get Trans',
autowidth: true,
rownumbers: true,
sortable: true
}).jqGrid('navGrid', '#pager',
{edit: false, add: false, del: false, search: false, view: true});
});
After that you can remove <input type='text' id='search' />.

Why don't you just wrap your logic in a function
function SomeLogic() {
return("some logic here!");
}
which is going to be called like this:
postData: { search: function() { return SomeLogic() } },
so you just have to reload the grid
$("#startSearch").click(function() {
$("#grid").trigger("reloadGrid");
});
obviously your function SomeLogic can just return searchVal
function SomeLogic() {
return(searchVal);
}

Related

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");
});

Add/edit/delete a row in free jqGrid

I am using free jqGrid 4.12.1. I want to add, edit and delete rows in the grid and wish to make server side calls for each operation.
I have added editurl and 'actions' formatter as below,
{
name: "actions",
width: 100,
formatter: "actions",
formatoptions: {
keys: true,
editOptions: {},
addOptions: {},
delOptions: {}
}
}
I am adding 'inlineNav' as below,
$("#itemList").jqGrid('inlineNav',"#itemListPager",
{
edit: true,
add: true,
del: true,
search: true,
searchtext: "Search",
addtext: "Add",
edittext: "Edit",
deltext: "Delete"
},
{
closeOnEscape: true, //Closes the popup on pressing escape key
reloadAfterSubmit: true,
drag: true,
url: "${pageContext.request.contextPath}/billing/saveItem",
errorfunc: function (rowId, resp) {
alert(resp);
},
afterSubmit: function (response, postdata) {
if (response.responseText == "") {
$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid'); //Reloads the grid after edit
return [true, '']
}
else {
$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid'); //Reloads the grid after edit
return [false, response.responseText]//Captures and displays the response text on th Edit window
}
},
editData: {
EmpId: function () {
var sel_id = $('#itemList').jqGrid('getGridParam', 'selrow');
var value = $('#itemList').jqGrid('getCell', sel_id, '_id');
return value;
}
}
},
{
closeAfterAdd: true, //Closes the add window after add
url: "${pageContext.request.contextPath}/billing/saveItem",
afterSubmit: function (response, postdata) {
if (response.responseText == "") {
$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid')//Reloads the grid after Add
return [true, '']
}
else {
$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid')//Reloads the grid after Add
return [false, response.responseText]
}
}
},
{ //DELETE
closeOnEscape: true,
closeAfterDelete: true,
reloadAfterSubmit: true,
url: "${pageContext.request.contextPath}/billing/saveItem",
drag: true,
afterSubmit: function (response, postdata) {
if (response.responseText == "") {
$("#itemList").trigger("reloadGrid", [{ current: true}]);
return [false, response.responseText]
}
else {
$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid');
return [true, response.responseText]
}
},
delData: {
EmpId: function () {
var sel_id = $('#itemList').jqGrid('getGridParam', 'selrow');
var value = $('#itemList').jqGrid('getCell', sel_id, '_id');
return value;
}
}
},
{//SEARCH
closeOnEscape: true
}
);
The 'inlineNav' added above has no effect because no server side call is made on adding a new row or deleting existing row. The server side call is made only in case of edit, and that call too does not happen through 'inlineNav' code above. Because even if i remove 'inlineNav' code the server side call is still made to the 'editurl'.
So how can i make server side calls on adding/editing/deleting rows and also pass parameters to these calls. I will really appreciate if someone can point me to a working example somewhere. Thanks
UPDATE:-
I have removed 'actions' formatter and modified code to look as below,
<script type="text/javascript">
var dataGrid = $('#itemList');
var firstClick = true;
$(document).ready(function () {
$('#action').click(function () {
if (!firstClick) {
$("#itemList").setGridParam({datatype:'json'}).trigger("reloadGrid");
}
firstClick = false;
$("#itemList").jqGrid({
url: "${pageContext.request.contextPath}/billing/medicines",
datatype: "json",
//styleUI : 'Bootstrap',
mtype: "POST",
autowidth: true,
shrinkToFit: true,
sortname: "Id",
sortorder: "asc",
loadBeforeSend: function(jqXHR) {
jqXHR.setRequestHeader("X-CSRF-TOKEN", $("input[name='_csrf']").val());
},
postData: {
},
loadError: function (jqXHR, textStatus, errorThrown) {
alert('HTTP status code: ' + jqXHR.status + '\n' +
'textStatus: ' + textStatus + '\n' +
'errorThrown: ' + errorThrown);
alert('HTTP message body (jqXHR.responseText): ' + '\n' + jqXHR.responseText);
},
colNames: ["Id", "Item Type", "Item Code", "Unit", "Stock", "Batch No.", "Expiry Date", "Quantity Per Unit", "Price"],
colModel: [
{ name: "itemId", width: 35, align: "left", sorttype:"int", search: false},
{ name: "itemType", width: 100, align: "left", editable: true},
{ name: "itemCode", width: 120, align: "left", editable: true},
{ name: "unit", width: 70, align: "left", search: false, editable: true},
{ name: "availableQuantity", width: 55, align: "left", search: false, formatter: "number", editable: true},
{ name: "batchNumber", width: 80, align: "left", search: false, editable: true},
{ name: "expiryDate", width: 80, align: "left", search: false, sorttype: "date", editable: true, formatoptions: {srcformat:'d/m/Y', newformat:'d/m/Y'}},
{ name: "quantityPerUnit", width: 80, align: "left", search: false, formatter: "number", editable: true},
{ name: "price", width: 55, align: "left", search: false, formatter: "number", editable: true}
],
pager: "#itemListPager",
rowNum: 50,
rowList: [50, 100, 150, 200],
rownumbers: true,
rownumWidth: 25,
sortname: "id",
sortorder: "desc",
viewrecords: true,
height: '100%',
loadonce: true,
//gridview: true,
autoencode: true,
editurl: "${pageContext.request.contextPath}/billing/saveItem",
caption: "Item List",
ondblClickRow: function(rowId){}
}).navGrid('#itemListPager',{add:false,edit:false,del:true});
$("#itemList").jqGrid('filterToolbar', {autoSearch: true, stringResult: true, searchOnEnter: false, defaultSearch: 'cn'});
$("#itemList").jqGrid('gridResize', { minWidth: 450, minHeight: 150 });
var saveparameters = {
"successfunc" : null,
"url" : "${pageContext.request.contextPath}/billing/saveItem",
"extraparam" : {},
"aftersavefunc" : null,
"errorfunc": null,
"afterrestorefunc" : null,
"restoreAfterError" : true,
"mtype" : "POST"
};
var editparameters = {
"keys" : false,
"oneditfunc" : null,
"successfunc" : null,
"url" : "${pageContext.request.contextPath}/billing/editItem",
"extraparam" : {},
"aftersavefunc" : null,
"errorfunc": null,
"afterrestorefunc" : null,
"restoreAfterError" : true,
"mtype" : "POST"
};
var parameters = {
edit: true,
editicon: "ui-icon-pencil",
add: true,
addicon:"ui-icon-plus",
save: true,
saveicon:"ui-icon-disk",
cancel: true,
cancelicon:"ui-icon-cancel",
addParams : saveparameters,
editParams : editparameters
};
$("#itemList").jqGrid('inlineNav',"#itemListPager", parameters);
});
});
</script>
The sample json dada is as,
[
{"itemDetailId":1,"itemId":1,"itemType":"Medicine","itemCode":"Aler-Dryl","itemDesc":"Aler-Dryl","batchNumber":"batch1","expiryDate":"18/02/2017","unit":"tablet","subUnit":"tablet","availableQuantity":120.0,"quantityPerUnit":60.0,"price":122.0},
{"itemDetailId":2,"itemId":2,"itemType":"Medicine","itemCode":"Benadryl","itemDesc":"Benadryl","batchNumber":"batch1","expiryDate":"18/02/2017","unit":"ml","subUnit":"ml","availableQuantity":60.0,"quantityPerUnit":120.0,"price":90.0}
]
Now the url specified in editparameters and saveparameters is getting invoked on editing and adding a row respectively.
Please suggest if above approach is a good one. Also how can we set a request header before edit or save data is posted to server. And i can not find anything like deleteparameters similar to editparameters and saveparameters so that i can use delete specific parameters.
UPDATE 2:-
I could successfully set a request header before server side code is invoked on add/edit row using following code,
$.ajaxSetup({
beforeSend: function (jqXHR, settings) {
jqXHR.setRequestHeader("X-CSRF-TOKEN", $("input[name='_csrf']").val());
}});
UPDATE 3:-
Cleaned up code as per Oleg's suggestions as below. But in the strict mode i am getting JS error now - "Uncaught ReferenceError: saveparameters is not defined"
<script type="text/javascript">
$(document).ready(function () {
"use strict";
var dataGrid = $('#itemList');
var firstClick = true;
$('#action').click(function () {
if (!firstClick) {
$("#itemList").setGridParam({datatype:'json'}).trigger("reloadGrid");
}
firstClick = false;
$("#itemList").jqGrid({
url: "${pageContext.request.contextPath}/billing/medicines",
datatype: "json",
mtype: "POST",
autowidth: true,
loadBeforeSend: function(jqXHR) {
jqXHR.setRequestHeader("X-CSRF-TOKEN", $("input[name='_csrf']").val());
},
colNames: ["Id", "Item Type", "Item Code", "Unit", "Stock", "Batch No.", "Expiry Date", "Quantity Per Unit", "Price"],
colModel: [
{ name: "itemId", width: 35, align: "left", sorttype:"int", search: false, editable: false, key: true},
{ name: "itemType", width: 100, align: "left"},
{ name: "itemCode", width: 120, align: "left"},
{ name: "unit", width: 70, align: "left", search: false},
{ name: "availableQuantity", width: 55, align: "left", search: false, formatter: "number",},
{ name: "batchNumber", width: 80, align: "left", search: false},
{ name: "expiryDate", width: 80, align: "left", search: false, sorttype: "date", formatoptions: {srcformat:'d/m/Y', newformat:'d/m/Y'}},
{ name: "quantityPerUnit", width: 80, align: "left", search: false, formatter: "number"},
{ name: "price", width: 55, align: "left", search: false, formatter: "number"}
],
cmTemplate: {editable: true},
pager: true,
rowNum: 50,
rowList: [50, 100, 150, 200],
rownumbers: true,
rownumWidth: 25,
sortname: "itemType",
sortorder: "asc",
forceClientSorting: true,
viewrecords: true,
height: '100%',
loadonce: true,
//gridview: true,
autoencode: true,
editurl: "${pageContext.request.contextPath}/billing/saveItem",
caption: "Item List"
//ajaxRowOptions: { beforeSend: myTokenSetting }, loadBeforeSend: myTokenSetting where var myTokenSetting = function(jqXHR) { jqXHR.setRequestHeader("X-CSRF-TOKEN", $("input[name='_csrf']").val()); }
}).navGrid({add:false,edit:false,del:true});
$("#itemList").jqGrid('filterToolbar', {autoSearch: true, stringResult: true, searchOnEnter: false, defaultSearch: 'cn'});
$("#itemList").jqGrid('gridResize', { minWidth: 450, minHeight: 150 });
var saveparameters = {
"successfunc" : null,
"url" : "${pageContext.request.contextPath}/billing/saveItem",
"extraparam" : {},
"aftersavefunc" : null,
"errorfunc": null,
"afterrestorefunc" : null,
"restoreAfterError" : true,
"mtype" : "POST"
};
var editparameters = {
"keys" : false,
"oneditfunc" : null,
"successfunc" : null,
"url" : "${pageContext.request.contextPath}/billing/editItem",
"extraparam" : {},
"aftersavefunc" : null,
"errorfunc": null,
"afterrestorefunc" : null,
"restoreAfterError" : true,
"mtype" : "POST"
};
var parameters = {
edit: true,
editicon: "ui-icon-pencil",
add: true,
addicon:"ui-icon-plus",
save: true,
saveicon:"ui-icon-disk",
cancel: true,
cancelicon:"ui-icon-cancel",
addParams : saveparameters,
editParams : editparameters
};
$("#itemList").jqGrid('inlineNav',parameters);
$.ajaxSetup({
beforeSend: function (jqXHR, settings) {
alert('Before Row Send');
jqXHR.setRequestHeader("X-CSRF-TOKEN", $("input[name='_csrf']").val());
}});
});
});
</script>

You should examine the options of inlineNav to find out that you use absolutely wrong options:
jQuery("#grid_id").jqGrid('inlineNav', pagerid, parameters);
where parameters have the form
{
edit: true,
editicon: "ui-icon-pencil",
add: true,
addicon: "ui-icon-plus",
save: true,
saveicon: "ui-icon-disk",
cancel: true,
cancelicon: "ui-icon-cancel",
addParams: {useFormatter : false},
editParams: {}
}
You use the options of another method navGrid
jQuery("#grid_id").jqGrid('navGrid', '#gridpager', {parameters},
prmEdit, prmAdd, prmDel, prmSearch, prmView);
which allows to use form editing.
You wrote that you want to use both formater: "actions" andinlineNav. Thus you would have to provide some options of inline editing twice. I would recommend you to read [the wiki article](https://github.com/free-jqgrid/jqGrid/wiki/New-style-of-usage-options-of-internal-methods). It describes the problems with the usage of form editing usingformatter: "actions"andnavGridtogether. The usage of inline editing have very close problems. You will have to provideaddParamsandeditParamsproperties ofinlineNavand the corresponding options offormatter: "actions"` (see here). To make the code more readable and simple free jqGrid provides another form of editing options.
You can specify all inline editing options inside of inlineEditing option of jqGrid, additional specific options of inlineNav method (if required) in navOptions or in inlineNavOptions, the options of Delete operation in formDeleting and so on. Moreover reloadGrid have the option fromServer: true to restore the original value of datatype ("json", "jsonp", "xml", ...) which you used. You can use reloadGridOptions: { fromServer: true } option of form editing or formDeleting to force reloading from the server.
Moreover your existing code contains many very suspected parts with _id and EmpId. I would strictly recommend you to include the example of format of input JSON data which you use to fill the grid. If you want to use EmpId as the name of rowid why you use _id instead? The code fragment like
EmpId: function () {
var sel_id = $('#itemList').jqGrid('getGridParam', 'selrow');
var value = $('#itemList').jqGrid('getCell', sel_id, '_id');
return value;
}
shows that the current rowid seems be wrong and _id column contains correct information which you need as rowid under the name EmpId.
You can for example use prmNames: { id: "EmpId"} and to add key: true to the column _id. The property key: true in the column _id will inform jqGrid to use the value from the column _id as the rowid and prmNames: { id: "EmpId"} will rename default id property used in Edit and Delete to EmpId. Thus jqGrid will automatically send EmpId parameter with the value from _id column during Delete and Edit operations to the server.
Probably you can remove unneeded column _id from the grid too (at least if you hold the column hidden), but I need to see input data of jqGrid to say you exact options of jqGrid which you can use.
I'm sure that you can essentially reduce your existing code and make it more readable using free jqGrid options, but you have to review your existing code carefully. I suggest you to start with the usage of correct rowid and elimination of all hidden columns which you use. Free jqGrid provides additionalProperties feature which structure is very close to the structure of colModel, but the corresponding properties of input data will be saved in the local data only and not placed in DOM of the table. I can explain all more clear if you would post your existing colModel, jsonReader and example of JSON response returned from the server (1-2 rows of data with dummy data would be enough).

Apply jqgrid search filter toolbar

I am beginner in jqGrid and I have got 2 problems.
Firstly, I want to implement a search toolbar in my grid as shown in the below image.
I have done analysis and found that by using below line of code would enable the search toolbar. But I tried placing it, with no expect6ed output.
jQuery("#overviewJqGrid").jqGrid('navGrid', '#jqGridPager',
{ edit: false, add: false, del: false, search: true }, {}, {}, {}, { closeAfterSearch: true });
JS Code:
app.controller('DiscoveryOverviewCtrl', function ($scope, $rootScope, $compile, localStorageService) {
var gwdth = $("#divGrid").width();
//TODO: Find a better solution
var WebApiServerUrl = $rootScope.WebApiURL;
$('#DiscoveryReportModel').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
var reportId = button.data('id');
var machineName = button.data('machinename');
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this);
modal.find('#titleSpan').text('Machine Name / IP Address: ' + machineName)
$("#tblDiscoveryReport").jqGrid('setGridParam', { url: $rootScope.WebApiURL + "/discovery/" + reportId, datatype: "json" }).trigger("reloadGrid");
$("#tblDiscoveryReport").jqGrid({
url: $rootScope.WebApiURL + "/discovery/" + reportId,
datatype: "json",
contentType: 'application/json',
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
serializeGridData: function (postData) { return JSON.stringify(postData); },
colNames: ['Attribute Name', 'Message', 'Attribute Value'],
colModel: [
{ name: 'attributeName', width: 130 },
{ name: 'message', width: 80 },
{ name: 'attributeValue', formatter: ReportItemStatusImage, width: 40, align: 'center' }
],
loadonce: true,
width: 550,
height: 200,
rowNum: 20,
rowList: [20, 30, 50],
sortname: 'Attribute Name',
viewrecords: true,
gridview: true,
sortable: true,
mtype: 'GET',
loadBeforeSend: function (xhr) {
var authData = localStorageService.get('authorizationData');
if (authData) {
xhr.setRequestHeader("Authorization", 'Bearer ' + authData.token);
}
return xhr;} });
function ReportItemStatusImage(cellvalue, options, rowObject) {
if (cellvalue == true) {
return "<img src='/assets/img/OK.png' height='16' width='16' />";
}
else {
return "<img src='/assets/img/NOK.png' height='16' width='16' />";
}
}
});
$scope.config = {
url: $rootScope.WebApiURL + '/discovery',
datatype: "json",
contentType: 'application/json',
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
serializeGridData: function (postData) { return JSON.stringify(postData); },
width: gwdth,
height: 550,
colNames: ['ID', 'Discovery Title', 'Requested Date', 'Completed Date', 'Owner', 'Discovery Status', 'Discoverd Machines'],
colModel: [
{ name: 'id', key: true, width: 50, sorttype: 'int' },
{ name: 'discoveryTitle', width: 80 },
{ name: 'createdDateTime', width: 80, formatter: 'date', formatoptions: { srcformat: "ISO8601Long", newformat: "m/d/Y h:i:s A" } },
{ name: 'discoveryEndDate', width: 80, formatter: 'date', formatoptions: { srcformat: "ISO8601Long", newformat: "m/d/Y h:i:s A" } },
{ name: 'createdByUser', width: 80 },
{ name: 'discoveryRequestStatus', width: 80 },
{ name: 'discoverdMachinesCount', width: 80, sorttype: 'int' }
],
loadonce: true,
rowNum: 10,
rowList: [20, 30, 50],
sortname: 'id',
sortorder: "asc",
viewrecords: true,
gridview: true,
mtype: 'GET',
subGrid: true,
sortable: true,
pager: true,
viewrecords: true,
gridview: true,
mtype: 'GET',
subGridRowExpanded: function (subgrid_id, row_id) {
// we pass two parameters
// subgrid_id is a id of the div tag created within a table
// the row_id is the id of the row
// If we want to pass additional parameters to the url we can use
// the method getRowData(row_id) - which returns associative array in type name-value
// here we can easy construct the following
var subgrid_table_id;
subgrid_table_id = subgrid_id + "_t";
pager_id = "p_" + subgrid_table_id;
$("#" + subgrid_id).html("<table id='" + subgrid_table_id + "' class='scroll'></table><div id='" + pager_id + "'></div>");
$("#" + subgrid_table_id).jqGrid({
url: $rootScope.WebApiURL + '/discovery/' + row_id,
datatype: "json",
colNames: ["Id", 'Machine Name / IP Address', 'Status', 'Report'],
colModel: [
{ name: 'id', key: true, width: 50, sorttype: 'int' },
{ name: 'machineName', width: 200 },
{ name: 'isDiscovered', width: 80, edittype: 'image', formatter: isDiscoveredFormatter, align: "center", search: false },
{ name: 'id', label: 'report', formatter: reportFormatter, width: 75, fixed: true, align: 'center', search: false }
],
height: '100%',
loadonce:true,
rowNum: 10,
rowList: [20, 30, 50],
sortable: true,
sortname: 'num',
sortorder: "asc",
pager: pager_id,
loadBeforeSend: function (xhr) {
var authData = localStorageService.get('authorizationData');
if (authData) {
xhr.setRequestHeader("Authorization", 'Bearer ' + authData.token);
}
return xhr;
}
});
jQuery("#" + subgrid_table_id).jqGrid('navGrid', "#" + pager_id, { edit: false, add: false, del: false })
},
subGridOptions: {
// configure the icons from theme rolloer
plusicon: "ui-icon-triangle-1-e",
minusicon: "ui-icon-triangle-1-s",
openicon: "ui-icon-arrowreturn-1-e" },
loadBeforeSend: function (xhr) {
var authData = localStorageService.get('authorizationData');
if (authData) {
xhr.setRequestHeader("Authorization", 'Bearer ' + authData.token);
}
return xhr;
}};
var reportFormatter = function (id, cellp, rowData) {
var stateLink = "<button type=\"button\" class=\"btn btn-link\" data-toggle=\"modal\" data-target=\"#DiscoveryReportModel\" data-id=\"" + id + "\" data-machinename=\"" + rowData.machineName + "\">Report</button>";
return stateLink;
};
var isDiscoveredFormatter = function (cellvalue, options, rowObject) {
if (cellvalue == true)
return '<img src="\\assets\\img\\OK.png" height="16" width="16" />';
else
return '<img src="\\assets\\img\\NOK.png" height="16" width="16" />';
};
//Placed here
});
HTML Code:
<div class="modal fade" id="DiscoveryReportModel" tabindex="-1" role="dialog" aria-labelledby="DiscoveryReportModelLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Discovery Report</h4>
</div>
<div class="modal-body">
<div class="well with-header with-footer">
<div class="header bordered-success">
<span id="titleSpan">Some title</span>
</div>
<div id="divReportGrid">
<table id="tblDiscoveryReport"></table>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
<div class="row" ng-controller="DiscoveryOverviewCtrl">
<div class="col-xs-12 col-md-12">
<div class="widget">
<div class="widget-header bordered-bottom bordered-themeprimary">
<i class="widget-icon fa fa-tasks themeprimary"></i>
<span class="widget-caption">Discovery Overview</span>
</div>
<div id="divGrid" class="widget-body">
<ng-jq-grid id="overviewJqGrid" config="config" api="api"></ng-jq-grid>
<div id="jqGridPager"></div>
</div>
</div>
</div>
The second Problem is that, the search tool bar on other page do not work for date field columns. It do work for 'contains' and 'does not contain' where as 'equal' and other search operations leads to blank output.
I tried using srcformats described in this & referred through this document.
JS Code
$("#jQGridMonitoredMachines").jqGrid({
url: $rootScope.WebApiURL + '/getallmonitoredmachinerequests',
datatype: "json",
contentType: 'application/json',
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
colNames: ['Id', 'Machine Name', 'IP Address', 'Discovered Date', 'Agent Install Status', 'Agent Installation Date', 'Agent Status', 'Agent Version', 'Last HeartBeat Received'],
colModel: [
{ name: 'id', hidden: false, width: 20, key: true, sorttype: 'int', search: true },
{ name: 'machineName', width: 120, search: true },
{ name: 'ipAddress', width: 60, search: true },
//{ name: 'discoveredDate', width: 110, formatter: 'date', formatoptions: { srcformat: 'y-m-d', newformat: 'l, F d, Y' } },
//, searchoptions: { sopt: ['eq','ne'], dataInit : function (elem) { $(elem).datepicker({ changeYear: true, changeMonth: true, showButtonPanel: true})} } },
{ name: 'discoveredDate', width: 110, search: true, formatter: 'date', formatoptions: { srcformat: "ISO8601Long", newformat: "m/d/Y h:i:s A" } },
{ name: 'agentInstallStatus', width: 100, search: true },
{ name: 'agentInstallationDate', width: 110, search:true, formatter: 'date', formatoptions: { srcformat: "ISO8601Long", newformat: "m/d/Y h:i:s A" } },
{ name: 'agentStatusName', width: 60, search: true },
{ name: 'agentVersion', width: 50, search: true },
{ name: 'lastHeartBeatRecieved', width: 110, search:true,formatter: 'date', formatoptions: { srcformat: "ISO8601Long", newformat: "m/d/Y h:i:s A" } }
],
rowattr: function (rd) {
if (rd.agentInstallStatus != 'Completed' && rd.agentInstallStatus != 'Upgrade Completed' && rd.agentInstallStatus != 'Uninstallation Failed') {
return {
"class": "ui-state-disabled ui-jqgrid-disablePointerEvents"
};
}
},
sortname: 'id',
sortorder: 'asc',
loadonce: true,
viewrecords: true,
gridview: true,
width: gwdth,
height: 650,
sortable:true,
rowNum: 30,
rowList: [10, 20, 30],
mtype: 'GET',
multiselect: true,
multipleSearch: true,
pager: "#jqGridPager",
What I have to do more in order to get the appropriate functionality working?

When will be executed the code $("#overviewJqGrid").jqGrid('navGrid', '#jqGridPager', ...);? You should validate that it will be executed after the grid is created using to solve your first problem.
It's strictly recommended to use idPrefix for subgrid data to prevent id duplicates (for example idPrefix: "s_" + row_id + "_").
it's probably more effectively to load subgrid data together with the main data
If $('#DiscoveryReportModel').on('show.bs.modal', ... could be called more as once then you should include call of GridUnload instead of setGridParam. It's important to understand that $("#overviewJqGrid").jqGrid({...}) will convert empty <table id="overviewJqGrid"></table> to relatively complex structure of divs and tables. Thus one have two main options to refresh the data on the next call: either setGridParam to change some options and trigger "reloadGrid" or destroying previously created grid using GridUnload and creating new grid in the same place after that using $("#overviewJqGrid").jqGrid({...}). The usage of setGridParam before $("#overviewJqGrid").jqGrid({...}) will not work together.
The last problem with searching for date using "equal" operation seems to me as absolutely separate problem. You use full datetime as the input data and displays there in "m/d/Y h:i:s A" format. It very uncomfortable for the user to type full date with time. The existence of milliseconds in the input data could makes additional problem. The solution could heavy depend on your exact requirements and on the fork of jqGrid which you use. I develop free jqGrid fork since about one year. I implemented custom sorting operations, which allows you to define exactly how you need to compare the data. You can for example compare the dates using Date only "equal" where you compare only the date part ignoring the time part. The old demo, which I created for the old issue demonstrates the feature. One can type (or choose) "04/15/2015" in the demo and the filtered data will be tree lines with "4/15/2015 9:15:40 PM", "4/15/2015 3:31:49 PM" and "4/15/2015 12:00:00 AM":
Finally I want to include one more reference to the old answer which demonstrates the usage of jqGrid with respect of directive of anguler. Probably the example would be helpful for you too.

In inline editing in jqgird how to check whether any row is selected or not?

In inline editing in jqgird how to check whether any row is selected or not?
I want to display error message "Please select a row!" when user click on edit without selecting any row.
#Oleg here is the code:
gridobject.jqGrid({
url: getUrl,
datatype: 'json',
mtype: 'Get',
colNames: arryDisplayCol,
colModel: arryColSettings,
pager: jQuery(pPagerName),
rowNum: 20,
rowList: [20, 40, 80, 100],
height: '100%',
viewrecords: true,
loadonce: false,
grouping: false,
caption: caption,
emptyrecords: 'No records to display',
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
Id: "0",
},
sortable: {
update: function (relativeColumnOrder) {
var grid = gridobject;
var currentColModel = grid.getGridParam('colModel');
$.ajax({
url: urls.Common.ArrangeGridOrder,
type: 'POST',
data: JSON.stringify(currentColModel),
contentType: 'application/json; charset=utf-8',
success: function (response) {
},
error: function (xhr, status, error) {
}
});
}
},
autowidth: true,
shrinkToFit: true,
multiselect: IsCheckbox,
editData: myData,
sortname: arrColSettings[0].name,
editurl: urls.Admin.ProcessRequest,
serializeRowData: function (postdata) {
var tableNames = $("#grdData").getGridParam('caption').replace(' List', '');
var columnNames = $("#grdData").getGridParam('colNames');
var colNames = columnNames.toString();
for (var i = 0; i < columnNames.length; i++) {
var colName;
if (columnNames[i] == "Id") {
colName = "Id"
}
}
if (!colName) {
colName = columnNames[1].toString();
}
var sel_id = $("#grdData").getSelectedRowsIds();
rowData = jQuery("#grdData").getRowData(sel_id);
var colValue = rowData[colName];
return { x01: JSON.stringify(postdata), x02: tableNames, x03: colNames, x04: JSON.stringify(jsonType), x05: colName, x06: colValue };
},
reloadAfterSubmit: true,
}).navGrid(pPagerName, {
edit: false,
add: false,
del: false,
search: false,
refresh: true,
refreshtext: "Refresh",
beforeRefresh: function () {
var tableName = $("#grdData").getGridParam('caption').replace(' List', '');
ReloadGrid(tableName);
},
});
gridobject.jqGrid('inlineNav', pPagerName,
{
edit: true,
editicon: "ui-icon-pencil",
add: true,
addicon: "ui-icon-plus",
save: true,
saveicon: "ui-icon-disk",
cancel: true,
cancelicon: "ui-icon-cancel",
editParams: {
keys: false,
oneditfunc: null,
successfunc: function (val) {
if (val.responseText != "") {
var tableName = $("#grdData").getGridParam('caption').replace(' List', '');
ReloadGrid(tableName);
}
},
url: null,
aftersavefunc:null,
errorfunc: null,
afterrestorefunc: null,
restoreAfterError: true,
mtype: "POST",
alertcap: "Warning",
alerttext: "Please, select row"
},
addParams: {
useDefValues: true,
addRowParams: {
keys: true,
extraparam: {},
successfunc: function (val) {
if (val.responseText != "") {
var tableName = $("#grdData").getGridParam('caption').replace(' List', '');
ReloadGrid(tableName);
}
}
}
}
}
);

inlineNav automatically tests whether the row is selected or not. If the row is not selected then the message with the text "Please, select row" will be displayed. The default text come from $.jgrid.nav.alerttext defined in grid.locale-en.js file or other language file which you use. If your problem is in requirement of modification of the default text "Please, select row" to "Please select a row!" then you should use alerttext option of navGrid (the options should be defined on the same level as refreshtext: "Refresh").

extra parameters in delete action of JQgrid

I want to pass extra parameters like action=delete
jQuery(grid_selector).jqGrid({
url: '<?php echo A_CLIENT_URL?>/getClientAppointment/<?= $userdata['U_ID']?>',
datatype: "json",
mtype: 'POST',
colNames:['Actions','Service Provider','Service','Created Date','Status','',],
height: 250,
colModel:[
{name: 'myac', index: '', width: 80, fixed: true, sortable: false, resize: false,
formatter: 'actions',
formatoptions: {
keys: true,
delOptions: {recreateForm: true, beforeShowForm: beforeDeleteCallback},
editbutton:false,
}
},
{name:'USERNAME',index:'USERNAME', width:100,},
{name:'S_BUSINESSNAME',index:'S_BUSINESSNAME', width:100,},
{name:'A_CREATED_DATE',index:'A_CREATED_DATE', width:100,},
{name:'A_STATUS',index:'A_STATUS', width:100,},
{name:'A_ID',index:'A_ID',hidden:true,key:true},
],
using this code I get ope=del and id default but I want more extra parameters, who knows this help me out.

try this code
{name: 'myac', index: '', width: 80, fixed: true, sortable: false, resize: false,
formatter: 'actions',
formatoptions: {
keys: true,
delOptions: {recreateForm: true, beforeShowForm: beforeDeleteCallback,url: 'abc.php?action=delete'},
editbutton:false,
}
},

delOptions allows you to specify any option or callback of delGridRow. So you can use for example
delData: { action: "delete" }
You should include the value inside of formatoptions.delOptions which you use.

One example that works for me:
...
$('#jqGrid').navGrid('#jqGridPager',
{
edit: true,
add: true,
del: true,
search: false,
refresh: false,
view: false,
position: "left",
cloneToTop: false
},
{
editCaption: "Editar",
editData:
...
},
{
editCaption: "Delete",
width: "500",
delData: {
your_variable: function() {
id = $('#jqGrid').jqGrid('getCell', $('#jqGrid').jqGrid('getGridParam', 'selrow'), 'login_id');
return id;
},
another_variable: function() {
return "something...";
}
},
...
}
...
'login_id' is variable that was defined in colModel.
'your_variable' or 'another_variable' is variables that you will take in your php script, for example. ( $_POST["another_variable"] )
That's it.

Develop Reference

JavaScript is the programming language of the Web.

Javascript variable into postdata of jqGrid - javascript

Related

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

Add/edit/delete a row in free jqGrid

Apply jqgrid search filter toolbar

In inline editing in jqgird how to check whether any row is selected or not?

extra parameters in delete action of JQgrid

Categories

Resources