using optgroup for combobox in editable datagrid

Question

How to achieve it thru editable datagrid without html?

<optgroup label="Swedish Cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</optgroup>

I have tried below:

<table id="bulkchannel_edit" title='Editable DataGrid' singleSelect="true" style="width:100%; height:500px;">
 <thead>
    <tr>
     <th field="channel_name" width="100" editor="{type:'textbox'}">Channel Name</th>
     <th field="category_name" width="100" editor="{type:'combobox',
          options:{
            valueField:'channel_category_id',
            textField:'category_name',
            data:childCategories,
            groupField:parentCategories,
            required:true
          }
     }" formatter="getSelectedCategory">Category</th>
 </tr>
 </thead>
 </table>

data for both group optgroup coming from ajax request below:

var parentCategories = {};
var childCategories = {};
$(document).ready(function(){
        $.ajax({
           url: "<?php echo base_url() ?>index.php/Channels/getParentChildChannelCategories",
           dataType: 'json',
           async : false,
           success: function(response){
               console.log('response',response);
               console.log('parent_categories',response.parent_categories);
               parentCategories = response.parent_categories;
               childCategories = response.child_categories;
           }
        });
    });

I have to load parentcategories in parent group and all childcategories in optgroup html

Thanks.

Answer 1

I got solution from jeasyui forum from here

var data = [
{group:'Group1',items:[
    {value:'v11',text:'Option11'},
    {value:'v12',text:'Option12'},
    {value:'v13',text:'Option13'},
    {value:'v14',text:'Option14'}
]},
{group:'Group2',items:[
    {value:'v21',text:'Option21'},
    {value:'v22',text:'Option22'},
    {value:'v23',text:'Option23'},
    {value:'v24',text:'Option24'}
]}
];
function loadFilter(data){
  var dd = [];
  for(var i=0; i<data.length; i++){
    var group = data[i].group;
    dd.push({
        group:group,
        text:group
    });
    dd = dd.concat(data[i].items);
}
return dd;
}
function onLoadSuccess(){
 var groupItems = $(this).combobox('panel').find('div.combobox- 
 item:has(span.combobox-group-text)');
 groupItems.removeClass('combobox-item');
}
function formatter(row){
 if (row.group){
    return '<span class="combobox-group-text" style="font-weight:bold">'+row.group+'</span>';
} else {
    return '<span style="padding-left:10px">'+row.text+'</span>';
}
}

$(function(){
 $('#cc').combobox({
    data:data,
    loadFilter:loadFilter,
    formatter:formatter,
    onLoadSuccess:onLoadSuccess
 });
});