JqGrid how to set Col Properties using jqGrid JS with PHP?

Question

I'm stuck trying to solve a puzzle. Working on a jqgrid javascript version project where ColModels are set in a PHP file and encoded as JSON as response (wasn't me, already got the project running like this and system is too big to rewrite).

How can i do this: (jqgrid PHP version)

// Set the column property
$grid->setColProperty('OrderDate', array(
   "formatter"=>'date',
   "editoptions"=>array("dataInit"=>"js:".$mydatepicker),
   "searchoptions"=>array("dataInit"=>"js:".$mydatepicker)
));

Using my code with Jqgrid JS version NOT PHP version?

I tried the following approach with no success:

$tabela = array(
                    'colNames' => array('ID','Laudo','Clínica','Nome','Cadastro','Email','Senha','Exame','Descrição','Criação','Exclusão','Arquivo'),
                    'colModel' => array(
                        array('name'=>'id','hidden'=>true,'search'=>true,'key'=>true),
                        array('name'=>'laudo','width'=>70,'align'=>'center','search'=>true,'editable'=>true,'editrules'=>array('required'=>true),'sorttype'=>'integer','searchoptions'=>array('sopt'=>'[eq,cn]', 'clearSearch'=>false)),
                        array('name'=>'nome_fantasia','search'=>true,'width'=>170,'align'=>'center','editable'=>false,'sorttype'=>'text','searchoptions'=>array('sopt'=>'[eq,cn]','clearSearch'=>false),'editrules'=>array('required'=>true)),
                        array('name'=>'cliente','search'=>true,'width'=>170,'align'=>'center','editable'=>false,'sorttype'=>'text','searchoptions'=>array('sopt'=>'[eq,cn]','clearSearch'=>false),'editrules'=>array('required'=>true),),
                        array('name'=>'cadastro_id','search'=>true,'hidden'=>true,
                            'editable'=>true,'edittype'=>'text','searchoptions'=>array('sopt'=>'[eq,cn]','clearSearch'=>false),'editrules'=>array('edithidden'=>true,'required'=>true),
                            'editoptions'=>array()),
                        array('name'=>'email','search'=>true,'hidden'=>true,'editable'=>true,'sorttype'=>'email','searchoptions'=>array('sopt'=>'[eq,cn]','clearSearch'=>false),'editrules'=>array('edithidden'=>true)),
                        array('name'=>'senha','search'=>true,'hidden'=>true,'editable'=>true,'editrules'=>array('edithidden'=>true)),
                        array('name'=>'exame','search'=>true,'width'=>50,'align'=>'center','editable'=>true,'sorttype'=>'text','searchoptions'=>array('sopt'=>'[eq,cn]','clearSearch'=>false),'formatter'=>'select','edittype'=>'select',
                            'editoptions'=>array('value'=>array('Biópsia'=>'Biópsia','Necrópsia'=>'Necrópsia','Citologia'=>'Citologia'))
                        ),
                        array('name'=>'descricao','search'=>true,'width'=>200,'align'=>'center','editable'=>true,'sorttype'=>'text','searchoptions'=>array('sopt'=>'[eq,cn]','clearSearch'=>false)),
                        array('name'=>'criacao','search'=>true,'width'=>70,'formatter'=>'date','fixed'=>true,'resizable'=>false,'align'=>'center','sorttype'=>'date','searchoptions'=>array('sopt'=>'[ge,le,eq]','clearSearch'=>false, 'dataInit'=>'function(element) {
        $(element).datepicker({
            id: "orderDate_datePicker",
            dateFormat: "yy-mm-dd",
            maxDate: new Date(2020, 0, 1),
            showOn: "focus"
        });
    }]]')),
                        array('name'=>'exclusao','search'=>true,'width'=>70,'formatter'=>'date','sorttype'=>'date','fixed'=>true,'resizable'=>false,'editable'=>true,'searchoptions'=>array('sopt'=>'[eq,cn]','clearSearch'=>false),'align'=>'center'),
                        array('name'=>'arquivo','search'=>false,'width'=>60,'formatter'=>'arquivo','classes'=>'tabela_laudo_arquivo','editable'=>true,'searchoptions'=>array('sopt'=>false,'clearSearch'=>false))),
                    'sortname' => 'id',
                    'captio

n' => 'Registros de Laudos Cadastrados',
                );

This is the jqgrid code:

$(id_tabela).after($(paginador));
    $('#aba-' + table).show();
    var jqGridOptions = {
        url: url + '?action=listar&section=' + table,
        contentType: 'application/json; charset=utf-8',
        datatype: 'json',
        mtype: 'GET',
        colNames: $.merge(tabela.colNames, actions.label),
        colModel: $.merge(tabela.colModel, actions.botoes),
        pager: id_paginador,
        rowNum: 10,
        search: false,
        rowList: [10,20,30],
        sortname: tabela.sortname,
        sortorder: 'desc',
        viewrecords: true,
        gridview: true,
        autowidth: true,
        height: '100%',
        editurl: url + '?action=edit&section=' + table,
        caption: tabela.caption,
        hidegrid: false,
        recreateForm: true,
        reloadAfterSubmit: true,
    };
$(id_tabela).jqGrid(jqGridOptions).jqGrid('navGrid',id_paginador,
    {
        edit:false,add:true,search:false,del:false,refresh:true,
        addfunc:function()
        {
            $(id_tabela).jqGrid('editGridRow', "new", {});
            if(initFormGrid) return;
            var formid = $('.FormGrid');
            var form = $(formid).attr('id').split('-').pop();
            var id = $(formid).find('#id_g').val();
            var bt_gerar = $('<input />').attr('type','button').val('Gerar').click(function()
            {
                $(formid).find('input[name="senha"]').val(gerarPassword());
            });
            if(form == 'laudos') $(formid).find('input[name="senha"]').after(bt_gerar);
            $(formid).find('input[name="criacao"], input[name="exclusao"], input[name="data"]').datepicker(
            {
                dateFormat:'dd/mm/yy'
            });

            /* UPLOAD LAUDO */
            var base_url = $('head base').attr('href');
            $('#arquivo').uploadify(
            {
                'swf'       : base_url + 'admin/js/uploadify/uploadify.swf',
                'uploader'  : base_url + 'admin/js/uploadify/uploadify.php?laudo=true',
                'cancelImg' : base_url + 'admin/js/uploadify/cancel.png',
              'buttonImage' : base_url + 'admin/img/upload_mini.png',
                'wmode'     : 'transparent',
                'width'     : '20',
                'height'    : '20',
                'auto'      : true,
                'multi'     : false,
                'fileExt'   : '*.pdf',
                'fileDesc'  : 'Arquivo PDF (.PDF)',
                afterComplete : function(response, postdata)
                {
                    $('#arquivo').before($('<input />').attr({type:'text',id:'arquivo_temp',class:'FormElement',name:'arquivo',value:response,role:'textbox'}));
                    $('#arquivo, #arquivoUploader, #arquivoQueue').remove();
                    $('#arquivo_temp').attr('id','arquivo').hide();
                    $('#arquivo').after($('<img />').attr({src:'/laudos/pdf.png',id:'arquivo_icone'}));
                }
            });
            initFormGrid = false;
        /* ------------ */
        }});
        $(id_tabela).jqGrid('filterToolbar',
        {
            searchOperators: false,
            stringResult: true,
            autoSearch: true,
            searchOnEnter:false,
            defaultSearch: "cn" 
        });

Answer 1

It is simple. Using $.extend in jQGrid did the job!

Question already answered in here .