Related
I could not paginate on the grid. I looked through their examples but encountered proxy errors. I share my own code. I will be glad if you help.
I share my codes below
Ext.QuickTips.init();
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
var grid_data_veri;
var grid_array = [];
$.ajax({
type: 'GET',
url: 'ajaxQueryData?_qid=4146&xirsaliye_dt_k='+baslangic_tarih+'&xirsaliye_dt_b='+bitis_tarih,
data: { get_param: 'value' },
dataType: 'json',
async: false,
success: function (kat, data) {
var kat_sayisi = kat.browseInfo.totalCount;
for(var i_kat = 0; i_kat < kat_sayisi; i_kat++) {
var json = {
"sira_no":sira_no ,
"branch_id":kat.data[i_kat].branch_id_qw_,
"firma": kat.data[i_kat].firma
};
grid_array.push(json);
}
grid_data_veri = JSON.stringify(grid_array);
var store = new Ext.data.JsonStore({
fields: [
{name: "sira_no", type: "int"},
{name: "branch_id"},
{name: "firma"}
]
});
// manually load local data
store.loadData(Ext.decode(grid_data_veri));
// create the Grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{
id :'sira_no',
header : 'Sıra No',
width : 50,
sortable : true,
dataIndex: 'sira_no'
},
{
header : 'Şube',
width :150,
sortable : true,
dataIndex: 'branch_id'
}
,
{
header : 'Firma',
width :250,
sortable : true,
dataIndex: 'firma'
}
],
stripeRows: true,
height:395,
width: 650,
stateful: true,
stateId: 'grid'
});
grid.render('grid');
}
});
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");
});
For some reason, my grid is blank with no rows (not even an empty row), no navigation icons and no editing icons. I'm using a few add-in features such as an autocomplete field (inside the grid), and a font resizing script so my script is a bit long. The page is receiving the properly formatted response from my functions page and it seems to match my jsonReader settings but it's not populating the grid with it. Here is my JSON formatted response from the page:
{"page":"1",
"total":1,
"records":"4",
"rows":[{"DetailID":"1","Quantity":"2","TaskName":"Differencial With Housing","UnitPrice":"335.00","ExtendedPrice":"670.00"}, {"DetailID":"2","Quantity":"1","TaskName":"Left axel seal","UnitPrice":"15.00","ExtendedPrice":"15.00"},{"DetailID":"3","Quantity":"1","TaskName":"Upper and Lower Bearings","UnitPrice":"55.00","ExtendedPrice":"55.00"}, {"DetailID":"5","Quantity":"1","TaskName":"Fluids","UnitPrice":"45.00","ExtendedPrice":"45.00"}]}
And here is my grid script:
<script>
function autocomplete_element(value, options) {
var $ac = $('<input type="text"/>');
$ac.val(value);
$ac.autocomplete({source: "autocomplete.php?method=fnAutocomplete"});
return $ac;
}
function autocomplete_value(elem, op, value) {
if (op == "set") {
$(elem).val(value);
}
return $(elem).val();
}
$(document).ready(function()
{
$('#filter').jqm();
var selectedRow = 0;
$("#list").jqGrid(
{
url:'managegrid.php',
datatype: 'json',
colNames:['DetailID', 'ProjectID','Qty.','Description','Unit Price','Total Cost'],
colModel :[
{name:'DetailID', index:'DetailID', hidden:true, editable:false},
{name:'ProjectID', index:'ProjectID', width:25, hidden:true, editable:true},
{name:'Quantity', index:'Quantity', editable:true, width:50, align:'right', edittype:'text', editoptions: {defaultValue:'1'}},
{name:'TaskName', index:'TaskName', editable:true, width:450, align:'left', edittype: 'custom', editoptions: {'custom_element' : autocomplete_element, 'custom_value' : autocomplete_value}},
{name:'UnitPrice', index:'UnitPrice', editable:true, width:100, align:'right'},
{name:'ExtendedPrice', index:'ExtendedPrice', editable:false, width:100, align:'right'}
],
onSelectRow: function(id){
if(DetailID && DetailID!==mkinline){
jQuery('#list').saveRow(mkinline);
jQuery('#list').editRow(DetailID,true);
mkinline=DetailID;
}
},
pager: $('#pager'),
rowNum:20,
rowList:[],
pgbuttons: false,
pgtext: null,
sortorder: "asc",
sortname: "DetailID",
viewrecords: true,
imgpath: '/js/jquery/css/start/images',
caption: 'Project Details',
height:'auto',
width:823,
mtype:'GET',
recordtext:'',
pgtext:'',
editurl:"editgrid.php",
toolbar:[true,"bottom"],
loadComplete:function(){
var recorddata = $("#list").getUserData();
$("#t_list").html(recorddata.MSG);
},
jsonReader: {
page: "PAGE",
total: "TOTAL",
records:"RECORDS",
root: "ROWS",
userdata:"USERDATA"
}
}
);
$("#t_list").css("color","blue");
jQuery("#list").jqGrid("inlineNav",'#pager',{edit:true,editicon: "ui-icon-pencil",add:true,addicon: "ui-icon-plus",search:false}, {}, {},
{url:"delgridrow.php",closeAfterDelete:true,reloadAftersubmit:false,afterSubmit:commonSubmit,caption:"Delete",msg:"Delete selected",width:"400"})
.navButtonAdd('#pager',{caption:"",title:"Reload Form",buttonimg:'/js/jquery/css/start/images/refresh.gif',onClickButton:function(id)
{
resetForm();
$("#list").setGridParam(
{
url:"managegrid.php",
page:1
}
).trigger("reloadGrid");
}
});
}
);
function gridSearch()
{
var pid = $("#DetailID").val();
var qty = $("#Quantity").val();
var tn = $("#TaskName").val();
var up = $("#UnitPrice").val();
$("#list").setGridParam(
{
url:"managegrid.php?ProjectID="+pid+"&Quantity="+qty+"&TaskName="+tn+"&UnitPrice="+up,
page:1
}
).trigger("reloadGrid");
$("#filter").jqmHide();
return false
}
function commonSubmit(data,params)
{
var a = eval( "(" + data.responseText + ")" );
$("#t_list").html(a.USERDATA.MSG);
resetForm();
return true;
} function resetForm()
{
window.location.reload(false);
}
</script>
I've been trying to figure this one out all weekend and it's driving me crazy so any help would be appreciated.
You should add the line of code
jQuery("#list").jqGrid("navGrid", '#pager',
{add: false, edit: false, del: false, search: false, refresh: false});
directly before calling of inlineNav.
UPDATED: Your code have many other problems too. For example, you should remove jsonReader option from your code, because it contains wrong values of properties (like root: "ROWS" instead of root: "rows", which is default and can be removed). You can consider to use jsonReader: { id: 'DetailID' } to use the value of DetailID as the rowid and to use DetailID instead of id during editing. I'd recommend you to define all variables before the usage (see mkinline and DetailID for example).
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.
I'm trying to do an inline edit with a column with formatter: 'actions' and want to send the information to the server in JSON format, but I cant. I already tried many things, but with no results. Still sending information without serializing.
Also tried $.extend($.jgrid.edit, (...)); at the initialization $(function(){...}); with no result.
My formatoptions looks like this:
formatoptions: {
keys: true,
editbutton: true,
delbutton: true,
//url: url,
editOptions: {
url: url,
ajaxEditOptions: {
//url: url,
contentType: 'application/json;charset=utf-8',
type: 'POST',
datatype: 'json'
}
},
delOptions: {
url: url,
ajaxDelOptions: {
//url: url,
contentType: 'application/json;charset=utf-8',
type: 'POST',
datatype: 'json'
}
}
}}
But still not working :S I dont know what im doing wrong.
I'd appreciate if you help me.
PS: I writted too many url properties, becuase I was checking where I have to write it to do it work. For edit, only works if I put the url out of editOptions, only if I put it in formatoptions. But for delete, it don't cares if I put it in/out delOptions, including ajaxDelOptions. If you could help me with that too, I'd appreciate.
UPDATED
Delete works fine with this config, but inline editing save button still not working. I pasted the same config, changing options for editing and still not working.
delOptions: {
url: url,
mtype: 'POST',
reloadAfterSubmit: true,
ajaxDelOptions: {
contentType: "application/json"
},
serializeDelData: function(postdata) {
return JSON.stringify(postdata);
}
}
UPDATED 2
Here is my JS.
$(function() {
$.mask.definitions['2'] = '[0-2]';
$.mask.definitions['5'] = '[0-5]';
$.extend($.jgrid.defaults, {
ajaxRowOptions: {
contentType: "application/json",
dataType: "json",
success: function() {
},
error: null
},
serializeRowData: function(data) {
delete data.oper;
return JSON.stringify(data);
}
});
});
function loadGrid(identifier) {
$("#list").jqGrid({
url: 'foo.html?identifier=' + identifier,
type: 'GET',
datatype: 'json',
repeatitems: false,
autowidth: true,
altRows: false,
hidegrid: false,
cmTemplate: {
sortable: false,
resizable: false
},
colNames: ["id", "column1", "column2", "column3", "column4", "column5", "column6", "column7", " "],
colModel: [
{name: "id", label: "id", hidden: true},
{name: "columnData1", label: "columnData1", key: true, hidden: true},
{name: "columnData2", label: "columnData2", edittype: "select", editable: true,
editoptions: {
dataUrl: 'foo/bar.html'
}},
{name: "columnData3", label: "columnData3", width: 75, editable: true},
{name: "columnData4", label: "columnData4", width: 100, edittype: "select", editable: true,
editoptions: {
dataUrl: 'foo/bar.html'
}},
{name: "columnData5", align: "right", label: "columnData5", width: 55, formatter: 'number',
formatOptions: {
decimalPlaces: 2
}, editable: true},
{name: "columnData6", align: "right", label: "columnData6", width: 55, formatter: 'number',
formatOptions: {
decimalPlaces: 2
}, editable: true},
{name: "columnData7", align: "right", label: "columnData7", width: 55, formatter: 'number',
formatOptions: {
decimalPlaces: 2
}},
{name: "actions", formatter: "actions", width: 35}
],
pager: '#pager',
rows: '',
rowList: [],
pgbuttons: false,
pgtext: null,
viewrecords: false,
gridview: true,
caption: 'MyCaption',
subGrid: true,
subGridRowExpanded: function(subgrid_id, row_id) {
var subgrid_table_id, pager_id;
subgrid_table_id = subgrid_id + "_t";
pager_id = "p_" + subgrid_table_id;
$("#" + subgrid_id).html("<table id='" + subgrid_table_id + "'></table><div id='" + pager_id + "'></div>");
$("#" + subgrid_table_id).jqGrid({
url: 'foo/bar.html?identifier=' + identifier + '&rowId=' + row_id,
type: 'GET',
datatype: 'json',
repeatitems: false,
autowidth: true,
altRows: false,
hidegrid: false,
cmTemplate: {
sortable: false,
resizable: false
},
colNames: ['column1', 'column2', 'column3', 'column4', 'column5', 'column6', ' '],
colModel: [
{name: 'columnData1', hidden: true, key: true},
{name: 'columnData2', width: 75, formatter: 'date',
formatoptions: {
srcformat: 'Y-m-d',
newformat: 'd/m/Y'
},
editoptions: {
readonly: 'readonly',
dataInit: function(elem) {
$(elem).width("75%");
$(elem).datepicker({
dateFormat: "dd/mm/yy",
showOn: "button",
buttonImage: "../css/images/calendar.gif",
buttonText: "Muestra el calendario.",
buttonImageOnly: true
});
}}
, editable: true},
{name: 'columnData3', width: 75,
formatter: function(cellval, opts) {
if (!/^([0-1][0-9]|2[0-3]:[0-5][0-9])/.test(cellval)) {
var date = new Date(cellval);
opts = $.extend({}, $.jgrid.formatter.date, opts);
return $.fmatter.util.DateFormat("", date, 'H:i', opts);
} else {
var date = new Date();
var time = cellval.split(":");
date.setFullYear(1899);
date.setMonth(12);
date.setDate(30);
date.setHours(time[0]);
date.setMinutes(time[1]);
date.setSeconds(0);
opts = $.extend({}, $.jgrid.formatter.date, opts);
return $.fmatter.util.DateFormat("", date, 'H:i', opts);
}
},
editoptions: {dataInit: function(elem) {
$(elem).mask("29:59");
}},
editrules: {custom: true, custom_func: function(value) {
if (/^([0-1][0-9]|2[0-3]:[0-5][0-9])/.test(value)) {
return [true, ""];
} else {
return [false, " no es un formato de hora válido.<br/>Por favor, introduzca una hora en un formato <b>hh:mm</b> válido."];
}
}}, editable: true},
{name: 'columnData4', width: 80, editable: true},
{name: 'columnData5', width: 200, editable: true},
{name: 'columnData6', align: 'right', width: 50, editable: true, formatter: 'number',
formatoptions: {
decimalPlaces: 2
}},
{name: 'actions', formatter: 'actions', width: 40,
formatoptions: {
//keys: false,
editbutton: true,
delbutton: true,
url: "foo/bar/edit.html?identifier=" + identifier + "&rowId=" + row_id,
editOptions: {
keys: true,
//url: "foo/bar/edit.html?identifier=" + identifier + "&rowId=" + row_id,
mtype: "POST"
},
delOptions: {
url: "foo/bar/delete.html?identifier=" + identifier + "&rowId=" + row_id,
mtype: 'POST',
reloadAfterSubmit: true,
ajaxDelOptions: {
contentType: "application/json"
},
serializeDelData: function(postdata) {
delete postdata.oper;
return JSON.stringify(postdata);
}
}
}}
],
height: 190,
pager: pager_id,
rows: '',
rowList: [],
pgbuttons: false,
pgtext: null,
viewrecords: false,
gridview: true,
loadError: function(xhr, status, error) {
alert(xhr + " : " + status + " : " + error);
},
jsonReader: {
repeatitems: false
},
gridComplete: function() {
$("div.ui-inline-save").click(function() {
var dlgDiv = $("#info_dialog");
dlgDiv.width(600);
var parentDiv = dlgDiv.parent();
var dlgWidth = dlgDiv.width();
var parentWidth = parentDiv.width();
var dlgHeight = dlgDiv.height();
var parentHeight = parentDiv.height();
dlgDiv.css('top', Math.round((parentHeight - dlgHeight) / 2));
dlgDiv.css('left', Math.round((parentWidth - dlgWidth) / 2));
});
$("div.ui-inline-del").click(function() {
var dlgDiv = $("#delmod" + subgrid_table_id);
dlgDiv.width(600);
var parentDiv = dlgDiv.parent();
var dlgWidth = dlgDiv.width();
var parentWidth = parentDiv.width();
var dlgHeight = dlgDiv.height();
var parentHeight = parentDiv.height();
dlgDiv.css('top', Math.round((parentHeight - dlgHeight) / 2));
dlgDiv.css('left', Math.round((parentWidth - dlgWidth) / 2));
});
$("#gbox_" + subgrid_id + "_t").removeClass('ui-corner-all');
$("#" + pager_id).removeClass('ui-corner-bottom');
disableSelection(document.getElementById(subgrid_table_id));
}
}).navGrid("#" + pager_id, {add: true, edit: false, del: false, search: false, view: false, refresh: true}, {},
{afterShowForm: function(form) {
var dlgDiv = $("#editmod" + subgrid_table_id);
dlgDiv.width(600);
var parentDiv = dlgDiv.parent();
var dlgWidth = dlgDiv.width();
var parentWidth = parentDiv.width();
var dlgHeight = dlgDiv.height();
var parentHeight = parentDiv.height();
dlgDiv.css('top', Math.round((parentHeight - dlgHeight) / 2));
dlgDiv.css('left', Math.round((parentWidth - dlgWidth) / 2));
}
});
},
loadError: function(xhr, status, error) {
alert(xhr + " : " + status + " : " + error);
},
jsonReader: {
repeatitems: false
},
gridComplete: function() {
$("div.ui-inline-save").click(function() {
var dlgDiv = $("#info_dialog");
dlgDiv.width(600);
var parentDiv = dlgDiv.parent();
var dlgWidth = dlgDiv.width();
var parentWidth = parentDiv.width();
var dlgHeight = dlgDiv.height();
var parentHeight = parentDiv.height();
dlgDiv.css('top', Math.round((parentHeight - dlgHeight) / 2));
dlgDiv.css('left', Math.round((parentWidth - dlgWidth) / 2));
});
$("div.ui-inline-del").click(function() {
var dlgDiv = $("#delmodlist");
dlgDiv.width(600);
var parentDiv = dlgDiv.parent();
var dlgWidth = dlgDiv.width();
var parentWidth = parentDiv.width();
var dlgHeight = dlgDiv.height();
var parentHeight = parentDiv.height();
dlgDiv.css('top', Math.round((parentHeight - dlgHeight) / 2));
dlgDiv.css('left', Math.round((parentWidth - dlgWidth) / 2));
});
disableSelection(document.getElementById("list"));
}
}).navGrid("#pager", {add: true, edit: false, del: false, search: false, view: false, refresh: true}, {},
{afterShowForm: function(form) {
var dlgDiv = $("#editmodlist");
dlgDiv.width(600);
var parentDiv = dlgDiv.parent();
var dlgWidth = dlgDiv.width();
var parentWidth = parentDiv.width();
var dlgHeight = dlgDiv.height();
var parentHeight = parentDiv.height();
dlgDiv.css('top', Math.round((parentHeight - dlgHeight) / 2));
dlgDiv.css('left', Math.round((parentWidth - dlgWidth) / 2));
}
});
var height = $("body").height();
$('.ui-jqgrid-bdiv').height(height);
}
Changed column names, etc. for security (obviusly). This is my JS. I had to use jqGrid in a function and getting identifier as parameter, because I have a JSP that is loaded into a Iframe and that JSP has another Iframe that loads this JS. I needed to send the identifier that I recieve in the JSP to build the grid. The best way I found is that.
Thats the identifier value.
Also, I need that identifier and the row_id to update data, because I have as 3 primary keys to identify an specific item. I need identifier, parent row_id and actual row_id that I'm editing. Last one I get it from the JS Object in JSON format.
It's like it does not recognize editOptions property, because it does not get keys: true. It didn't let me accept the edit with Enter key.
If you still needing more information, just ask.
I think that the origin of your problem is misunderstanding about how formatter: 'actions' works.
There are tree main editing mode supported by jqGrid: inline editing, form editing and cell editing. If you don't use editformbutton: true option of formatter: 'actions' inside of formatoptions then Edit button will use inline editing. Delete button uses always form editing because there are no delete method in the inline editing module.
So if you includes some option inside of editOptions of formatoptions of formatter: 'actions' then it should be an option of editRow (see properties of editparameters object in the documentation). So you can specify for example
editOptions: {
url: url,
mtype: "POST", // is already default and can be removed
keys: true
}
but the ajaxEditOptions will be ignored here. $.jgrid.edit can be used to change default values for editGridRow which is part of forme editing, but to change defaults of editRow you need use $.jgrid.inlineEdit instead.
delOptions allows you specify parameters of delGridRow. The UPDATED part of your question uses correct options. So Delete operation works correctly.
By the way you can use editurl option of jqGrid to specify URL used for both inline editing and form editing. So editurl: url on one place will be better as specifying url: url multiple times.
What you need to do for successful editing is adding ajaxRowOptions and serializeRowData as jqGrid options
ajaxRowOptions: { contentType: "application/json", dataType: "json" },
serializeRowData: function (data) { return JSON.stringify(data); }
or to set it in $.jgrid.defaults.
UPDATED: You misunderstand the value of unique id. HTML standard don't allows to have two elements with the same id attribute on the page. The demo which you posed don't use idPrefix in subgrids. If you opens subgrids for who rows and examine HTML code of the page with respect of Developer Tools (press F12 in IE) you will see the following
So you have to use idPrefix for subgrids. I recommend you to use the value which depends on rowid of the parent grid (something like idPrefix: "s_" + row_id + "_"). Look at here for more my answer about the subject.
UPDATED 2: I looked in the code of formatter: "actions" one more time and I see that it uses url option of formatter for inline editing operations (see the documentation) and uses delOptions for delete and editOptions for form editing. So editOptions.url will be used only if you would use editformbutton: true option.