Combobox error/disintegrated after calling onSelect in edatagrid

[aswzen]

Just look at this fiddle

http://jsfiddle.net/aswzen/wy787hsk/

this is data that showed on grid:

Code:

var data = [{
    brand_id: 'v11',
    brand_name: 'Marvell Semiconductor',
    date: '03/16/2015',
    cbx: 'true'
}, {
    brand_id: 'v21',
    brand_name: 'Kennedy Enterprise',
    date: null,
    cbx: true
}, {
    brand_id: 'v41',
    brand_name: 'Versatile Inc.',
    date: null,
    cbx: false
}];

in the fiddle i only show brand_name and data column ..
with edatagrid i can save data row by row..
now i just want to reload a row after updated but i can achieve it because there is no such method reloadRow() ,
there is only refreshRow() and thats only refresh the row with the older data, not updated data.

so i try to achieve it in this way
1. Click/DoubleClick the row to edit,
2. Select Brand in combobox. ( Error : Combobox disintegrated from panel/grid and appears on left top)
3. in onSelect method on combobox i try to get the selected row index.
4. Update the row with new data brand_id and brand_name based on selected index.
5. Click on another row to save current row.
6. Row will show the updated data.

this way works perfectly, but with error (no.2)

any explanation?

thankyou

[stworthy]

You do not need to call 'updateRow' or 'refreshRow' methods in the editing mode, just update the row data before ending the editing row.

Code:

$('#dg').edatagrid({
    onEndEdit: function(index,row){
        var ed = $(this).edatagrid('getEditor',{index:index,field:'brand_id'});
        var cc = $(ed.target);
        $.extend(row, {
            brand_id: cc.combobox('getValue'),
            brand_name: cc.combobox('getText')
        });
    }
})

The updated example is available from here: http://jsfiddle.net/wy787hsk/1/