infragistics igGrid in a dialog box does not take user's input - dialog

I have an application using infragistics asp.net web grid. In the main page, Grid is displayed no problem. user can select a row from main grid, from there a dialog box pops up where a second grid is. The second grid just display the details of user-selected grid one's row.
Now I have a problem in the second grid, where user couldn't modify any existing values. I counld't find out anything I did differently in the second grid from first grid. see my code:
<script type="text/javascript">
$(document).ready(function () {
$.ig.loader({
scriptPath: "js/",
cssPath: "css/",
resources: "igGrid.*"
});
$.ajax({
type: "POST",
url: "Default.aspx/LoadA",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
error: function (result) {
alert(result.d); }
});
function OnSuccess(result) {
$.ig.loader(
function () {
var jsonLocal = new $.ig.JSONDataSource({ dataSource: result.d, responseDataKey: "d" });
$("#tblMain").igGrid({
dataSource: jsonLocal,
autoGenerateColumns: false,
renderCheckboxes: true,
width: "100%",
height: "100%",
primaryKey: "ColA",
columns: [
{ key: "ColA", headerText: "ColA", dataType: "number" },
{ key: "ColB", headerText: "ColB",ataType: "string" }],
features: [
{ name: "Updating",
editMode: "row",
columnSettings: [
{ columnKey: "ColA", readOnly: true } ]
},
{ name: "Resizing",
deferredResizing: false,
allowDoubleClickToResize: true
},
{
name: "Filtering",
allowFiltering: true,
caseSensitive: false,
type: "local"
},
{
name: "Selection",
mode: "row",
cellSelectionChanging: igGridCellSelectionChanged
}
] //end feature
}) //end igGrid
} //end function
) //end loader
} //end onSuccess
$("#tblMain").on("iggridselectionrowselectionchanged", igGridCellSelectionChanged);
function igGridCellSelectionChanged(event, ui) {
var ColA = ui.row.element[0].cells[0].innerText;
$.ajax({
type: "POST",
url: "Default.aspx/LoadB",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: '{ColA:"' + ColA+ '"}',
success: OnAttachments,
error: function (result) {
alert(result.d);
}
});
};
function OnAttachments(result) {
$.ig.loader(function () {
$.ig.loader(function () {
var jsonLocal = new $.ig.JSONDataSource({ dataSource: result.d, responseDataKey: "d" });
$("#tblAttachment").igGrid({
dataSource: jsonLocal,
width: "800",
height: "80%",
autoGenerateColumns: false,
primaryKey: "UId",
columns: [
{ key: "Col1", headerText: "Col1", dataType: "number", width: "50px" },
{ key: "Col2", headerText: "Col2", dataType: "string", width: "100px" }
],
fixedHeaders: true,
showHeader: true,
features: [{ name: "Updating"}]
});
});
});
};
$('#dialog').dialog({
modal: true,
autoOpen: false,
closeOnEscape: false,
width: 800,
height: 500,
buttons: [{ text: "OK",
click: function () {
$("#dialog").dialog("close");
}
}] //end buttons
}); //end dialog
})
</script>
<body>
<div class="page">
<table>
<tr><td>
<table id="tblMain" border="1" align="center"></table>
</td></tr>
<tr><td>
<table>
<tr>
<td align="right">
<button id="btnAttach" class="button">
Additional Info</button>
</td>
</tr>
</table>
</td></tr></table>
<div id="dialog" title="Attach Contracts">
<table><tr><td>
<table id="tblAttachment" border="1" align="center">
<tr><td></td></tr>
</table>
</td></tr></table>
</div>
</div>
</body>


I think the problem is caused by changing the focus from input to that dialog. Just set trackFocus property to false.
//Initialize
$(".selector").igDialog({
trackFocus: false
});

Related

express handlebars template wont render partial

this problem has got me almost depressed..
not so long ago this whole app worked but recently (probably more than 3 months, perhaps 6) one of my routes refuses to render any handlebars template I pass it, including ones that are rendering successfully via other routes.
this is the offending route:
app.get('/ListContentItems', function (req, res, next) {
try{
getAuthToken().then(authToken =>{
axios({
method:"get",
// url: "https://"+cmsEnvironment+"/content-repositories/"+respositoryId+"/content-items?page="+req.params.page+"&size="+req.params.size,
url: "https://"+cmsEnvironment+"/content-repositories/"+respositoryId+"/content-items?page=0&size=2",
headers:{
"Authorization": "Bearer " + authToken
}
})
.then(response => {
var contentGraph = response.data;
var stringContent = JSON.stringify(response.data,null,'\t');
console.log(stringContent);
res.render("list-content-items",{
static_path:'/static',
theme:process.env.THEME || 'flatly',
pageTitle : "List Content Items",
pageDescription : "List Content Items",
reqParams : req.query,
contentGraph : contentGraph._embedded,
stringContent : stringContent
})
// res.render('list-content-items',{static_path:'/static','pageTitle':'List Content Items - Success','contentGraph': contentGraph._embedded, 'stringContent' : stringContent, 'reqParams': req.query});
})
.catch(error => {
console.log(error);
res.render('list-content-items',{'pageTitle':'List Content Items - Fail','reqParams': req.query, 'error':error});
});
})
.catch(error => {
console.log(error);
next(error);
})
}
catch (e) {
next(e)
}
/* res.render('list-content-items',{title:"List Content Items",error:"figure out how to authorize so that i can list the content items and create links.."}) */
})
this is the template:
{{> header }}
{{#each contentGraph }}
{{#each this}}
{{log this}}
{{this.id}}
{{#each this}}
{{#if (eq this._meta.schema 'http://www.coops.net/draping-config')}}
{{this.label}}<br />
{{else if (eq this._meta.schema 'http://c1-qa.adis.ws/c/cmslabs/content-stack')}}
{{this.label}}<br />
{{else}}
{{this.label}}<br />
{{/if}}
{{/each}}
{{/each}}
</div>
{{/each}}
{{> footer }}
this is the log output:
{ id: '3fae61b6-56ef-4c31-9c53-40f45131b435',
contentRepositoryId: '5c5c64adc9e77c0001d73a22',
folderId: null,
body:
{ _meta:
{ name: 'Image Block 2',
schema: 'http://c1-qa.adis.ws/c/cmslabs/image-block' },
image:
{ _meta: [Object],
id: 'b7a1bced-e921-42ab-baef-b5aa43cd3701',
name: 'Fashion_Womens_Collection_SSS',
endpoint: 'bccdemo',
defaultHost: 'i1.adis.ws' },
editorial:
{ callToAction: [Object],
useParentAsCtaHotspot: false,
title: 'This coat is far too big',
text: 'but it\'s trendy',
overlayAlignment: 'Top Left',
overlayTheme: 'Darken',
alignCopyText: 'center' },
aspectRatio: { w: 4, h: 3 } },
version: 1,
label: 'Image Block 2',
status: 'ACTIVE',
createdBy: '2f38a1a9-c76d-4f34-91fa-652d09b6eede',
createdDate: '2020-08-11T13:45:50.420Z',
lastModifiedBy: '2f38a1a9-c76d-4f34-91fa-652d09b6eede',
lastModifiedDate: '2020-08-12T19:39:12.261Z',
lastPublishedVersion: 1,
lastPublishedDate: '2020-08-12T19:39:11.301Z',
deliveryId: '3fae61b6-56ef-4c31-9c53-40f45131b435',
_links:
{ self:
{ href:
'https://api.amplience.net/v2/content/content-items/3fae61b6-56ef-4c31-9c53-40f45131b435' },
'content-item':
{ href:
'https://api.amplience.net/v2/content/content-items/3fae61b6-56ef-4c31-9c53-40f45131b435{?projection}',
templated: true },
publish:
{ href:
'https://api.amplience.net/v2/content/content-items/3fae61b6-56ef-4c31-9c53-40f45131b435/publish' },
planned:
{ href:
'https://api.amplience.net/v2/content/content-items/3fae61b6-56ef-4c31-9c53-40f45131b435/planned{?epoch,time}',
templated: true },
update:
{ href:
'https://api.amplience.net/v2/content/content-items/3fae61b6-56ef-4c31-9c53-40f45131b435' },
'restore-version':
{ href:
'https://api.amplience.net/v2/content/content-items/3fae61b6-56ef-4c31-9c53-40f45131b435/restore' },
'content-repository':
{ href:
'https://api.amplience.net/v2/content/content-repositories/5c5c64adc9e77c0001d73a22' },
'content-item-version':
{ href:
'https://api.amplience.net/v2/content/content-items/3fae61b6-56ef-4c31-9c53-40f45131b435/versions{/version}',
templated: true },
'content-item-versions':
{ href:
'https://api.amplience.net/v2/content/content-items/3fae61b6-56ef-4c31-9c53-40f45131b435/versions{?page,size,sort}',
templated: true },
'content-item-history':
{ href:
'https://api.amplience.net/v2/content/content-items/3fae61b6-56ef-4c31-9c53-40f45131b435/history{?page,size,sort}',
templated: true },
copy:
{ href:
'https://api.amplience.net/v2/content/content-repositories/{id}/content-items?sourceContentItemId=3fae61b6-56ef-4c31-9c53-40f45131b435',
templated: true },
unarchive:
{ href:
'https://api.amplience.net/v2/content/content-items/3fae61b6-56ef-4c31-9c53-40f45131b435/unarchive' },
archive:
{ href:
'https://api.amplience.net/v2/content/content-items/3fae61b6-56ef-4c31-9c53-40f45131b435/archive' },
'set-locale':
{ href:
'https://api.amplience.net/v2/content/content-items/3fae61b6-56ef-4c31-9c53-40f45131b435/locale' },
'create-localizations':
{ href:
'https://api.amplience.net/v2/content/content-items/3fae61b6-56ef-4c31-9c53-40f45131b435/localize' },
localizations:
{ href:
'https://api.amplience.net/v2/content/content-items/3fae61b6-56ef-4c31-9c53-40f45131b435/localizations{?page,size,sort}',
templated: true },
'localization-jobs':
{ href:
'https://api.amplience.net/v2/content/localization-jobs/search/findByRootContentItem?id=3fae61b6-56ef-4c31-9c53-40f45131b435{&page,size,sort}',
templated: true },
'edition-slot-associations':
{ href:
'https://api.amplience.net/v2/content/content-items/3fae61b6-56ef-4c31-9c53-40f45131b435/edition-slot-associations' },
'edit-workflow':
{ href:
'https://api.amplience.net/v2/content/content-items/3fae61b6-56ef-4c31-9c53-40f45131b435/workflow' },
'content-item-with-children':
{ href:
'https://api.amplience.net/v2/content/content-items/search/findByIdWithChildren?id=3fae61b6-56ef-4c31-9c53-40f45131b435' } } }
{ id: '66436a40-eea3-414e-9036-98580220787a',
contentRepositoryId: '5c5c64adc9e77c0001d73a22',
folderId: null,
body:
{ _meta:
{ name: 'draping---sofa',
schema: 'http://c1-qa.adis.ws/c/cmslabs/draping-demo' },
SVG:
{ _meta: [Object],
id: '1200180d-7332-4228-8e88-1919906e44b8',
name: 'test_sofa',
endpoint: 'bccdemo',
defaultHost: 'i1.adis.ws' },
Textures: [ [Object], [Object], [Object] ] },
version: 1,
label: 'Draping - Sofa',
status: 'ACTIVE',
createdBy: '2f38a1a9-c76d-4f34-91fa-652d09b6eede',
createdDate: '2019-03-12T23:20:41.925Z',
lastModifiedBy: '2f38a1a9-c76d-4f34-91fa-652d09b6eede',
lastModifiedDate: '2019-03-12T23:20:41.925Z',
deliveryId: '66436a40-eea3-414e-9036-98580220787a',
_links:
{ self:
{ href:
'https://api.amplience.net/v2/content/content-items/66436a40-eea3-414e-9036-98580220787a' },
'content-item':
{ href:
'https://api.amplience.net/v2/content/content-items/66436a40-eea3-414e-9036-98580220787a{?projection}',
templated: true },
publish:
{ href:
'https://api.amplience.net/v2/content/content-items/66436a40-eea3-414e-9036-98580220787a/publish' },
planned:
{ href:
'https://api.amplience.net/v2/content/content-items/66436a40-eea3-414e-9036-98580220787a/planned{?epoch,time}',
templated: true },
update:
{ href:
'https://api.amplience.net/v2/content/content-items/66436a40-eea3-414e-9036-98580220787a' },
'restore-version':
{ href:
'https://api.amplience.net/v2/content/content-items/66436a40-eea3-414e-9036-98580220787a/restore' },
'content-repository':
{ href:
'https://api.amplience.net/v2/content/content-repositories/5c5c64adc9e77c0001d73a22' },
'content-item-version':
{ href:
'https://api.amplience.net/v2/content/content-items/66436a40-eea3-414e-9036-98580220787a/versions{/version}',
templated: true },
'content-item-versions':
{ href:
'https://api.amplience.net/v2/content/content-items/66436a40-eea3-414e-9036-98580220787a/versions{?page,size,sort}',
templated: true },
'content-item-history':
{ href:
'https://api.amplience.net/v2/content/content-items/66436a40-eea3-414e-9036-98580220787a/history{?page,size,sort}',
templated: true },
copy:
{ href:
'https://api.amplience.net/v2/content/content-repositories/{id}/content-items?sourceContentItemId=66436a40-eea3-414e-9036-98580220787a',
templated: true },
unarchive:
{ href:
'https://api.amplience.net/v2/content/content-items/66436a40-eea3-414e-9036-98580220787a/unarchive' },
archive:
{ href:
'https://api.amplience.net/v2/content/content-items/66436a40-eea3-414e-9036-98580220787a/archive' },
'set-locale':
{ href:
'https://api.amplience.net/v2/content/content-items/66436a40-eea3-414e-9036-98580220787a/locale' },
'create-localizations':
{ href:
'https://api.amplience.net/v2/content/content-items/66436a40-eea3-414e-9036-98580220787a/localize' },
localizations:
{ href:
'https://api.amplience.net/v2/content/content-items/66436a40-eea3-414e-9036-98580220787a/localizations{?page,size,sort}',
templated: true },
'localization-jobs':
{ href:
'https://api.amplience.net/v2/content/localization-jobs/search/findByRootContentItem?id=66436a40-eea3-414e-9036-98580220787a{&page,size,sort}',
templated: true },
'edition-slot-associations':
{ href:
'https://api.amplience.net/v2/content/content-items/66436a40-eea3-414e-9036-98580220787a/edition-slot-associations' },
'edit-workflow':
{ href:
'https://api.amplience.net/v2/content/content-items/66436a40-eea3-414e-9036-98580220787a/workflow' },
'content-item-with-children':
{ href:
'https://api.amplience.net/v2/content/content-items/search/findByIdWithChildren?id=66436a40-eea3-414e-9036-98580220787a' } } }
this is visually what appears:
and the HTML output:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Amplience Demo: List Content Items">
<meta name="author" content="">
<meta http-equiv="Accept-CH" content="DPR,Width,Viewport-Width">
<title>Amplience Demo - List Content Items </title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="/static/css/custom.css"/>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="/?id=&store=">
<span class="d-lg-block d-none">Amplience - Content Simplified</span>
<span class="d-block d-lg-none">Amplience</span>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown"><a class="nav-link" href="/showJSON?id=&store=">ShowJSON</a></li>
<li class="nav-item"><a class="nav-link" href="/carousel?id=&store=">Carousel</a></li>
<li class="nav-item"><a class="nav-link" href="/panels?id=&store=">Panels</a></li>
<li class="nav-item"><a class="nav-link" href="/ListContentItems/5/1">List Content Items</a></li>
</ul>
</div>
</nav>
<main role="main" class="container">
</main><!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script> </body>
</html>
I think it's quite clear that the body of the template simply isn't rendering.
but other more complex routes render as expected..
let me know if you need further information.

After starting a brand new project and pulling this one route in I had a moment of enlightenment - here's the answer for anybody who hits a similar problem:
I was using the express-handlebars package which defaulted to main.hbs as it's layout.
I'd written a bunch of conditionals in there (bit of a noob error on reflection) which was preventing the body ever rendering - must've been a bit of a fluke that only this route was broken.
Lesson: don't put any complicated logic in your main.hbs file if your using express-handlebars.

jqGrid export to excel issue when loadonce option is setted to false

I have an ASP.net MVC solution and use jqGrid in it. To have a better performance I use loadonce: false as an option and it should be in this way, unfortunately It seems to be not supported by jqGrid because I cannot find any sign of that throughout my search.
$(document).ready(function () {
$("#jqGrid").jqGrid(
{
url: "/Student/GetStudents",
mtype: "GET",
datatype: "json",
contentType: "application/json; charset-utf-8",
jsonReader: {
root: "rows",
id: "StudentId",
repeatitems: false
},
colNames: ['StudentId', 'FirstName', 'LastName'],
colModel: [
{ label: 'StudentId', name: 'Id', key: true, width: 75 },
{ label: 'FirstName', name: 'FirstName', width: 150 },
{ label: 'LastName', name: 'LastName', width: 150 },
],
viewrecords: true,
loadonce: false,
width: '100%',
height: 'auto',
rowNum: 20,
rowList: [20, 30, 50],
sortable: true,
sortname: 'Id',
pager: "#jqGridPager",
autoencode: true,
scroll: false,
pgbuttons: true,
autowidth: true,
shrinkToFit: false,
forceFit: false,
gridview: false,
height: '100%',
scrollrows: true,
page: 1,
//pagerpos: 'center',
toppager: true,
recordpos: 'right',
multiselect: true,
multiboxonly: true,
direction: 'rtl',
ignoreCase: true,
caption: "",
rownumbers: true
});
$('#jqGrid').jqGrid('navGrid', '#jqGridPager', {
search: true,
searchtext: "Search",
edit: false,
add: false,
del: false,
excel: true,
refresh: false,
}, {}, {}, {}, {
closeOnEscape: true,
closeAfterSearch: true,
ignoreCase: true,
multipleSearch: false,
multipleGroup: false,
showQuery: false,
sopt: ['cn', 'eq', 'ne'],
defaultSearch: 'cn'
})
$('#jqGrid').jqGrid('navButtonAdd', '#jqGridPager', {
caption: "Export to Excel",
//buttonicon: "ui-icon-disk",
buttonicon: "ui-icon-folder-open",
onClickButton: function () {
exportToExcel();
},
});
});
function exportToExcel(data, e) {
exportExcelFile(data);
}
function exportExcelFile() {
debugger;
var data = $('#jqGrid')[0].addLocalData(true);
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE");
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) {
frame1.document.open("txt/html", "replace");
frame1.document.write(setTableOfData(data));
frame1.document.close();
frame1.focus();
sa = frame1.document.execCommand("SaveAs", true, "text.xls");
} else
$('#jqGrid').jqGrid('exportToExcel', { fileName: "exportedExcel.xls", navigator: true });
}
function setTableOfData(data) {
var htmlString = '<table>';
var header = '<tr><td>StudentId</td><td>FirstName</td><td>LastName</td></tr>';
htmlString += header;
for (var i = 0; i < data.length; i++) {
var tag = '<tr><td>' + data[i].Id + '</td><td>' + data[i].FirstName + '</td><td>' + data[i].LastName + '</td></tr>';
htmlString += tag;
}
htmlString += '</table>';
return htmlString;
}

Finally, I forced to post all the filtering and other settings of the grid to the server and return a link to the client. Then with the given link I became able to download the excel file.
Info: you can not download a file with post(ajax) request.

[fromly]: pass controller to template

I'm trying to make form with button inside js, because formly directive rendered form isn't correct. I decided push my button and render that button by template but button has lost access to the controller and validation form. Where i have missed here?
controller.js
.controller('X', ['$log', 'Api', function($log, Api) {
var _self = this;
_self.model = {};
_self.formParts = [{
className: 'row',
fieldGroup: [
{
className: 'col-xs-3',
key: 'q',
type: 'select',
templateOptions: {
required: true,
valueProp: "id",
labelProp: "name",
options: [
{name: '0', id: 0},
{name: '1', id: 1},
],
}
},
{
className: 'col-xs-7',
key: 'n',
type: 'input',
templateOptions: {
required: true,
type: 'text',
placeholder: 'name'
}
}
{
className: 'col-xs-2',
templateUrl: 'button.html'
}
]
}];
_self.save(model) {
$log.info(model);
};
}]);
main.html
<formly-form model="f.model"
fields="f.formFields"
form="formForm">
</formly-form>
button.html
<button type="submit" class="btn btn-success"
ng-disabled="formForm.$invalid"
ng-click="f.save(f.model)">Save
</button>

jqgrid - filter/search always gives me only "contains" operator for a option

I am using jQgrid - and it is great!
I have one problem.
(Oleg are you still around?)
In the search/filter form (were you can choose the coulmn you want to filter and the operation you want do to), the only things that comes up is the "contain" operator.
My colModel looks like this:
var columnModel = [{ name: 'ID', index: 'ID', sortable: true, searchoptions: { sopt: ['eq', 'cn','bw']}},
{ name: 'FirstName', index: 'FirstName', sortable: true},
{ name: 'LastName', index: 'LastName', sortable: true }
];
But it only gives me the contains operator.
The full grid is like this:
myGrid.jqGrid({
url: './ViewNQueryData.asmx/ViewNQueryData',
datatype: 'json',
mtype: 'POST',
postData: {userID:currentUserId, sphereID:currentSphereId},
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
serializeGridData: function (postData)
{
if (postData.filters === undefined) postData.filters = null;
return JSON.stringify(postData);
},
jsonReader: {
root: function (obj) { return obj.d.rows; },
page: function (obj) { return obj.d.page; },
total: function (obj) { return obj.d.total; },
records: function (obj) { return obj.d.records; }
},
colModel: columnModel,
colNames: columnNames,
rowNum: 10,
rowList: [10, 20, 300],
sortable: true,
pager: "#ViewNQueryPager",
viewrecords: true,
gridview: true,
height: 250,
shrinkToFit: true, //If using frozen coulmns change to false.
gridComplete: function ()
{
$('#totalRecordsFound').html(myGrid.jqGrid('getGridParam', 'records') + " Customers");
},
loadError: function ()
{
alert("Error fetching data");
}
}).jqGrid('navGrid', '#ViewNQueryPager',
{ edit: false, add: false, del: false, search: true, view: true }, //option
{}, // use default settings for edit
{}, // use default settings for add
{}, // delete instead that del:false we need this
{multipleSearch: true, multipleGroup: true, showQuery: true, onSearch: function (response) { showQueryDetails(); } },
{ height: 250, jqModal: false, closeOnEscape: true} // view options
);
Can any one help me with this???

Fixed!
I had a snippet of code on my page that was doing this....

How to work on jqgrid Add, edit, delete? using php

how to work on add row, edit, del the row in jqgrid? how to invoke editurl??
my code is below... jqgrid.php page.
var $mygrid= jQuery("#list").jqGrid({
url:'example.php',
datatype: 'xml',
mtype: 'GET',
colNames:['Seq','Name', 'ID','Pass','Mail','Note'],
colModel :[
{name:'seq',index:'seq', width:55, resizable:false, editable:true, editoptions:{readonly:true,size:10}},
{name:'name',index:'name', width:90,resizable:false, editable:true, editoptions:{readonly:false,size:10}},
{name:'id',index:'id', width:80, align:'right', editable:true, editoptions:{readonly:false,size:10}},
{name:'pass',index:'pass', width:80, align:'right', sortable:false, editable:true, editoptions:{readonly:false,size:10}},
{name:'mail',index:'mail', width:80,align:'right', sortable:false, editable:true, editoptions:{readonly:false,size:10}},
{name:'id',index:'id', width:150, sortable:false} ],
pager: jQuery('#pager'),
rowNum:10,
rowList:[10,20,30,50],
sortname: 'seq',
sortorder: "Asc",
width: 1000,
height: 230,
viewrecords: true,
multiselect: true,
editable: true,
toolbar: [true,"top"],
multikey: "ctrlKey",
editurl:'add.php',
caption: 'staff'
});
$("#list").jqGrid('navGrid', '#pager', {
edit: true,
add: true,
del: true,
search: false,
refresh:false
})
});
And example.php code is
enter code here <?php
$dbhost = 'localhost';
$dbuser = 'test';
$dbpassword = 'test';
$database = 'cs_test';
$page = $_GET['page'];
// get how many rows we want to have into the grid - rowNum parameter in the grid
$limit = $_GET['rows'];
// get index row - i.e. user click to sort. At first time sortname parameter -
// after that the index from colModel
$sidx = $_GET['sidx'];
// sorting order - at first time sortorder
$sord = $_GET['sord'];
// if we not pass at first time index use the first column for the index or what you want
if(!$sidx) $sidx =1;
// connect to the MySQL database server
$db = mysql_connect($dbhost, $dbuser, $dbpassword) or die("Connection Error: " . mysql_error());
// select the database
mysql_select_db($database) or die("Error conecting to db.");
// calculate the number of rows for the query. We need this to paging the result
$result = mysql_query("SELECT COUNT(*) AS count FROM TM_Staff");
$row = mysql_fetch_array($result,MYSQL_ASSOC);
$count = $row['count'];
// calculation of total pages for the query
if( $count > 0 ) {
$total_pages = ceil($count/$limit);
//$total_pages = 20;
} else {
$total_pages = 0;
}
if ($page > $total_pages) $page=$total_pages;
$start = $limit*$page - $limit;
if($start<0) $start = 0;
// the actual query for the grid data
$SQL = "SELECT seq,name,id,pass,mail,ins_dt from TM_Staff ORDER BY $sidx $sord LIMIT $start,$limit";
$result = mysql_query( $SQL ) or die("Couldn t execute query.".mysql_error());
if ( stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml") ) {
header("Content-type: application/xhtml+xml;charset=utf-8");
} else {
header("Content-type: text/xml;charset=utf-8");
}
echo "<?xml version='1.0' encoding='utf-8'?>";
echo "<rows>";
echo "<page>".$page."</page>";
echo "<total>".$total_pages."</total>";
echo "<records>".$count."</records>";
// be sure to put text data in CDATA
while($row = mysql_fetch_array($result,MYSQL_ASSOC)) {
echo "<row id='". $row[seq]."'>";
echo "<cell>". $row[seq]."</cell>";
echo "<cell>". $row[name]."</cell>";
echo "<cell>". $row[id]."</cell>";
echo "<cell>". $row[pass]."</cell>";
echo "<cell>". $row[mail]."</cell>";
echo "<cell><![CDATA[". $row[id]."]]></cell>";
echo "</row>";
}
echo "</rows>";
?>
plz help me, im in trouble...

var lastSel;
$(function () {
$("#grid").jqGrid({
colNames: ['Name', 'Address', 'Contact', 'Pan Number', 'Registration Number', 'Email Address', 'File'],
colModel: [
{ name: 'Name', index: 'Name', sortable: true, align: 'left', title: false, width: 200, editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmprefix: '* ' }, searchoptions: { sopt: ['eq', 'ne', 'bw', 'bn', 'ew', 'en', 'cn', 'nc']} },
{ name: 'Address', index: 'Address', sortable: true, title: false, align: 'left', width: 220, editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmprefix: '* ' }, searchoptions: { sopt: ['eq', 'ne', 'bw', 'bn', 'ew', 'en', 'cn', 'nc']} },
{ name: 'Contact', index: 'Contact', sortable: true, title: false, align: 'left', width: 200, editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmprefix: '* ' }, searchoptions: { sopt: ['eq', 'ne', 'bw', 'bn', 'ew', 'en', 'cn', 'nc']} },
{ name: 'PanNumber', index: 'PanNumber', sortable: true, title: false, align: 'left', width: 200, editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmprefix: '* ' }, searchoptions: { sopt: ['eq', 'ne', 'bw', 'bn', 'ew', 'en', 'cn', 'nc']} },
{ name: 'ServiceTaxRegistrationNo', index: 'ServiceTaxRegistrationNo', title: false, sortable: true, align: 'left', width: 240, editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmprefix: '* ' }, searchoptions: { sopt: ['eq', 'ne', 'bw', 'bn', 'ew', 'en', 'cn', 'nc']} },
{ name: 'Email', index: 'Email', sortable: true, align: 'left', title: false, width: 190, editable: true, edittype: 'text', editrules: { required: true, email: true }, formoptions: { elmprefix: '* ' }, search: false },
{ name: 'FilePath', index: 'FilePath', sortable: false, title: false, align: 'left', editable: true, edittype: 'file', width: 190, allowedExtensions: ['jpg', 'jpeg', 'png', 'gif'],
search: false, editoptions: {
enctype: "multipart/form-data"
}
},
],
pager: jQuery("#pager"),
sortname: 'Name',
rowNum: 10,
rowList: [10, 20, 25],
sortOrder: "",
height: 225,
viewrecords: true,
rownumbers: true,
caption: "Companies",
width: 950,
imgpath: '/Content/themes/smoothness/images',
url: "/Master/GetCompanies",
editurl: "/Master/PerformCompanyCRUDAction",
datatype: "json",
mtype: "GET",
onCellSelect: function (rowid, iCol, aData) {
if (rowid && rowid !== lastSel) {
if (lastSel) {
$("#" + lastSel).removeClass('state-active');
$("#" + lastSel).addClass('ui-widget-content');
}
$("#" + rowid).removeClass('ui-widget-content');
$("#" + rowid).addClass('state-active');
lastSel = rowid;
}
}
});
jQuery("#grid").jqGrid('navGrid', '#pager',
{ edit: true, add: true, del: true, search: true, refresh: true },
{ closeOnEscape: true, reloadAfterSubmit: true, modal: true,
beforeShowForm: function (formid) {
$("#pData, #nData").hide();
},
onInitializeForm: function (formid) {
$(formid).attr('method', 'POST');
$(formid).attr('action', '');
$(formid).attr('enctype', 'multipart/form-data');
},
test: function () {
var filenam = $("#FilePath").val();
},
afterSubmit: function (response, postdata) {
$.ajaxFileUpload({
url: '/Master/CompanyFileUpload?CompanyId=' + postdata.id,
secureuri: false,
data: postdata,
cache: false,
contentType: 'multipart/form-data',
processData: false,
type: 'POST',
fileElementId: 'FilePath',
dataType: 'json',
success: function (data, status) {
// $('#notificationDiv').text("Bank Updated Successfully!");
}
});
return true;
},
closeAfterEdit: true, left: 200, top: 50, width: 500,
afterShowForm: function (formid) {
$('#Contact').numeric({ allow: "," });
},
afterComplete: function (response, postdata, formid) {
if (response.responseText == "true") {
$("#notificationDivSuccess").delay(0).fadeIn("slow");
$('#notificationDivSuccess').text("Record Updated Successfully!");
$("#notificationDivSuccess").delay(2500).fadeOut("slow");
$('#notificationDivFail').text("");
}
else {
$("#notificationDivFail").delay(0).fadeIn("slow");
$('#notificationDivFail').text("Record Already Exist!");
$("#notificationDivFail").delay(2500).fadeOut("slow");
$('#notificationDivSuccess').text("");
}
}
},
{ closeOnEscape: true, reloadAfterSubmit: true,
closeAfterAdd: true, left: 200, top: 50, width: 500,
onInitializeForm: function (formid) {
$(formid).attr('method', 'POST');
$(formid).attr('action', '');
$(formid).attr('enctype', 'multipart/form-data');
},
afterShowForm: function (formid) {
$('#Contact').numeric({ allow: "," });
},
afterSubmit: function (response, postdata) {
// var data = $.parseJSON(response.responseText);
// bid = data.id;
// pageNo = data.page;
//debugger;
var Id = response.responseText;
$.ajaxFileUpload({
url: '/Master/CompanyFileUpload?CompanyId=' + Id,
secureuri: false,
data: postdata,
cache: false,
contentType: 'multipart/form-data',
processData: false,
type: 'POST',
fileElementId: 'FilePath',
dataType: 'json',
success: function (data, status) {
// $('#notificationDiv').text("Bank Added Successfully!");
}
});
return true;
}
,
afterComplete: function (response, postdata, formid) {
if (response.responseText != "") {
if (response.responseText == "false") {
$("#notificationDivFail").delay(0).fadeIn("slow");
$('#notificationDivFail').text("Record Already Exist!");
$("#notificationDivFail").delay(2500).fadeOut("slow");
$('#notificationDivSuccess').text("");
}
else {
$("#notificationDivSuccess").delay(0).fadeIn("slow");
$('#notificationDivSuccess').text("New Record Added Successfully!");
$("#notificationDivSuccess").delay(2500).fadeOut("slow");
$('#notificationDivFail').text("");
}
}
else {
}
}
},
{ closeOnEscape: true, reloadAfterSubmit: true, left: 300, top: 80, width: 220,
afterComplete: function (response, postdata, formid) {
if (response.responseText == "true") {
$("#notificationDivSuccess").delay(0).fadeIn("slow");
$('#notificationDivSuccess').text("Record Deleted Successfully!");
$("#notificationDivSuccess").delay(2500).fadeOut("slow");
$('#notificationDivFail').text("");
}
else {
$("#notificationDivFail").delay(0).fadeIn("slow");
$('#notificationDivFail').text("The selected record can not be deleted, Please delete associated record first");
$("#notificationDivFail").delay(2500).fadeOut("slow");
$('#notificationDivSuccess').text("");
}
}
},
{ closeAfterSearch: true, closeOnEscape: true, left: 200, top: 50, enableClear: true,
onClose: function () {
var postdata = $("#grid").jqGrid('getGridParam', 'postData');
postdata._search = false;
postdata.searchString = "";
$("#grid").trigger('reloadGrid');
return true;
}
});
});

In edit.php you have to put it like this:
if($_POST['oper']=='add')
{
... ... ...
}
else if($_POST['oper']=='edit')
{
... ... ...
}
else if($_POST['oper']=='del')
{
... ... ...
}
If you want to see what you are getting, use: print_r($_REQUEST);

var $mygrid= jQuery("#list").jqGrid({
url:'example.php',
editurl: 'edit.php',
datatype: 'xml',
mtype: 'GET',
colNames:['Seq','Name', 'ID','Pass','Mail','Note'],
colModel :[
{name:'seq',index:'seq', width:55, resizable:false, editable:true, editoptions:{readonly:true,size:10}},
{name:'name',index:'name', width:90,resizable:false, editable:true, editoptions:{readonly:false,size:10}},
{name:'id',index:'id', width:80, align:'right', editable:true, editoptions:{readonly:false,size:10}},
{name:'pass',index:'pass', width:80, align:'right', sortable:false, editable:true, editoptions:{readonly:false,size:10}},
{name:'mail',index:'mail', width:80,align:'right', sortable:false, editable:true, editoptions:{readonly:false,size:10}},
{name:'id',index:'id', width:150, sortable:false} ],
pager: jQuery('#pager'),
rowNum:10,
rowList:[10,20,30,50],
sortname: 'seq',
sortorder: "Asc",
width: 1000,
height: 230,
viewrecords: true,
multiselect: true,
editable: true,
toolbar: [true,"top"],
multikey: "ctrlKey",
caption: 'staff'
});
$("#list").jqGrid('navGrid', '#pager', {
edit: true,
add: true,
del: true,
search: false,
refresh:false
})
In edit.php
if($_GET['oper']=='add')
{
... ... ...
}
if($_GET['oper']=='edit')
{
... ... ...
}
if($_GET['oper']=='del')
{
... ... ...
}

I really like the idea of PHPjq however the code they are "selling" does not have any of the best practices to prevent SQL injection. so buy their code and add the proper sql escape wrappers or write your own .... be safe not lazy.

Resources