$("#sampleCulture").jqGrid({
                datatype: 'local',
                colNames:['Sample ID','Sample def - customer','Sampling Date','Type','Category','Enriched','Internal Comment','External Comment','Assigned starters'],
                colModel :[
                    {name:'sampleId', index:'SAMPLE_ID',editable:false,hidden:true,resizable:false},
                    {name:'definition', index:'DESCRIPTION',editable:true,edittype:"text",editoptions:{size:30},editrules:{required:true},width:70,resizable:false},
                    {name:'smplDate', index:'SAMPLING_DATE',editable:true,edittype:"text",editoptions:{size:10},editrules:{required:true,edithidden:true},width:70,resizable:false,hidden:true,},
                    {name:'smplType', index:'SAMPLE_TYPE',editable:true,edittype:"text",editoptions:{size:30},editrules:{required:true,edithidden:true,edithidden:true},width:70,resizable:false,hidden:true,},
                    {name:'smplCategory', index:'SAMPLE_CATEGORY',editable:true,edittype:"text",editoptions:{size:30},editrules:{required:true,edithidden:true},width:70,resizable:false,hidden:true,},
                    {name:'enriched', index:'ENRICHED',editable:true,edittype:"checkbox",editoptions:{value:"0:1"},editrules:{required:true,edithidden:true},width:70,resizable:false,hidden:true,},
                    {name:'smplIntDef', index:'INTERNAL_DEFINITION',editable:true,edittype:"text",editoptions:{size:30,edithidden:true},width:70,resizable:false,hidden:true,},
                    {name:'smplCustDef', index:'CUSTOMER_DEFINITION',editable:true,edittype:"text",editoptions:{size:30,edithidden:true},width:70,resizable:false,hidden:true,},
                    {name:'numCulture', index:'',editable:false,width:100,resizable:false}],
                pager: $('#pagerSampleCulture'),
                recordtext: 'Samples',
                shrinkToFit:true,
                width:500,
                height:200,
                rowNum:10,
                rowList:[10,20,30],
                sortname: 'DESCRIPTION',
                sortorder: "desc",
                viewrecords: true,
                imgpath: 'design/themes/basic/images',
                shrinkToFit:true,
               
                /* SUBGRID */
                  subGrid: true,
                subGridRowExpanded: function(subgrid_id, row_id) {
                // we pass two parameters
                // subgrid_id is a id of the div tag created whitin a table data
                // the id of this elemenet is a combination of the "sg_" + id of the row
                // the row_id is the id of the row
                // If we wan to pass additinal parameters to the url we can use
                // a method getRowData(row_id) - which returns associative array in type name-value
                // here we can easy construct the flowing
                var subgrid_table_id;
                var pager_table_id;
                subgrid_table_id = subgrid_id+"_t";
                pager_table_id = "pager_"+subgrid_table_id;
                $("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll' cellpadding='0' cellspacing='0'></table><div id='"+pager_table_id+"' class='scroll' style='text-align:center;'></div>");
                jQuery("#"+subgrid_table_id).jqGrid({
                        datatype: 'local',
                        colNames:['Starter ID','Starters','Valid From','Valid To'],
                        colModel :[
                            {name:'id', index:'CULTURE_ID',editable:false,hidden:true,resizable:false},
                            {name:'shortcut', index:'COMMERCIAL_NAME',editable:true,edittype:"text",editoptions:{size:30},editrules:{required:true},width:70,resizable:false},
                            {name:'sDate', index:'START_DATE',editable:true,edittype:"text",editoptions:{size:10},editrules:{required:true},width:70,resizable:false},
                            {name:'eDate', index:'END_DATE',editable:true,edittype:"text",editoptions:{size:10},editrules:{required:true},width:70,resizable:false}],
                        recordtext: 'Starters',
                        shrinkToFit:true,
                        width:500,
                        height:400,
                        rowNum:10,
                        rowList:[10,20,30],
                        sortname: 'COMMERCIAL_NAME',
                        sortorder: "desc",
                        viewrecords: true,
                        imgpath: 'design/themes/basic/images',
                        shrinkToFit:true,
                        height: '100%',
                        toolbar: [true,"bottom"],
                        loadComplete: function(){
                            btnEdit = "<input style='width:16px;height:16px;background-color:transparent;border:none;' type='image' src='design/themes/basic/images/row_edit.gif' title='Update selected Strain' onclick=frmEditStrain('"+subgrid_table_id+"')>";
                            btnAdd = "<input style='width:16px;height:16px;background-color:transparent;border:none;' type='image' src='design/themes/basic/images/row_add.gif' title='Update selected Strain' onclick=frmAddStrain('"+subgrid_table_id+"','"+row_id+"')>"; 
                            $("#t_"+subgrid_table_id).html(btnEdit+" "+btnAdd);
                        }
   
                   });
               },
               subGridRowColapsed: function(subgrid_id, row_id) {
                    // this function is called before removing the data
                    var subgrid_table_id; subgrid_table_id = subgrid_id+"_t";
                    jQuery("#"+subgrid_table_id).GridDestroy();
                }
                /* END SUBGRID */
            });
            $("#sampleCulture").navGrid('#pagerSampleCulture',
                {edit:false,add:true,del:true,search:false,refresh:false},
                {}, // edit options
                {
                    addCaption: "Add a Starter",
                    reloadAfterSubmit:true,
                    closeAfterAdd:true,
                    height:170,
                    width:350,
                    onInitializeForm : function(form_id) {
                        jQuery("#sDate",form_id).datepicker();
                        jQuery("#eDate",form_id).datepicker();
                    }
                }, // add options
                {
                    msg: "Delete selected Starter(s)",
                    caption: "Delete Starter",
                    reloadAfterSubmit:true
                }
           
            );
                   
       
            var mydata = [
                {id:"1",definition:"Buttermilch",numCulture:"0 starter"},
                {id:"2",definition:"Joghurt",numCulture:"2 starters"},
                {id:"3",definition:"Joghurt mit Frucht",numCulture:"0 starter"},
                {id:"4",definition:"ABCDEF Lait",numCulture:"0 starter"}];
                 
                for(var i=0;i<=mydata.length;i++) jQuery("#sampleCulture").addRowData(i+1,mydata[i]);