Forum
Log In
Home
Topic RSS
18:34
19/08/2009
Offline
Hi,
I'm creating a jqgrid with drop down columns and I'm using cell editing. I need the options of the drop down columns to change dynamically and I've tried implementing this by setting the column to be:
{ name: "AccountLookup", index: "AccountLookup", width: 90, editable: true, resizable: true, edittype: "select", formatter: "select" },
and then in the beforeCellEdit event I have:
beforeEditCell: function(id, name, val, iRow, iCol) {
if(name=='AccountLookup') {
var listdata = GetLookupValues(id, name);
if (listdata == null) listdata = "1:1";
jQuery("#grid").setColProp(name, { editoptions: { value: listdata.toString()} })
}
},
GetLookupValues just returns a string in the format "1:One;2:Two" etc. That works fine however the options are populated one click behind - ie i click on AccountID in row 1, and the dropdown is empty, however when I then click on AccountID in row 3 the options I set in the row 1 click are shown in the row 3 click. And so on. So always one click behind.
Is there another way of achieving what I need? Bacially the dropdown options displayed are always changing and I need to load them as user enters the cell for editing. Perhaps I can somehow get at the select control in the beforeEditCell event and manually enter its values instead of using the setColProp call? If so could I get an example of doing that please?
Another thing - if the dropdown is empty and a user doesn't cancel the cell edit, the grid script throws an error. I'm using clientarray editing if that makes a difference. Sometimes the dropdowns won't have any value and I need the grid to be able to accept a nothing value. I guess as a work around I can add an empty value myself so this isn't too bad, however being able to load the drop down options dynamically before user enters the cell to edit its value is critical to achieving my goal.
Greatly appreciate any help.
Regards,
Jo
06:33
Moderators
30/10/2007
Offline
Hello,
Use formatCell event and not beforeEditCell -
the beforeEditCell is called after we create the element (i.e we use the colmodel), but formatCell will do the job, since it is called before creation of the element.
Regards
Tony.
For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.
19:02
19/08/2009
Offline
Tony,
I've tried using the formatCell event and I get the same result. Perhaps this can't be accomplished using setColProp?
If not how else can I redraw the select options for the cell?
Regards,
Jo
03:26
Moderators
30/10/2007
Offline
Hello,
It should work. Check your code.
Regards
Tony
For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.
22:36
19/08/2009
Offline
Tony,
I'm using version 3.5 and here's the code I have:
jQuery(document).ready(function() {
var gridimgpath = '../jQuery/jqGrid3.5/themes/basic/images/';
jQuery("#grid").jqGrid({
datatype: "local",
mtype: "GET",
height: 200, //{4},
colNames: ["RecordID", "AccountID", "EntityID", "YesNo", "Number1", "Number2", "ImportantDate"],
colModel: [
{ name: "RecID", index: "RecID", key: true, visible: false, width: 90, sorttype: "long", editable: false, resizable: true },
{ name: "AccountID", index: "AccountID", width: 90, editable: true, resizable: true, edittype: "select", formatter: "select" },
{ name: "EntityID", index: "EntityID", width: 90, editable: true, resizable: true, edittype: "select", formatter: "select", editoptions: { value: "1:Entity1;2:Entity2;3:Entity3;4:Entity4"} },
{ name: 'YesNo', width: 40, align: 'left', editable: true, formatter: checkboxFormatter, edittype: 'checkbox' },
{ name: "Number1", index: "Number1", width: 60, align: "right", editable: true, resizable: true, formatter: "currency", editoptions: { size: 10} },
{ name: "Number2", index: "Number2", width: 60, align: "right", editable: true, resizable: true, formatter: "currency", editoptions: { size: 10} },
{ name: "ImportantDate", index: "ImportantDate", width: 130, editable: true, resizable: true, sorttype: "date", editoptions: { size: 12, dataInit: function(elem) { showdate(elem); } } }
],
formatCell: function(id, name, val, iRow, iCol) {
if (name == "AccountID") {
var listdata = "1:Account1;2:Account2;3:Account3;4:Account4";
jQuery("#grid").setColProp('AccountID', { editoptions: { value: listdata.toString()} });
}
},
rowNum: 5,
rowList: [5, 10, 20, 50, 100, 400],
imgpath: gridimgpath,
pager: jQuery("#gridpager"),
sortname: "RecID",
viewrecords: true,
sortorder: "asc",
forceFit: true,
cellEdit: true,
cellsubmit: "clientArray",
viewsortcols: true,
rownumbers: true,
footerrow: true,
caption: "Test"
}).navGrid("#gridpager", { edit: false, add: true, del: true, search: false, view: false })
.navButtonAdd("#gridpager", { caption: "Save", onClickButton: function(id) { SaveChanges(); }, position: "last" });
function showdate(elem) {
$(elem).datepicker({ changeMonth: true, changeYear: true, yearRange: "-20:+20", dateFormat: "dd/mm/yy" });
};
function checkboxFormatter(cellvalue, options, rowObject) {
cellvalue = cellvalue + "";
cellvalue = cellvalue.toLowerCase();
var bchk = cellvalue.search(/(false|0|no|off|n)/i) < 0 ? " checked=\\"checked\\"" : "";
//$(el).html("<input type='checkbox' onclick=\\"ajaxSave('" + cval.rowId + "', this);\\" " + bchk + " value='" + el + "' offval='no' />");
return "<input type='checkbox' onclick=\\"ajaxSave('" + options.rowId + "', this);\\" " + bchk + " value='" + cellvalue + "' offval='no' />"
}
function ajaxSave(rowid, curCheckbox) {
//ajax Save code
}
var mydata3 = [
{ RecID: "12345", AccountID: "1", EntityID: "2", YesNo: "True", Number1: "10.00", Number2: "0.00", ImportantDate: "2007-12-03" },
{ RecID: "23456", AccountID: "1", EntityID: "4", YesNo: "False", Number1: "2.60", Number2: "3.00", ImportantDate: "2007-12-03" },
{ RecID: "34567", AccountID: "2", EntityID: "3", YesNo: "True", Number1: "34.00", Number2: "3.00", ImportantDate: "2007-12-03" },
{ RecID: "45678", AccountID: "3", EntityID: "1", YesNo: "True", Number1: "22.00", Number2: "2.00", ImportantDate: "2007-12-03" },
{ RecID: "56789", AccountID: "1", EntityID: "1", YesNo: "True", Number1: "10.00", Number2: "9.00", ImportantDate: "2007-12-03" },
{ RecID: "67890", AccountID: "4", EntityID: "3", YesNo: "True", Number1: "1.00", Number2: "7.00", ImportantDate: "2007-12-03" },
{ RecID: "76543", AccountID: "3", EntityID: "3", YesNo: "True", Number1: "0.60", Number2: "10.00", ImportantDate: "2007-12-03" },
{ RecID: "87654", AccountID: "1", EntityID: "2", YesNo: "True", Number1: "67.00", Number2: "4.00", ImportantDate: "2007-12-03" },
{ RecID: "98765", AccountID: "1", EntityID: "4", YesNo: "True", Number1: "23.00", Number2: "0.09", ImportantDate: "2007-12-03" }
];
for (var i = 0; i < mydata3.length; i++)
jQuery("#grid").addRowData(mydata3[i].id, mydata3[i]);
});
When I click onto the Account column for the first time, the dropdown is empty. When I click for the second time, it then has the values. I need it to have the values on the first click - otherwise the values are always one step behind.
Regards,
Jo
04:14
Moderators
30/10/2007
Offline
Hello,
Thanks. Fixed in GitHub and your example works in my demo.
Best Regards
Tony
For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.
20:03
19/08/2009
Offline
Great - thanks Tony!
Can you please give an indication as to when a new build of 3.5 will be available so that I can get this to work too?
Regards,
Jo
18:28
Hi Guys, I pulled the latest GitHub today, and created a jqGrid thus:
jQuery("#event").jqGrid({
url:'/index.php/EventController/search',
mtype:"post",
width:740,
colNames:['Event No','Manager', 'Event Name','parent_id'],
colModel:[
{name:'id',index:'id', width:50, align:"right", editable:false,editoptions:{readonly:true,size:10}},
{name:'manager',index:'manager',editable:false, width:80,
editoptions:{rows:"1",cols:"20", readonly:true},
formoptions:{ rowpos:1,elmprefix:" " }},
{name:'name',index:'name',editable:true, width:100,
edittype:"select", formatter:"select",
editoptions:{rows:"1",cols:"20"},
formoptions:{ rowpos:2,elmprefix:" " }},
{name:'parent_id',index:'parent_id',editable:false, width:70, hidden:true,
editoptions:{rows:"1",cols:"20"},
formoptions:{ rowpos:20,elmprefix:" " }}
],
formatCell: function (id, cellname, value, iRow, iCol) {
var listdata = "1:Account1;2:Account2;3:Account3;4:Account4;";
if (cellname == "name") {
//var listdata = GetNameValues(id, name);
//if (listdata == null) listdata = "1:Unknown" ;
jQuery("#event").setColProp(cellname, {editoptions: {
value: listdata.toString()
} });
}
},
rowNum:10,
rowList:[10,20,50,100],
pager: jQuery('#pager1'),
etc
in the grid definition, but I can't get Javascript to execute the function, tracing the program execution using Firebug, I can breakpoint the formatCell: line but the next line executed is the rowNum:10, nothing inside the function is ever executed.
Any ideas?
Thx
Martin
04:55
Moderators
30/10/2007
Offline
Hello,
You forgot cellEdit:true
Regards
Tony
For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.
18:12
19/08/2009
Offline
Tony,
I've got the select options loading correctly now when editing, however because I'm setting the edit options on formatCell, and hence there's nothing in there until the user click to edit the cell, the initial value when the grid loads comes up as "undefined".
Is there a way to force the grid to display the value passed in the table data, even if it doesn't exist in the drop down? Or to intercept the initial loading for each row and add the one option it needs based on the initial cell value? It would be the same case for paging.
Thanks.
Jo
04:04
Moderators
30/10/2007
Offline
Hello,
Could you please set so that formatCell return the value - i.e
formatCell : function(rowid, cellname, value, iRow, iCol)
{
// do something here
return value;
}
Regards
Tony
For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.
20:05
19/08/2009
Offline
Tony,
I've done that - that cleans up the editing, however when the grid first loads I still get undefined values for all cells in that column, as the formatCell is not being hit until I edit the cell and hence the dropdown values are empty.
So I need to somehow populate the cells initially (on load or just after) with one value - just the one they have currently selected, in order for the initial value to be displayed.
Where should I be doing that?
Thanks,
Jo
Most Users Ever Online: 715
Currently Online:
47 Guest(s)
Currently Browsing this Page:
2 Guest(s)
Top Posters:
OlegK: 1255
markw65: 179
kobruleht: 144
phicarre: 132
YamilBracho: 124
Renso: 118
Member Stats:
Guest Posters: 447
Members: 11373
Moderators: 2
Admins: 1
Forum Stats:
Groups: 1
Forums: 8
Topics: 10592
Posts: 31289
Newest Members:
, razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.comModerators: tony: 7721, Rumen[Trirand]: 81
Administrators: admin: 66
