Can not select a combobox value in an Editable DataGrid

[totta]

HI,

I have a problem, I have created a datagrid - here is my code.

<div class="container">

    <div class="row">

    <h3><span class="label label-default">1</span> Boat Driving Licenses</h3>
    <table id="cl" class="easyui-datagrid" title="Boat Driving Licenses" style="width:100%;height:auto"
                toolbar="#tb"
                idField="id"
                rownumbers="true"
                fitColumns="true"
                singleSelect="true">
            <thead>
                <tr>
                    <th data-options="
                            field:'licenses',width:400,
                            formatter:function(value,row){
                                return row.licenses;
                            },
                            editor:{
                                type:'combobox',
                                options:{
                                    valueField:'id',
                                    textField:'licenses',
                                    method:'get',
                                    url:'crewskills/get_boatlicensestype',
                                    required:true
                                }
                            }">Boat Licenses</th>   
               </tr>
            </thead>
        </table>

        <div id="tb" style="height:auto">
            <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:$('#cl').edatagrid('addRow')">New</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="javascript:$('#cl').edatagrid('destroyRow')">Delete</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:$('#cl').edatagrid('saveRow')">Save</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-undo" plain="true" onclick="javascript:$('#cl').edatagrid('cancelRow')">Cancel</a>
        </div>
    </div>
</div>

<div class="well"></div>

<script type="text/javascript">
    $('#cl').edatagrid({
        url: 'crewskills/get_boatlicenses?personid='+<?php echo $personid; ?>,
        saveUrl: 'crewskills/save_boatlicense?personid='+<?php echo $personid; ?>,
        updateUrl: 'crewskills/update_boatlicense',
        destroyUrl: 'crewskills/delete_boatlicense?personid='+<?php echo $personid; ?>
    });
</script>


Everything works fine, tills I added the combobox, the problem with the combobox is that I can see the values in the combobox, I can not select, and when I save the fields is blank.

Hoping to get some guidance, thanks,
totta

[jarry]

What is the data returned from crewskills/get_boatlicenses and crewskills/get_boatlicensestype? Please show some sample data.

[totta]

I found the problem just a few minutes ago, I changed valuField to licenses and it worked.

This is the data returned

{"rows":[
{"id":"32","person_id":"328","licenses":"Licensed GP Training Module 5: Seamanship"},{"id":"38","person_id":"328","licenses":"Licensed GP Training Module 6: Seamanship"},{"id":"39","person_id":"328","licenses":"Licensed GP Training Module 7: Seamanship"},   {"id":"40","person_id":"328","licenses":"Licensed GP Training Module 8: Seamanship"}]
}