Jqgrid: Frozen column

Asked

Viewed 501 times

2

I wonder if anyone ever put up a column frozen: true with the cellEdit: true, I checked in the doc that there is a restriction of the same.

Does anyone know somehow to accomplish the Frozen being the editable column? (forcibly or dynamically)

Follow below the codes.

Jqgrid

    jQuery("#grid_especialidade").jqGrid({
                url:'odo_prs0169b.asp',
                mtype: 'GET',
                postData: { "COD_PRESTADOR_TS": function () { return $("#cod_prestador_ts").val(); },
                            "COD_OPERADORA": function () { return $("#cod_operadora_atual").val(); },
                            "listar": function () { return listar; },
                            "txtJSON": function () { return $('#txtJSON').val(); }

                },      
            datatype: "json",
                colNames:[      'Nome'
                            ,   'Principal?'
                            ,   'Divulga?'
                            ,   'Especialista'
                            ,   'Data Início'
                            ,   'Data Fim'
                            ,   'Observação'
                            ,   'Proc.'
                            ,   'Instituição de Ensino'
                            ,   'Título Especialização'
                            ,   'Excluir'
                            // Campos invisíveis
                            , 'Código Especialidade'
                         ],
                colModel:[
                        {name:'NOME_ESPECIALIDADE', index:'NOME_ESPECIALIDADE', width:400, frozen:true}
                    ,   {name:'IND_ESP_PRINCIPAL', index:'IND_ESP_PRINCIPAL', width:65, align:'center', classes: 'campoCheck', edittype: 'checkbox', editoptions: { value: "S:N" }, formatter: "checkbox", formatoptions: { disabled: false}}
                    ,   {name:'IND_DIVULGACAO_HAB', index:'IND_DIVULGACAO_HAB', width:60, align:'center', classes: 'campoCheck', edittype: 'checkbox', editoptions: { value: "S:N" }, formatter: "checkbox", formatoptions: { disabled: false}}
                    ,   {name:'NOME_ESPECIALISTA', index:'NOME_ESPECIALISTA', width:200, editable: true}
                    ,   {name:'DATA_INI_HAB', index:'DATA_INI_HAB', width:75, align:'center', editable: true }
                    ,   {name:'DATA_FIM_HAB', index:'DATA_FIM_HAB', width:75, align:'center', editable: true}
                    ,   {name:'TXT_OBS_NAO_DIVULGACAO', index:'TXT_OBS_NAO_DIVULGACAO', width:500, editable: true}


                    ,   {name:'ITEM_MEDICO',index:'ITEM_MEDICO',width:100, align:'center', formatter: function(cell, options,row, rowid) 
                                                                                                     { 
                                                                                                        var vLink = "http://223.223.2.160/ace/ace005a.asp?/odo_prs/asp/odo_prs0168h.asp?PT=Consulta Procedimentos Habilitados&cod_espec=" + cell + "&ind_tipo=1" + "&Titulo=Consulta Procedimentos Habilitados" ;
                                                                                                        return "<a href='" + vLink + "' target='_blank'><img src='../../odo_gen/img/proc.gif' border='none'/></a>" 

                                                                                                     }
                        }


                    ,   {name:'COD_INSTITUICAO',index:'COD_INSTITUICAO', width:400, align:"center", editable: true, formatter:'select', edittype:'select', editoptions:{value:CarregaInstituicao()}}
                    ,   {name:'TITULO_ESPECIALIZACAO',index:'TITULO_ESPECIALIZACAO', width:200, editable: true}
                    ,   {name:'IND_EXCLUIR',index:'IND_EXCLUIR' , width:50, align:'center', classes: 'campoCheck', edittype: 'checkbox', editoptions: { value: "S:N" }, formatter: "checkbox", formatoptions: { disabled: false}}
                    // Campos invisíveis
                    ,   {name:'COD_ESPECIALIDADE', index:'COD_ESPECIALIDADE', width:50, hidden:true, key:true}
                ],             


            gridComplete: function(rowid){
                rowDataIniGrid = $('#grid_especialidade').jqGrid('getRowData', rowid);
            },

            jsonReader: {
                repeatitems: false,
                root: function (obj)    { return obj.Items[0].items; },
                page: function (obj)    { return obj.Items[0].page; },
                total: function (obj)   { return obj.Items[0].total; },
                records: function (obj) { return obj.Items[0].records; }
            },  
            rowNum: 50,
            width:1000,
            height: 300,
            shrinkToFit: false,
            gridview: true,
            rownumbers: false,
            loadonce: true,
            sortable: true,
            rowList: [50, 100, 150],            
            recordtext: "Vendo {0} - {1} de {2}",
            viewrecords: true,
            emptyrecords: "Não foi encontrado nenhum registro",
            loadtext: "Carregando...",
            autowidth: false,
            pgtext: "Pagina {0} de {1}",
            loadError: function (xhr, st, err) { 
              alert("Erro ao carregar grid de especialidades: "+st+" -  "+ xhr.status + " "+xhr.statusText)
            },       
            pager: jQuery('#pager'),
            cellsubmit: 'clientArray',
            sortname: 'COD_ESPECIALIDADE',
            sortorder: "asc",
            caption:"Especialidades",
            cellEdit: true,


            afterSaveCell: function(rowid,name,val,iRow,iCol) {
                montaXML();
            },


            afterEditCell: function (id,name,val,iRow,iCol){
                if(name=='DATA_INI_HAB') 
                {
                    jQuery("#"+iRow+"_DATA_INI_HAB","#grid_especialidade").datepicker({dateFormat:"dd/mm/yy"});

                }

                if(name=='DATA_FIM_HAB') 
                {
                    jQuery("#"+iRow+"_DATA_FIM_HAB","#grid_especialidade").datepicker({dateFormat:"dd/mm/yy"});

                }   

            }

        })

        jQuery("#grid_especialidade").jqGrid('navGrid',"#pager",{edit:false,add:false,del:false,search:false,refresh:false});


    });

jQuery("#grid_especialidade").jqGrid('setFrozenColumns');

JSON generated (please click on the JSON link)

1 answer

1

Frozen columns cannot be edited inline. That’s a limiting known to jqGrid.

That said you can always enable editing through forms. In particular you can call the form in the event in case of double click:

ondblClickRow: function(rowid) {
    jQuery(this).jqGrid('editGridRow', rowid);
}
  • Thanks, this method already knew, but the client did not find interesting in this way rs, obg.

  • Hello caval, in that case I really think you will have to implement improvements in jqGrid. If you arrive at a nice result open a pull request in the Github and contribute to the project. I’m sure other users will benefit.

  • There’s even a Issue which was closed because it was "very difficult to implement" (some workarounds already exist). A definitive solution is certainly welcome.

  • Thank you Anthony, I checked that until then with cellEdit is not possible, at least in the free version.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.