Data not loading initially but appears on edit

[haamro]

I am trying to create a datagrid with Multiple combobox, but I am not seeing the data when I am loading it. But it does appears on the grid when I click edit. Is there something I am missing here.

Also the field day1,day2,day3 ... goes upto 30/31

this is the JSON for data

Code:

{"day1":null,"day2":null,"day3":"2","day4":"5","day5":null,"user":"John Doe","userid":"0001"}

this is the JSON for combobox [Shifts]

Code:

{"ID":"1","shift":"D"},{"ID":"2","shift":"4h"},{"ID":"3","shift":"6h"},{"ID":"4","shift":"8h"},{"ID":"5","shift":"10h"}

Code:

<table id="tt" width=100%></table>

<script type="text/javascript">   

$(function(){
    $('#tt').datagrid({
        title:'Monthly View',
        iconCls:'icon-edit',
        singleSelect:true,
        idField:'user',
        url:'json.php',
	frozenColumns:[[
        {field:'user',title:'User',width:120},
		{field:'action',title:'Action',width:70,align:'center',
                formatter:function(value,row,index){
                    if (row.editing){
                        var s = '<a href="#" onclick="saverow(this)">Save</a> ';
                        var c = '<a href="#" onclick="cancelrow(this)">Cancel</a>';
                        return s+c;
                    } else {
                        var e = '<a href="#" onclick="editrow(this)">Edit</a> ';
                        
                        return e;
                    }
                }
            },
		]],
        columns:[[
			
     {field:'day1',title:'1',width:50,
					formatter:function(value,row){
								return row.shift;
								},
								
					editor:{
						type:'combobox',
						options:{
						valueField:'ID',
						textField:'shift',
						url:'shifts.php',
						editable:false,
					}
				}
			},




     {field:'day2',title:'2',width:50,
					formatter:function(value,row){
								return row.shift;
								},
								
					editor:{
						type:'combobox',
						options:{
						valueField:'ID',
						textField:'shift',
						url:'shifts.php',
						editable:false,
					}
				}
			},




     {field:'day3',title:'3',width:50,
					formatter:function(value,row){
								return row.shift;
								},
								
					editor:{
						type:'combobox',
						options:{
						valueField:'ID',
						textField:'shift',
						url:'shifts.php',
						editable:false,
					}
				}
			},




     {field:'day4',title:'4',width:50,
					formatter:function(value,row){
								return row.shift;
								},
								
					editor:{
						type:'combobox',
						options:{
						valueField:'ID',
						textField:'shift',
						url:'shifts.php',
						editable:false,
					}
				}
			},




     {field:'day5',title:'5',width:50,
					formatter:function(value,row){
								return row.shift;
								},
								
					editor:{
						type:'combobox',
						options:{
						valueField:'ID',
						textField:'shift',
						url:'shifts.php',
						editable:false,
					}
				}
			},




			]],
        onBeforeEdit:function(index,row){
            row.editing = true;
            updateActions(index);
		
        },
        onAfterEdit:function(index,row){
            row.editing = false;
            updateActions(index);	
        },
        onCancelEdit:function(index,row){
            row.editing = false;
            updateActions(index);
        }
    });
});

function updateActions(index){
    $('#tt').datagrid('updateRow',{
        index: index,
        row:{}
    });
}

function getRowIndex(target){
    var tr = $(target).closest('tr.datagrid-row');
    return parseInt(tr.attr('datagrid-row-index'));
}
function editrow(target){
    $('#tt').datagrid('beginEdit', getRowIndex(target));
}

function saverow(target){
    $('#tt').datagrid('endEdit', getRowIndex(target));
}

function cancelrow(target){
    $('#tt').datagrid('cancelEdit', getRowIndex(target));
}	
    </script>

[haamro]

So if I remove the formatter function, only the value of combobox is shown instead of Combobox Text. But when I click on Edit, Combobox text is displayed.

Help me guys,
thank you,