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

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

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

You forgot cellEdit:true

Regards

Tony

        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

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

Thanks. Fixed in GitHub and your example works in my demo.

Best Regards

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

It should work. Check your code.

Regards

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

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.

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