415 Unsupported Media Type Error - jqgrid

I'm getting an error of
"415 Unsupported media type". I've tried the solutions provided already.But my problem is not solved.
Here is my Code for receiving loading jason data dynamically in jqgrid
jQuery(grid_selector).jqGrid({
contentType: "application/json",
datatype: "json",
height: 250,
colNames:['Workbook Name','Superior','Hierarchy','Usage', 'Created', 'Created by'],
colModel:[
{name:'name',index:'name', width:90,editable: true,formatter:function(rowId, val, rawObject, cm, rdata) {
return "<a href='1.1.1 Edit Workbook (Name).html' style='height:25px;width:120px;' type='button' >"+rawObject.name+"</a>";
},unformat:undoaddLink,search: true},
{name:'recordType',index:'recordType', width:90,formatter:function(rowId, val, rawObject, cm, rdata) {
return "<a href='#' type='button' >"+rawObject.recordType+"</a>";
},editable: true,editoptions: { readonly: 'readonly' },unformat:undoaddLinkparent,search: true},
{name:'hierarchy',index:'hierarchy', width:150,editoptions: { readonly: 'readonly' },formatter: setVal,search: true,unformat:undohierarchy},
{name:'usage',index:'usage', width:90,editable: true,editoptions: { readonly: 'readonly' },search: true,formatter:ChangeVal},
{name:'created',index:'created', width:70,editable: true, editoptions: { readonly: 'readonly' },search: true},
{name:'createdBy',index:'createdBy', width:90,editable: true,editoptions: { readonly: 'readonly' },search: true}
],
viewrecords : true,
rowNum:10,
rowList:[10,20,30],
pager : pager_selector,
altRows: true,
'cellEdit': true,
'cellsubmit' : 'clientArray',
editurl: 'clientArray',
multiselect: true,
multiboxonly: true,
sortable: true,
gridComplete: function() {
$("tr").not(':first').hover(
function () {
$(this).css("background","#CCCCFF");
},
function () {
$(this).css("background","");
}
);
},
loadComplete : function() {
var table = this;
setTimeout(function(){
styleCheckbox(table);
updateActionIcons(table);
updatePagerIcons(table);
enableTooltips(table);
}, 0);
},
});
I'm getting the jason data currectly in localhost.But in server I'm getting the error.
Thanks in advance

Related

on jquery ajax call , unable to bind jqgrid data

I have 2 queries on binding jgGrid in MVC application..
1. I am unable to bind jsonData which is coming from controller on Success callback method
2. On button click i am loading jqgrid from server data, but when i click 2nd time it is not firing my server code(which is in controller), only first time it is executing the server code.
below is my javascript code
function buildGrid() {
// setup custom parameter names to pass to server prmNames: { search: "isSearch", nd: null, rows: "numRows", page: "page", sort: "sortField", order: "sortOrder" }, // add by default to avoid webmethod parameter conflicts postData: { searchString: '', searchField: '', searchOper: '' }, // setup ajax call to webmethod datatype: function(postdata) { mtype: "GET", $.ajax({ url: 'PageName.aspx/getGridData', type: "POST", contentType: "application/json; charset=utf-8", data: JSON.stringify(postdata), dataType: "json", success: function(data, st) { if (st == "success") { var grid = jQuery("#list")[0]; grid.addJSONData(JSON.parse(data.d)); } }, error: function() { alert("Error with AJAX callback"); } }); }, // this is what jqGrid is looking for in json callback jsonReader: { root: "rows", page: "page", total: "totalpages", records: "totalrecords", cell: "cell", id: "id", //index of the column with the PK in it userdata: "userdata", repeatitems: true }, colNames: ['Id', 'First Name', 'Last Name'], colModel: [ { name: 'id', index: 'id', width: 55, search: false }, { name: 'fname', index: 'fname', width: 200, searchoptions: { sopt: ['eq', 'ne', 'cn']} }, { name: 'lname', index: 'lname', width: 200, searchoptions: { sopt: ['eq', 'ne', 'cn']} } ], rowNum: 10, rowList: [10, 20, 30], pager: jQuery("#pager"), sortname: "fname", sortorder: "asc", viewrecords: true, caption: "Grid Title Here" }).jqGrid('navGrid', '#pager', { edit: false, add: false, del: false }, {}, // default settings for edit {}, // add {}, // delete { closeOnEscape: true, closeAfterSearch: true}, //search {} ) });
var grid = $("#jQGrid"); $("#jQGrid").jqGrid({
//setup custom parameter names to pass to server
prmNames: { search: "isSearch", nd: null, rows: "numRows", page: "page", sort: "sortField", order: "sortOrder" },
// add by default to avoid webmethod parameter conflicts
postData: {
'ddlDSVIN': function () {
return $('#ddlDevice :selected').val();
},
'search': function () { return $("#searchId").val(); },
'OEMType': function () { return $('#ddlOEM :selected').text(); },
'frmDate': function () { return fromDate.toDateString(); },
'toDate': function () { return toDate.toDateString(); }
},
datatype: function(postdata) { mtype: "POST",
$.ajax({ url: '/DataIn/DataInSearchResult/', type: "POST", contentType: "application/json; charset=utf-8",
//data: postData,
datatype: "json",
success: function(data, st) {
if (st == "success") {
var grid = jQuery("#jQGrid")[0]; grid.addJSONData(JSON.parse(data.d));
var container = grid.parents('.ui-jqgrid-view');
$('#showgrid').show();
$('#jQGrid').show();
$('#divpager').show();
//container.find('.ui-jqgrid-hdiv, .ui-jqgrid-bdiv').show();
$("#hideandshow").show();
$("#lblTotal").html($(this).getGridParam("records") + " Results");
$("#hideandshow2").hide();
}
},
error: function(error) { alert("Error with AJAX callback" + error); } }); }, // this is what jqGrid is looking for in json callback
jsonReader: { root: "rows", page: "page", total: "totalpages", records: "totalrecords", cell: "cell", id: "id", //index of the column with the PK in it
userdata: "userdata", repeatitems: true
},
// url: '/DataIn/DataInSearchResult/',
colNames: ["PayloadCorrelationId", "Asset", "Type", "DateReported", "ErrorType", "Error", "Latitude", "Longitude", "Payloadurl"],
colModel: [
{ name: 'CorrelationId', index: 'CorrelationId', jsonmap: 'CorrelationId', hidden: true, width: 2, key: true },
// { name: "", index:'', editable: true, edittype: "checkbox", width: 45, sortable: false, align: "center", formatter: "checkbox", editoptions: { value: "True:False" }, formatoptions: { disabled: false } },
{ name: 'Device', jsonmap: 'Device', width: '65px' },
{ name: 'Type', jsonmap: 'Type', width: '65px' },
{ name: 'DateReported', jsonmap: 'DateReported', width: '100px' },
{ name: 'ErrorType', jsonmap: 'ErrorType', width: '85px' },
{ name: 'Error', jsonmap: 'Error', width: '160px' },
{ name: 'Latitude', jsonmap: 'Latitude', width: '78px' }, { name: 'Longitude', jsonmap: 'Longitude', width: '78px' },
{ name: 'Payloadurl', jsonmap: 'Payloadurl', width: '180px', formatter: 'showlink', formatoptions: { baseLinkUrl: 'javascript:', showAction: "Link('", addParam: "');" } }],
rowNum: 10, rowList: [10, 20, 30],
pager: jQuery("#divpager"), sortorder: "asc",
viewrecords: true, caption: "Grid Title Here"
}).jqGrid('navGrid', '#divpager', { edit: false, add: false, del: false }, {}, // default settings for edit
{}, // add
{}, // delete
{ closeOnEscape: true, closeAfterSearch: true}, //search
{ });
}
above method is called in document.ready function
$(documen).ready(function() {
("#buttonclick").click(function() {
buildGrid();
});
});
Can you please what was wrong with my code.. because i need to search on button click by passing the paramerter's to service method using postData {},but how to send this postData to url and bind the result to JqGrid.
thanks
Raj.
Usage of datatype as is not recommend way. Instead of that one can use datatype: "json". It informs that jqGrid should make for you the Ajax request using $.ajax method. One can use additional options of jqGrid to specify the options of the underlying $.ajax request.
The next problem you have in the code
$(documen).ready(function() {
$("#buttonclick").click(function() {
buildGrid();
});
});
The function buildGrid will be called every time if the user click on #buttonclick button. The problem is that you have initially the empty table
<table id="jQGrid"></table>
on your page, but after creating the grid (after the call $("#jQGrid").jqGrid({...});), the empty table will be converted in relatively complex structure of dives and tables (see the picture). The second call on non-empty table will be just ignored by jqGrid. It's the reason why the 2nd click on the button #buttonclick do nothing.
You can solve the problem in two ways. The first would be including $("#buttonclick").jqGrid("GridUnload"); before creating the grid. It would be destroy the grid and recreate the initial empty table. The second way os a little better. You can not destroy the grid at the second time, but to call $("#buttonclick").trigger("reloadGrid"); instead. It will force making new Ajax request to the server.
Minimal changing of your original code will follow us to about the following:
$(documen).ready(function() {
var $grid = $("#jQGrid");
$grid.jqGrid({
//setup custom parameter names to pass to server
prmNames: {
search: "isSearch",
nd: null,
rows: "numRows",
sort: "sortField",
order: "sortOrder"
},
// add by default to avoid webmethod parameter conflicts
postData: {
ddlDSVIN: function () {
return $('#ddlDevice').val();
},
search: function () {
return $("#searchId").val();
},
OEMType: function () {
return $('#ddlOEM')
.find("option")
.filter(":selected")
.text();
},
frmDate: function () {
return fromDate.toDateString();
},
toDate: function () {
return toDate.toDateString();
}
},
mtype: "POST",
url: '/DataIn/DataInSearchResult/',
datatype: "json",
ajaxGridOptions: { contentType: "application/json; charset=utf-8" },
loadComplete: function () {
$('#showgrid').show();
$('#jQGrid').show();
$('#divpager').show();
$("#hideandshow").show();
$("#lblTotal").html($(this).getGridParam("records") + " Results");
$("#hideandshow2").hide();
},
jsonReader: {
root: root: function (obj) {
return typeof obj.d === "string" ?
$.parseJSON(obj.d) :
obj.d;
},
total: "totalpages",
records: "totalrecords"
},
colNames: ["PayloadCorrelationId", "Asset", "Type", "DateReported", "ErrorType", "Error", "Latitude", "Longitude", "Payloadurl"],
colModel: [
{ name: 'CorrelationId', hidden: true, width: 2, key: true },
// { name: "", index:'', editable: true, edittype: "checkbox", width: 45, sortable: false, align: "center", formatter: "checkbox", editoptions: { value: "True:False" }, formatoptions: { disabled: false } },
{ name: 'Device', width: 65 },
{ name: 'Type', width: 65 },
{ name: 'DateReported', width: 100 },
{ name: 'ErrorType', width: 85 },
{ name: 'Error', width: 160 },
{ name: 'Latitude', width: 78 },
{ name: 'Longitude', width: 78 },
{ name: 'Payloadurl', width: 180, formatter: 'showlink', formatoptions: { baseLinkUrl: 'javascript:', showAction: "Link('", addParam: "');" } }],
rowNum: 10,
rowList: [10, 20, 30],
pager: "#divpager",
sortorder: "asc",
viewrecords: true,
caption: "Grid Title Here"
}).jqGrid('navGrid', '#divpager', { edit: false, add: false, del: false },
{}, // default settings for edit
{}, // add
{}, // delete
{ closeOnEscape: true, closeAfterSearch: true} //search
);
$("#buttonclick").click(function() {
$grid.trigger("reloadGrid");
});
});

jqgrid subgrid is not loading data (no Ajax call sent to the server)

I have below setup jqgrid (v 4.6.0).
$(function () {
var JQGridDefaults = {
caption: '',
rowList: [10, 50, 100],
datatype: 'json',
height: '100%',
viewrecords: true,
mtype: 'GET',
colNames: ['Item Control No', 'Item Short Description', 'ID'],
colModel: [
{
name: 'ItemCode', index: 'ItemCode', search: true, width: 230, cellattr: makeCellContentWrap, searchoptions: {
sopt: ['eq', 'ne', 'bw', 'bn', 'ew', 'en', 'cn', 'nc'],
},
searchrules: {required: true}
},
{
name: 'ItemShortDesc', index: 'ItemShortDesc', search: true, width: 300, cellattr: makeCellContentWrap, searchoptions: {
sopt: ['eq', 'ne', 'bw', 'bn', 'ew', 'en', 'cn', 'nc'],
},
searchrules: {required: true }
}
//Hidden Fields - Start
{ name: 'ItemID', hidden: true, key: true }
//HiddenFields End
],
pager: '#GridPager',
rowNum: 10,
sortname: 'ItemCode',
sortorder: 'asc',
url: '/Items/List',
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
userdata: "userdata",
subgrid: {
root: "rows",
repeatitems: false
}
},
//Sub Grid - Start
subGrid: true,
subGridBeforeExpand: function (pID, rowID) {
console.log("Before Expand");
var gridData = $(this).jqGrid('getRowData',rowID);
if (gridData.ItemCode == "") {
return false;
}
},
subGridUrl: '/Items/Details',
subGridModel: {
name: ['Revision', 'ItemCode'],
width: [50, 100],
align: ['center', 'center'],
mapping: ['Revision', 'ItemCode']
},
afterInsertRow: function (rowid, aData, rowelem) {
// Remove the subgrid plus button except for rows that have exceptions
if (aData.ItemCode == "") {
$('#' + rowid).children("td.sgcollapsed").unbind();
$('#' + rowid).children("td.sgcollapsed").html("");
}
}
//Sub Grid - END
};
var JQGridSearchDefaults = {
multipleSearch: true,
recreateFilter: true,
showQuery: true,
closeAfterSearch: true,
closeAfterReset: true,
searchOnEnter: true,
closeOnEscape:true,
width: 600
};
$('#Grid').jqGrid(JQGridDefaults).navGrid('#GridPager', { view: false, del: false, add: false, edit: false, refresh: true },
{},
{},
{},
JQGridSearchDefaults);
$('#Grid').jqGrid('setGridWidth', $('#Grid').parents('.main-content').width() - 2);
$(window).resize(function () {
clearTimeout(this.id);
this.id = setTimeout(function () {
$('#Grid').jqGrid('setGridWidth', $('#Grid').parents('.main-content').width() - 2);
}, 300);
});
});
The sub grid icon appears correctly but when I click on the Expand icon an empty row appears (no headers and no ajax call is sent)
does anyone have an idea on why the ajax call is not happening?
Note: I also tried to use 'subgridtype' parameter and define to make the service call that too did not make the Ajax call.
subgridtype: function (rowidparam) {
$.ajax({
url: '/Items/Details',
cache: false,
type: 'Get',
dataType: "json",
data: { id: rowidparam.ItemID }
}).done(function (data) {
$('#Grid')[0].subGridJson(data, rowidparam.id);
});
},
subgridtype must be string, for you try json
subgridtype: 'json'

load jqgrid via ajax to dialog search options dropdown don't work

When I use my jqgrid (v.4.6) on page evrything is ok.
When I load jqgrid via ajax to jquery dialog searchoptions dropdown list doesn't work for me.
In jqgrid search box searchoptions dropdown list doesn't work for me either.
$(document).ready(function(){
jQuery("#list_bs").jqGrid({
url:'some.php',
datatype: "json",
height: 450,
width: 1050,
colNames:['FirstName','Name','Date'],
colModel:[
{name:'FirstName',index:'FirstName', width:200, sorttype:'string', searchoptions:{sopt:['bw','bn','cn','ne','ew','en']}},
{name:'Name',index:'Name', width:200, sorttype:'string', searchoptions:{sopt:['bw','bn','cn','ne','ew','en']}},
{name:'Date',index:'Date', width:100, sorttype:'string', searchoptions:{sopt:['bw','bn','cn','ne','ew','en']}},
],
rowNum:50,
rowList : [20,30,50],
loadonce:false,
multiselect : false,
mtype: "GET",
shrinkToFit: false,
rownumbers: true,
gridview: true,
pager: '#pager',
sortname: 'Name',
viewrecords: true,
sortorder: "ASC",
toolbar: [true,"top"],
});
$("#list_bs").jqGrid('navGrid', '#pager_bs',
{
edit:false,
add:false ,
del:false,
},
{},
{},
{},
{
multipleSearch: true,
showQuery: true
}
......
)
});
jQuery("#list_bs").jqGrid('filterToolbar',{ searchOperators: true,stringResult:true, searchOnEnter: false, autosearch: true ,enableClear: false});
try like below this work for me.You have give data in the dropdown in its column model
{
name: 'Name', Name: 'Title', align: 'center', editable: true, editoptions: { readonly: 'readonly' },
stype: 'select',
searchoptions: {
sopt: ['eq','cn'],
dataUrl: //get data from server
buildSelect: function (data) {
var response, s = '<select>', i;
response = jQuery.parseJSON(data);
s += '<option value="0">--Select Book Title--</option>';
if (response && response.length) {
$.each(response, function (i) {
s += '<option value="' + this.Name+ '">' + this.Name+ '</option>';
});
}
return s + '</select>';
}
}
}
I don't need dropdown in toolbar input
My search operator dropdown list doesn't open.
The problem is only when my own jqgrid is loaded by ajax in to jquery dialog.
$( "#my_dialog" ).dialog({
width:'auto',
open: function(event, ui){
$.ajax(
{
url: "some.php",
type: "POST",
data: "is_dialog=true",
error: function(){
},
beforeSend: function(){
$("#loader").show();
},
complete: function(){
$("#loader").hide();
},
success: function( strData ){
$("#dialog_content").html(strData );
}
}
);
},
});
...........
<div id="my_dialog" >
<div id="dialog_content"></div>
</div>

JqGrid Width resizing Issue with Browser resize

Can I set JqGrid width in a way that it automatically resizes with browser width.
Have tried using this.
autowidth:true,
.....
$(window).bind('resize', function () {
$("#table").setGridWidth($("#table").width());
}).trigger('resize');
Resizing isnt working as expected, When I resize the browser I expect grid to resize accordingly to that of browser width.
UPDATE:
$(function () {
$grid = $("#table");
$grid.jqGrid({
url: '../../Services/OrderService.asmx/getGlbOrders',
datatype: 'json',
mtype: 'POST',
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
serializeGridData: function (postData) {
if (postData.searchField === undefined) postData.searchField = null;
if (postData.searchString === undefined) postData.searchString = null;
if (postData.searchOper === undefined) postData.searchOper = null;
//if (postData.filters === undefined) postData.filters = null;
return JSON.stringify(postData);
},
jsonReader: {
root: "d.rows",
page: "d.page",
total: "d.total",
records: "d.records",
id: "d.names"
},
colModel: [
{ name: 'select', label: 'select', width: 50,
formatter: function radio(cellValue, option) {
return '<input type="radio" name="radio_' + option.gid + '" value=' + cellValue + ' />';
}
},
{ name: 'code', label: 'Order ID' },
{ name: 'qty', label: 'Quantity' },
{ name: 'qtyr', label: 'Remaining Qty'},
{ name: 'uts', label: 'Units' },
{ name: 'status', label: 'Status' },
],
rowNum: 10,
rowList: [10, 20, 300],
sortname: 'name',
sortorder: "asc",
pager: "#pager",
viewrecords: true,
gridview: true,
rownumbers: true,
height: 250,
autowidth: true,
caption: 'Global Order List'
}).jqGrid('navGrid', '#pager', { edit: false, add: false, del: false, search: false });
})
$(window).bind('resize', function () {
$("#table").setGridWidth($("#table").width());
}).trigger('resize');
change your code from:
$(function () {
$grid = $("#table");
$grid.jqGrid({
// etc..
}).jqGrid('navGrid', '#pager', { edit: false, add: false, del: false, search: false });
})
$(window).bind('resize', function () {
$("#table").setGridWidth($("#table").width());
}).trigger('resize');
to:
$(function () {
$grid = $("#table");
$grid.jqGrid({
// etc..
}).jqGrid('navGrid', '#pager', { edit: false, add: false, del: false, search: false });
});
$(window).bind('resize', function () {
$("#table").setGridWidth($("#table").width());
}).trigger('resize');
You have forgotten a semicolon after the end of your jqGrid function. Then the code that comes after your function is ignored.

jqGrid: Search box is disabled!

I am new to jqGrid and Stack Overflow as well..
Well, I have a problem regarding the jqGrid SearchBox. Why does it show the search box in disabled mode?
Here is my code.
jQuery(document).ready(function(){
var jsonData = '{"StartDate":"01/01/2009", "EndDate":"12/12/2010", "DateFormat":"dd/MM/yyyy", "BatchId":"21"}';
jQuery("#attendance-grid").jqGrid({
datatype: "json",
mtype: "POST",
url: "url/function",
postData: jsonData,
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
search: true,
multipleSearch : true,
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; }
},
height: 'auto',
rowNum: 10,
rowList: [10,20,30],
colNames:['Date', 'Batch', 'Enroolment No.', 'FName', 'MName', 'LName', 'Branch'],
colModel:[
{name:'date',index:'date', width:90, sorttype:"date", datefmt: 'm/d/Y', formatter:"date"},
{name:'batch_name',index:'batch_name', width:150, sortable:true},
{name:'Stud_EnrollNo',index:'Stud_EnrollNo', width:100, sortable:true},
{name:'stud_fname',index:'stud_fname', width:80, sortable:true},
{name:'stud_mname',index:'stud_mname', width:80, sortable:true},
{name:'stud_lname',index:'stud_lname', width:80, sortable:true},
{name:'currbranch',index:'currbranch', width:50, sortable:false}
],
pager: "#pattendance-grid",
loadtext: 'Loading...',
sortname: 'stud_fname',
viewrecords: true,
gridview: true,
rownumbers: true,
sortorder: 'desc',
grouping:true,
groupingView : {
groupField : ['stud_fname'],
groupColumnShow : [true],
groupText : ['<b>{0} - {1} Item(s)</b>'],
groupCollapse : true,
groupOrder: ['desc']
},
caption: "Attendance Report"
}).navGrid('#pattendance-grid',
{ search:true,
view: true,
del: false,
add: false,
edit: false,
searchtext:"Search" },
{}, // default settings for edit
{}, // default settings for add
{}, // delete
{closeOnEscape: true, multipleSearch: true,
closeAfterSearch: true }, // search options
{}
);
Probably your main problem is that you use postData parameter in the wrong way. If you use is as a string, then the postData overwrite all other typical jqGrid parameters. Try to change postData parameter as
postData: {
StartDate:"01/01/2009",
EndDate:"12/12/2010",
DateFormat:"dd/MM/yyyy",
BatchId:21
}
Moreover you should not use multipleSearch:true as jqGrid parameter: only inside of parameters of navGrid function it has any sense.
What you additionally could needed is
serializeRowData: function (data) {return JSON.stringify(data);}
where JSON.stringify is a part of json2.js from here

Resources