jqgrid edit combined columns and bind data

I have a jqgrid where I have used custom_element to format the display.

 {
            name: 'PDTime', index: 'PDTime', width: 60, editable: true, formatter: timeSpanHMFormatter, edittype: 'text', editoptions: {
                custom_element: function (value, options) {
                    var elemStr = '<div> <select id="UTTime" name="UTTime" >'

                    for (var i = 0; i < 24; i++) {
                        elemStr = elemStr + '<option value="' + i + '">' + i + '</option>'
                    }
                    elemStr = elemStr + "</select> </div>";
                    return $(elemStr)[0];
                },
                custom_value: function (elem, operation, value) {
                    console.log(elem);

                }
            }
        },

The formatter is a time span display showing Hours and Minutes. The value 'PDTime' is an object which has properties Hours and Minutes.

function timeSpanHMFormatter(cellvalue, options, rowObject) {        
    if (cellvalue.Hours == 0 && cellvalue.Minutes == 0)
        return "";
    var value = "00:00";

    if ( cellvalue.Hours.toString().length == 1 )
        value = "0" + cellvalue.Hours
    else
        value = cellvalue.Hours

    if (cellvalue.Minutes.toString().length == 1)
        value = value + ":0" + cellvalue.Minutes
    else
        value = value + ":" + cellvalue.Minutes

    return value;
}

In view mode the cell looks like 02:30 etc., depending on the value. I want to bind values to this PDTime object in edit mode and I am not sure how to do it.

The custom_element creates an hour dropdown for now and I am trying to bind the dropdown selected value into PDTime.Hours. How can I do this ?

As can be seen from the Guriddo Documentation here for the custom element it is needed to define a custom_value function with operation set to get.

The trick here is that this event should return object when operation is get. Below is a exsmple:

custom_value: function (elem, oper) {
    if(oper==='get') {
        var hour = $("#UTTime", elem).val();
        // get the minutes according to your definition
        var time = $("#UTTime", elem).val(); 
        return {"Hours" : hour,  "Minutes": time};
    }
},

Note that when the data is posted to the server PDTime is a object. You can simplify the post returning one one or more values using the serializeRowData event ( look here ) This event is jqGrid event and you can do it like this:

...jqGrid({
....
    serializeRowData : function( postdata ) {
        var hours = postdata.PDTime.Hours;
        var minutes postdata.PDTime.Minutes;
        posdata.PDTime = hours+":"+minutes;
        // or what you want data combination
        return postdata;
    },
...