Guriddo » Topic: dataUrl (editoptions for select) is not working in JQGRID

dataUrl (editoptions for select) is not working in JQGRID

Guriddo
ajax, dataSelect, dataUrl, editoptions, inlinenav, jqgrid
dataUrl (editoptions for select) is not working in JQGRID

Tagged: ajax, dataSelect, dataUrl, editoptions, inlinenav, jqgrid

This topic has 12 replies, 2 voices, and was last updated 8 years, 7 months ago by guriddo.support.

Creator

Topic

February 24, 2016 at 2:58 pm #124884

NM1988

Participant

Hi,

I’m using JQGRID and code as below

$("#jqGridDel").jqGrid({
url: "Data.aspx/BindInfo",
datatype: 'json',
mtype: 'POST',
serializeGridData: function (postData) {
return JSON.stringify(postData);
},
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },

colName: ['DelId', 'Name', 'DeliveryName', 'Status'],
colModel: [
{
label: 'Del No',
name: 'DelId',
width: 35
},
{
label: 'Gate',
name: 'Name',
width: 200,
editable: true,
edittype: "select",
foramtter: "Select",
editoptions: {
dataUrl: "Data.aspx/BindDDInfo"

}
},
{
label: 'Delivery',
name: 'DeliveryName',
width: 150,
editable: true
},
{
label: 'Active',
name: 'Status',
width: 40,
editable: true,
align: "center",
formatter: "checkbox",
edittype: "checkbox",
editoptions: { value: '1:0' }
}
],
loadonce: true,
width: 1050,
height: "100%",
pager: "#jqGridDelPager",
caption: "Configuration",
rowNum: 15,
jsonReader: {
page: function (obj) { return 1; },
total: function (obj) { return 1; },
records: function (obj) { return obj.d.length; },
root: function (obj) { return obj.d; },
repeatitems: false,
id: "QGDelId"
},
onSelectRow: function (id) {
if (id && id !== lastSelQGDel) {
lastSelQGDel = id;
}

},
ajaxRowOptions: { contentType: 'application/json; charset=utf-8' },
serializeRowData: function (postData) {
return JSON.stringify({ editQGData: postData });
},
editurl: "Data.aspx/SaveData"
});

$('#jqGridDel').navGrid("#jqGridDelPager", { edit: false, add: false, del: false, refresh: false, search: false, view: false });
$('#jqGridDel').inlineNav('#jqGridDelPager',
// the buttons to appear on the toolbar of the grid
{
edit: true,
add: true,
del: true,
refresh: true,
cancel: true,
editParams: {
keys: true,
rowid: lastSelQGDel,
restoreAfterError: true,
reloadAfterSubmit: true,
successfunc: function (result) {
if (result.responseJSON.d == "Success")
alert("Data saved successfully!!");
else
alert("There is some error in data processing");
setTimeout(function () {
$("#jqGridDel").jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid');
}, 50);
}
},
addParams: {
keys: true,
addRowParams: {
successfunc: function (result) {
if (result.responseJSON.d == "Success")
alert("Data saved successfully!!");
else
alert("There is some error in data processing");
setTimeout(function () {
$("#jqGridDel").jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid');
}, 50);
}
}
}

100

101

102

103

104

105

106

107

108

109

110

$("#jqGridDel").jqGrid({

url: "Data.aspx/BindInfo",

datatype: 'json',

mtype: 'POST',

serializeGridData: function (postData) {

return JSON.stringify(postData);

ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },

colName: ['DelId', 'Name', 'DeliveryName', 'Status'],

colModel: [

{

label: 'Del No',

width: 35

{

label: 'Gate',

width: 200,

editable: true,

edittype: "select",

foramtter: "Select",

editoptions: {

dataUrl: "Data.aspx/BindDDInfo"

}

{

label: 'Delivery',

width: 150,

editable: true

{

label: 'Active',

width: 40,

editable: true,

align: "center",

formatter: "checkbox",

edittype: "checkbox",

editoptions: { value: '1:0' }

}

loadonce: true,

width: 1050,

height: "100%",

pager: "#jqGridDelPager",

caption: "Configuration",

rowNum: 15,

jsonReader: {

page: function (obj) { return 1; },

total: function (obj) { return 1; },

records: function (obj) { return obj.d.length; },

root: function (obj) { return obj.d; },

repeatitems: false,

id: "QGDelId"

onSelectRow: function (id) {

if (id && id !== lastSelQGDel) {

lastSelQGDel = id;

}

ajaxRowOptions: { contentType: 'application/json; charset=utf-8' },

serializeRowData: function (postData) {

return JSON.stringify({ editQGData: postData });

editurl: "Data.aspx/SaveData"

});

$('#jqGridDel').navGrid("#jqGridDelPager", { edit: false, add: false, del: false, refresh: false, search: false, view: false });

$('#jqGridDel').inlineNav('#jqGridDelPager',

// the buttons to appear on the toolbar of the grid

{

edit: true,

add: true,

del: true,

refresh: true,

cancel: true,

editParams: {

keys: true,

rowid: lastSelQGDel,

restoreAfterError: true,

reloadAfterSubmit: true,

successfunc: function (result) {

if (result.responseJSON.d == "Success")

alert("Data saved successfully!!");

else

alert("There is some error in data processing");

setTimeout(function () {

$("#jqGridDel").jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid');

}, 50);

}

addParams: {

keys: true,

addRowParams: {

successfunc: function (result) {

if (result.responseJSON.d == "Success")

alert("Data saved successfully!!");

else

alert("There is some error in data processing");

setTimeout(function () {

$("#jqGridDel").jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid');

}, 50);

}

Using below reference files..

I’m able to load the data and save the same from JQGRID to SQL Database and vice versa.

but, select option (column: Gate) is not loading any data.. i tried to debug the code and understood that the dataUrl is not firing during editing row via inline-nav.

the code behind function BindDDInfo returns string in <Select> <Option>……</Option> </Select> format.

Can any one help me out to get the data into dropdown in JQGRID.

Kind Regards,

NM1988

Creator

Topic

Viewing 12 replies - 1 through 12 (of 12 total)

Author

Replies

February 25, 2016 at 11:11 am #124885

guriddo.support

Participant

Hello,

We have tested your code and it seems to work as expected.
The main reason that you do not load data is that the expression:

dataUrl: “Data.aspx/BindDDInfo”

is not valid url. You can very easy see this in debug console using Chrome or FireBug or newer IE.

Kind Regards,
Will

Guriddo Support Team

February 25, 2016 at 11:28 am #124886

NM1988

Participant

Thanks Team for your response.

checked through F12 (in IE9), could see Response Header as below
Response HTTP/1.1 200 OK
Server ASP.NET Development Server/10.0.0.0
Date Wed, 24 Feb 2016 15:07:16 GMT
X-AspNet-Version 4.0.30319
Cache-Control no-cache, no-store
Pragma no-cache
Expires -1
Content-Type text/html; charset=utf-8
Content-Length 69186
Connection Close
Response body returning data.aspx html page and not sure what went wrong.

I’ve added ajaxSelectOptions: { cache: false, type: ‘POST’ } — still not working.

Note: I’ve placed debug point in BindDDInfo function and it’s not getting hit from dataUrl but debug point got hit when i’ve mentioned same function in url (to pick data to jqgrid).

So, not sure what went wrong. Could you please have a look on this.

This reply was modified 8 years, 7 months ago by NM1988.

February 25, 2016 at 11:45 am #124888

guriddo.support

Participant

Hello,

To be a clear BinDDInfo is a function or url?
If the dataUrl is function it should return URL string and not data.

In ajaxSelectOptions add error function like this

...jqGrid({
...
ajaxSelectOptions : {
error : function(xhr, status, error) {
   alert(error);
},
...
}
...

...jqGrid({

...

ajaxSelectOptions : {

error : function(xhr, status, error) {

alert(error);

...

}

...

Regards,
Will

Guriddo Support Team

February 25, 2016 at 2:01 pm #124889

NM1988

Participant

BindDDInfo is webmethod in codebehind (in Data.aspx). I’ll try the mentioned one and will let you know the status.

Kind regards,

NM1988

February 25, 2016 at 2:59 pm #124890

NM1988

Participant

Hi Team,

I’ve tried the option (error) but nothing resulted. I’ve found something interesting…. i gave ‘Data.aspx/Bind’ for dataUrl where there is no webmethod ‘Bind’ exists in codebehind (in Data.aspx.cs) but still ResponseHeader stating HTTP/1.1 200 OK and understood that Responsebody filled with Data.aspx (even with BindDDInfo). So, any issues with Jqgrid version?

February 25, 2016 at 3:48 pm #124891

guriddo.support

Participant

Hello,

First which version is used?
Which jQuery version is used?

There is nothing special we just use standard jQuery ajax.
the code behind this is something like this:

$.ajax($.extend({
url: $.isFunction(options.dataUrl) ? options.dataUrl.call($t, rowid, vl, String(options.name)) : options.dataUrl,
type : "GET",
dataType: "html",
data: $.isFunction(postData) ? postData.call($t, rowid, vl, String(options.name)) : postData,
context: {elem:elem, options:options, vl:vl},
success: function(data){
....

$.ajax($.extend({

url: $.isFunction(options.dataUrl) ? options.dataUrl.call($t, rowid, vl, String(options.name)) : options.dataUrl,

type : "GET",

dataType: "html",

data: $.isFunction(postData) ? postData.call($t, rowid, vl, String(options.name)) : postData,

context: {elem:elem, options:options, vl:vl},

success: function(data){

....

You can test what is returned from this if yo do not use jqGrid.
Make simple ajax call like this and see the response

Kind Regards,
Will

This reply was modified 8 years, 7 months ago by guriddo.support.

Guriddo Support Team

February 25, 2016 at 5:21 pm #124893

NM1988

Participant

Hi Team,

I’ve found the issue, that is due to HttpHandler and corrected the same. Now, i’ve changed my webmethod to return ‘List<Dictionary<string, object>>’ and the below code

ajaxSelectOptions: { type: ‘POST’,
contentType: ‘application/json; charset=utf-8’,
datatype: ‘json’,
success: function (result) {
alert(JSON.stringify(result));
}
}

Alert is showing as below
{“d”:[{“ID”:1,”Name”:”Test1″},{“ID”:2,”Name”:”Test2″}]}

but, buildSelect is not getting hit ,

dataUrl: “Data.aspx/BindDDInfo”,
buildSelect: function (response) {
var data = typeof response === “string” ? JSON.stringify(response) : response,
s = “<select>”;
s += ‘<option value=”0″>–Select–</option>’;
$.each(data, function () {
s += ‘<option value=”‘ + this.ID + ‘”>’ + this.Name + ‘</option>’;
});
return s + “</select>”;
}

Could you please have an idea on this.

February 25, 2016 at 5:31 pm #124894

guriddo.support

Participant

Hello,

If you do console.log(response) in buildSelect what you see?
just alert the response in buildSelect and see what is?

Regards

Guriddo Support Team

February 25, 2016 at 7:04 pm #124895

NM1988

Participant

Hi Team,

I’ve tried the console.log(response) and alert(response) in buildSelect but it doesn’t give any popup.

Kind Regards,

NM1988

February 26, 2016 at 10:35 am #124899

guriddo.support

Participant

Hello,

The reason not to run buildSelect are mainly two

You have a mistake written the name of the function.
You do not put it in the right place

Be a sure that both are meet.

You do not answer our question – which version of jqGrid and jquery are used?

Kind Regards,

Will

Guriddo Support Team

February 27, 2016 at 5:02 am #124924

NM1988

Participant

Hi Team,

Apologies for delay!!

I’m usnig Guriddo_jqGrid_JS_5.0.2

Kind Regards, NM1988

February 29, 2016 at 10:53 am #124925

guriddo.support

Participant

Hello,

We have a demo which work file. You can look at this example

I think that is something wrong with your server response and how the data is send to the client.

Kind Regards,

Will

Guriddo Support Team

Author

Replies

Viewing 12 replies - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.

Registered Users: 12,249
Forums: 7
Topics: 10,947
Replies: 23,146
Topic Tags: 324
Empty Topic Tags: 9

9 Users Online

Users: 9 Bots

Stay connected with us in your favorite flavor!

dataUrl (editoptions for select) is not working in JQGRID

Search Forum

Recent Replies

Forum Statistics

UserOnline