With Oleg and many websites help I have been working on getting cascading data bound drop downs functioning in jqGrid
I have three drop downs: Customer > Project > Task. Changing Customer should reload Project with that Customers Projects. Changing Projects should reload Tasks with that Projects Tasks.
I have actually got Project to reload with that Customers tasks by creating a change event handler in Customer which in turn calls getJson against a URL and then replaces the contents of the Project drop down with the new options. It works great.
I then applied this same logic to the Project drop down, but the Project event does not appear to fire. I have observed the following when changing the Project drop down:
- The Task drop down does not change
- The Task Json controller event is not called (it is meant to be called by
getJSONin the Project change event) - In Firebug, in the Network monitor, the call and response to the Task Json controller event does not appear.
- In Firebug it does not hit a breakpoint that I set in the Project change event handler
The Customer event handler however works perfectly, and performs all of the above 4 points as expected when I change the Customer.
I am fairly certain it is not firing the change event against the Project drop down.
If I run the web page and edit and change the Project drop down value as my very first action, it does not fire the project event handler, so I don’t think it is the Customer event resetting the Project event handler.
So, does anyone know why my Customer change event is called but my Project one is not?
Is there a way I can inspect the DOM or something and see if my event has been attached at runtime? is that the way it works?
I am using jqGrid 4.4.1
My jqGrid is setup this way:
- Uses inline editing
- click to select dblclick to edit
- A datepicker is attached the date column
- Upon edit I get the select db key value out of hidden fields but I’m hoping I can remove that.
- I have three selects next to each other
Here is the my jqGrid definition
JavaScript
x
144
144
1
$(document).ready(2
function () {3
// This is executed as soon as the DOM is loaded and before the page contents are loaded4
var lastsel;5
// $ is short for JQuery which is in turn a super overloaded function that does lots of things.6
// # means select an element by its ID name, i.e. below we have <table id="ts"7
// .jqGrid means attach a jqGrid 'thing' to all elements that have ts as their element name (there's only one)8
// jqGrid is a thing defined in the jqGrid javascript file9
$("#ts").jqGrid({10
//=============11
// Grid Setup12
url: 'Timesheet/GridData/',13
datatype: 'json',14
mtype: 'GET',15
pager: $('#pager'),16
rowNum: 30,17
rowList: [10, 20, 30, 40, 80],18
viewrecords: true,19
caption: 'Timesheet',20
height: 450,21
// Column definition22
colNames: ['hCustomer_ID', 'hProject_ID', 'hTask_ID', 'Date', 'Customer', 'Project', 'Task', 'Description', 'Hours', '$'],23
colModel: [24
{ name: 'hCustomer_ID', index: 'hCustomer_ID', editable: false, hidden: true },25
{ name: 'hProject_ID', index: 'hProject_ID', editable: false, hidden: true },26
{ name: 'hTask_ID', index: 'hTask_ID', editable: false, hidden: true },27
{ name: 'tsdate', index: 'tsdate', width: 80, editable: true, datefmt: 'yyyy-mm-dd' },28
// Defintion for customer column29
{name: 'Customer', index: 'Customer', width: 250, align: 'left', editable: true, edittype: "select",30
editoptions: {31
// Default URL used to populate drop down when the column goes into edit mode 32
dataUrl: 'Timesheet/CustomerList',33
dataEvents: [34
{35
// this is the change handler. This is called when the customer is changed36
type: 'change',37
fn: function (e) {38
// get a reference to the project and task drop downs on this same row39
var eProject = '#' + $(this).attr("id").replace("_Customer", "_Project");40
var eTask = '#' + $(this).attr("id").replace("_Customer", "_Task");41
// Call getJSON to get data from a URL and process it with a callback function42
$.getJSON(43
// the URL to call44
'Timesheet/ProjectListJSON',45
// the parameter(s) to pass to the URL46
{Customer_ID: this.value },47
// The callback function. The results of the JSON call are passed into jData48
function (jData) {49
var selectHtml = ""50
// Repopulate the project drop down with the results of the JSON call51
$.each(52
jData,53
function (jdIndex, jdData) {54
selectHtml = selectHtml + "<option value='" + jdData.Value + "'>" + jdData.Text + "</option>";55
});56
// dont use innerHTML as it is not supported properly by IE57
// insted use jQuery html to change the select list options58
$(eProject).html(selectHtml);59
// blank out tasks60
$(eTask).html("");61
} // END getJSON callback function definition62
); // END getJSON function call63
} // END change event definition64
}] // END dataEvents definition65
} // END editoptions list66
}, // END Customer jqGrid field definition67
// Definition for Project drop down68
{name: 'Project', index: 'Project', width: 250, align: 'left', editable: true, edittype: "select",69
editoptions: {70
dataUrl: 'Timesheet/ProjectList',71
dataEvents: [72
{73
type: 'change',74
fn: function (e) {75
var eTask = '#' + $(this).attr("id").replace("_Project", "_Task");76
$.getJSON(77
'Timesheet/TaskListJSON',78
{ CustomerProject_ID: this.value },79
function (jData) {80
var selectHtml = "";81
$.each(82
jData,83
function (jdIndex, jdData) {84
selectHtml = selectHtml + "<option value='" + jdData.Value + "'>" + jdData.Text + "</option>";85
});86
$(eTask).html(selectHtml);87
} // END getJSON callback function definition88
); // END getJSON function call89
} // END change event handler definition90
}] // END dataevents definition91
} // END editoptions list92
}, // END Project jqGrid field definition93
{name: 'Task', index: 'Task', width: 250, align: 'left', editable: true, edittype: "select", editoptions: { dataUrl: 'Timesheet/TaskList'} },94
{ name: 'Desc', index: 'Desc', width: 300, align: 'left', editable: true },95
{ name: 'Hours', index: 'Hours', width: 50, align: 'left', editable: true },96
{ name: 'Charge', index: 'Charge', edittype: 'checkbox', width: 18, align: 'center', editoptions: { value: "0:1" }, formatter: "checkbox", formatoptions: { disabled: false }, editable: true }97
],98
//=============99
// Grid Events100
// when selecting, undo anything else101
onSelectRow: function (rowid, iRow, iCol, e) {102
if (rowid && rowid !== lastsel) {103
// $(this).jqGrid('restoreRow', lastsel);104
lastsel = rowid;105
}106
},107
// double click to edit108
ondblClickRow: function (rowid, iRow, iCol, e) {109
// browser independent stuff110
if (!e) e = window.event;111
var element = e.target || e.srcElement112
113
// When editing, change the drop down datasources to filter on the current parent114
$(this).jqGrid('setColProp', 'Project', { editoptions: { dataUrl: 'Timesheet/ProjectList?Customer_ID=' + $(this).jqGrid('getCell', rowid, 'hCustomer_ID')} });115
$(this).jqGrid('setColProp', 'Task', { editoptions: { dataUrl: 'Timesheet/TaskList?CustomerProject_ID=' + $(this).jqGrid('getCell', rowid, 'hProject_ID')} });116
117
// Go into edit mode (automatically moves focus to first field)118
// Use setTimout to apply the focus and datepicker after the first field gets the focus119
$(this).jqGrid(120
'editRow',121
rowid,122
{123
keys: true,124
oneditfunc: function (rowId) {125
setTimeout(function () {126
$("input, select", element).focus();127
$("#" + rowId + "_tsdate").datepicker({ dateFormat: 'yy-mm-dd' });128
}, 50);129
}130
}131
);132
133
}, // end ondblClickRow event handler134
postData:135
{136
startDate: function () { return $('#startDate').val(); }137
}138
}); // END jQuery("#ts").jqGrid139
140
$("#ts").jqGrid('navGrid', '#pager', { view: false, edit: false, add: false, del: false, search: false });141
$("#ts").jqGrid('inlineNav', "#pager");142
143
}); // END jQuery(document).ready(function () {144
FIXED CODE HERE
I moved the change event handler definition out of the column definition and into the dblclick event handler. It’s still not perfect. I’m sure there is some overhead in attaching the event handler every time, and when Customer is changed, it updates and selects the first Project but clears the Tasks.
JavaScript
1
152
152
1
$(document).ready(2
function () {3
// This is executed as soon as the DOM is loaded and before the page contents are loaded4
var lastsel;5
// $ is short for JQuery which is in turn a super overloaded function that does lots of things.6
// # means select an element by its ID name, i.e. below we have <table id="ts"7
// .jqGrid means attach a jqGrid 'thing' to all elements that have ts as their element name (there's only one)8
// jqGrid is a thing defined in the jqGrid javascript file9
$("#ts").jqGrid({10
//=============11
// Grid Setup12
url: 'Timesheet/GridData/',13
datatype: 'json',14
mtype: 'GET',15
pager: $('#pager'),16
rowNum: 30,17
rowList: [10, 20, 30, 40, 80],18
viewrecords: true,19
caption: 'Timesheet',20
height: 450,21
// Column definition22
colNames: ['hCustomer_ID', 'hProject_ID', 'hTask_ID', 'Date', 'Customer', 'Project', 'Task', 'Description', 'Hours', '$'],23
colModel: [24
{ name: 'hCustomer_ID', index: 'hCustomer_ID', editable: false, hidden: true },25
{ name: 'hProject_ID', index: 'hProject_ID', editable: false, hidden: true },26
{ name: 'hTask_ID', index: 'hTask_ID', editable: false, hidden: true },27
{ name: 'tsdate', index: 'tsdate', width: 80, editable: true, datefmt: 'yyyy-mm-dd' },28
// Defintion for customer column29
{name: 'Customer', index: 'Customer', width: 250, align: 'left', editable: true, edittype: "select",30
editoptions: {31
// Default URL used to populate drop down when the column goes into edit mode 32
dataUrl: 'Timesheet/CustomerList',33
dataEvents: [34
{35
// this is the change handler. This is called when the customer is changed36
type: 'change',37
fn: function (e) {38
// get a reference to the project and task drop downs on this same row39
var eProject = '#' + $(this).attr("id").replace("_Customer", "_Project");40
var eTask = '#' + $(this).attr("id").replace("_Customer", "_Task");41
// Call getJSON to get data from a URL and process it with a callback function42
$.getJSON(43
// the URL to call44
'Timesheet/ProjectListJSON',45
// the parameter(s) to pass to the URL46
{Customer_ID: this.value },47
// The callback function. The results of the JSON call are passed into jData48
function (jData) {49
var selectHtml = ""50
// Repopulate the project drop down with the results of the JSON call51
$.each(52
jData,53
function (jdIndex, jdData) {54
selectHtml = selectHtml + "<option value='" + jdData.Value + "'>" + jdData.Text + "</option>";55
});56
// dont use innerHTML as it is not supported properly by IE57
// insted use jQuery html to change the select list options58
$(eProject).html(selectHtml);59
// clear task list60
$(eTask).html(""); 61
} // END getJSON callback function definition62
); // END getJSON function call63
} // END change event definition64
}] // END dataEvents definition65
} // END editoptions list66
}, // END Customer jqGrid field definition67
// Definition for Project drop down68
{name: 'Project', index: 'Project', width: 250, align: 'left', editable: true,69
edittype: "select", editoptions: { dataUrl: 'Timesheet/ProjectList'}70
}, // END Project jqGrid field definition71
{name: 'Task', index: 'Task', width: 250, align: 'left', editable: true, edittype: "select", editoptions: { dataUrl: 'Timesheet/TaskList'} },72
{ name: 'Desc', index: 'Desc', width: 300, align: 'left', editable: true },73
{ name: 'Hours', index: 'Hours', width: 50, align: 'left', editable: true },74
{ name: 'Charge', index: 'Charge', edittype: 'checkbox', width: 18, align: 'center', editoptions: { value: "0:1" }, formatter: "checkbox", formatoptions: { disabled: false }, editable: true }75
],76
//=============77
// Grid Events78
// when selecting, undo anything else79
onSelectRow: function (rowid, iRow, iCol, e) {80
if (rowid && rowid !== lastsel) {81
// $(this).jqGrid('restoreRow', lastsel);82
lastsel = rowid;83
}84
},85
// double click to edit86
ondblClickRow: function (rowid, iRow, iCol, e) {87
// browser independent stuff88
if (!e) e = window.event;89
var element = e.target || e.srcElement90
91
// When editing, change the drop down datasources to filter on the current parent92
// By default tasks are limited to the current project93
$(this).jqGrid('setColProp', 'Task', { editoptions: { dataUrl: 'Timesheet/TaskList?CustomerProject_ID=' + $(this).jqGrid('getCell', rowid, 'hProject_ID')} });94
95
// By default projects are limited to the current Customer (dataUrl)96
// Also attach event handler to autopopulate tasks (dataEvents)97
$(this).jqGrid('setColProp', 'Project', {98
// editoptions: { dataUrl: 'Timesheet/ProjectList?Customer_ID=' + $(this).jqGrid('getCell', rowid, 'hCustomer_ID')} });99
editoptions: {100
dataUrl: 'Timesheet/ProjectList?Customer_ID=' + $(this).jqGrid('getCell', rowid, 'hCustomer_ID'),101
dataEvents: [102
{103
type: 'change',104
fn: function (e) {105
var eTask = '#' + $(this).attr("id").replace("_Project", "_Task");106
$.getJSON(107
'Timesheet/TaskListJSON',108
{ CustomerProject_ID: this.value },109
function (jData) {110
var selectHtml = "";111
$.each(112
jData,113
function (jdIndex, jdData) {114
selectHtml = selectHtml + "<option value='" + jdData.Value + "'>" + jdData.Text + "</option>";115
});116
$(eTask).html(selectHtml);117
} // END getJSON callback function definition118
); // END getJSON function call119
} // END change event handler definition120
}] // END dataevents definition121
} // END editoptions list122
} // END data to be applied to setColProp123
); // END jqGrid setColProp124
125
// Go into edit mode (automatically moves focus to first field)126
// Use setTimout to apply the focus and datepicker after the first field gets the focus127
$(this).jqGrid(128
'editRow',129
rowid,130
{131
keys: true,132
oneditfunc: function (rowId) {133
setTimeout(function () {134
$("input, select", element).focus();135
$("#" + rowId + "_tsdate").datepicker({ dateFormat: 'yy-mm-dd' });136
}, 50);137
}138
}139
);140
141
}, // end ondblClickRow event handler142
postData:143
{144
startDate: function () { return $('#startDate').val(); }145
}146
}); // END jQuery("#ts").jqGrid147
148
$("#ts").jqGrid('navGrid', '#pager', { view: false, edit: false, add: false, del: false, search: false });149
$("#ts").jqGrid('inlineNav', "#pager");150
151
}); // END jQuery(document).ready(function () {152
Advertisement
Answer
OK, the issue was that in the ondblClickRow event handler I was setting the editoptions / dataUrl property. As I was not also specifying the editoptions / dataEvents property at this point it was basically overwriting the static event handler with nothing.
in the ondblClickRow event handler I was only overwriting Project and Tasks drop down, which explains why the Project handler was being removed and not the Customer one.
Apologies to Oleg: I did not post the full code at the start, so I did not include the double click event.
Anyway Oleg if you can suggest how I can preserve the event handler I can award you the answer. Otherwise I will award this as the answer, even though your help has been invaluable. I’m guessing I might need to move the event handler definition down to the dblclick event handler rather than in the column definition?