Colors in rows and Edit values but dont show Jqgrid

Question

I want to know if its possible use different background colors for each (or some) row/s..

And I have another problem, i have defined checkbox that i want to set only when add, but i don't want see it when the grid is showing all the rows..Is this possible?

Here is my code..

$("#<%=Me.Id & "_" %>lstBaseHab").jqGrid({
    url: '/modulos/tarifa/basehabitacion.ashx',
    datatype: 'xml',
    mtype: 'GET',
    colNames: ['Hab ID','Habitación','Importe', 'Fecha Inicio','Fecha Fin','Noches Estancia/Mínimas','Todos','Lunes','Martes','Miércoles','Jueves','Viernes','Sábado','Domingo','tarId', 'estId'],
    colModel: [
        { name: 'hab_id', index: 'hab_id', width: 100, align: 'center', editable: false, sortable: false, hidden: true},
        {name: 'hab_nombre', index: 'hab_nombre', width: 200, align: 'center', edittype: 'select', editable: true, sortable: false, editrules: { edithidden: false, required: true }
        , editoptions: { size: 1, dataUrl: '/modulos/tarifa/basehabitacion.ashx?oper=listahabs' }
        },
        { name: 'tpb_importe', index: 'tpb_importe', width: 160, align: 'center', editable: true, sortable: true },
        { name: 'fini', index: 'fini', width: 300, align: 'center', editable: true, editoptions: { dataInit: function(el) { setTimeout(function() { $(el).datepicker({ dateFormat: 'dd/mm/yy' }); }, 200); } }, editrules: { edithidden: false }, sortable: true },
        { name: 'ffin', index: 'ffin', width: 300, align: 'center', editable: true, editoptions: { dataInit: function(el) { setTimeout(function() { $(el).datepicker({ dateFormat: 'dd/mm/yy' }); }, 200); } }, editrules: { edithidden: false }, sortable: true },
        { name: 'Nochesestancia', index: 'Nochesestancia', width: 300, align: 'center', sortable: false, editable: true },
        { name: 'Lun', index: 'lun', width: 50,  formatter: "checkbox", align: 'center', editable: true, hidden: true, edittype: "checkbox", editoptions: { value: "1:" }, editrules: { edithidden: false }, sortable: false },
        { name: 'Mar', index: 'mar', width: 50,  formatter: "checkbox", align: 'center', editable: true, hidden: true, edittype: "checkbox", editoptions: { value: "2:" }, editrules: { edithidden: false }, sortable: false },
        { name: 'Mie', index: 'mie', width: 50,  formatter: "checkbox", align: 'center', editable: true, hidden: true, edittype: "checkbox", editoptions: { value: "3:" }, editrules: { edithidden: false }, sortable: false },
        { name: 'Jue', index: 'jue', width: 50,  formatter: "checkbox", align: 'center', editable: true, hidden: true, edittype: "checkbox", editoptions: { value: "4:" }, editrules: { edithidden: false }, sortable: false },
        { name: 'Vie', index: 'vie', width: 50,  formatter: "checkbox", align: 'center', editable: true, hidden: true, edittype: "checkbox", editoptions: { value: "5:" }, editrules: { edithidden: false }, sortable: false },
        { name: 'Sab', index: 'sab', width: 50,  formatter: "checkbox", align: 'center', editable: true, hidden: true, edittype: "checkbox", editoptions: { value: "6:" }, editrules: { edithidden: false }, sortable: false },
        { name: 'Dom', index: 'dom', width: 50,  formatter: "checkbox", align: 'center', editable: true, hidden: true, edittype: "checkbox", editoptions: { value: "0:" }, editrules: { edithidden: false }, sortable: false }
    ],
    ajaxSelectOptions: {
        data: {
            estId: function () { return __estId; }
        }
    },
    ajaxGridOptions: {cache: false},
    autoencode: false,
    toppager: false,
    loadonce:false,
    pager: '#preciobasepager',
    rowNum: 40,
    rowList: [20, 40, 80, 100, 200, 500, 1000],
    sortname: 'fini',
    sortorder: 'asc',
    autowidth: false,
    width: 850,
    height: -1,
    shrinkToFit: true,
    viewrecords: true,
    gridview: true,
    prmNames: {oper:"listarbaseshabitacion", addoper:"crearbasehabita", deloper:"borrabasehabita"},
    caption: 'Precios base para habitaciones'
    , editurl: '/modulos/tarifa/basehabitacion.ashx'
    , postData: {
        tarId: function ftar(){return __tarId;},
        estId: function fest(){return __estId;}
    }, afterSaveCell : function(rowid,name,val,iRow,iCol) { }
    , loadComplete: function() { }
    , onCellSelect: function(rowid, index, contents, event) {
        <%=Me.id %>_selectedRow=jQuery(this).getRowData(rowid);
    }
});

jQuery("#<%=Me.Id & "_" %>lstBaseHab").jqGrid('navGrid',
    '#preciobasepager',
    { alerttext: "Seleccione un registro.",
        add: true, addtitle: "Crear precio base", //addfunc: newPrecioBase, 
        del: true, deltitle: "Eliminar precio base", // delfunc: delPrecioBase,
        edit: false, edittitle: "Editar precio base",
        search: false, searchtitle: "Buscar",
        refresh: true,
        cloneToTop: true
    },
    { width: 350, resize: false, closeAfterEdit: true, recreateForm: true, viewPagerButtons: true, afterComplete: null },
    { width: 350, resize: false, closeAfterAdd: true, recreateForm: true, viewPagerButtons: true, afterComplete: null },
    { width: 350, resize: false, msg: "¿Desea eliminar la relación?", afterComplete: null }
);

If I put hidden:true (as can see it in the colModel) its hidden showing, but i cant define it when add..

Thanks.

Answer 1

To set background color on individual rows, for example based on the content of come columns if the grid, you can use rowattr callback. It provide the most effective solution (if you use gridview: true) because it allows you modify attributes of rows dynamically at the moment of creating of the rows. So you will just inform jqGrid which additional attributes you want to have in rows.

The answer demonstrate the approach.

The second part of your question (about checkboxs) is not clear for me. The standard formatter: "chechboxs" will be used for displaying data in the grid and for editing. You can implement your requirements if you remove formatter: "chechboxs" but implement all additional behavior which you need inside of dataInit callback of editoptions. One more possibility which you have is the usage of custom editing control.

UPDATED: I would recommend you additionally to use column templates. You have multiple columns where you use checkboxes and multiple columns ('fini', 'ffin') where you use datepicker. So your code will be smaller, more readable and better manageable if you define somewhere in your code above definition of jqGrid variables which hold common properties for the columns:

var dateTemplate = { width: 300, align: 'center', editable: true
        editoptions: {
            dataInit: function(el) {
                setTimeout(function() {
                    $(el).datepicker({ dateFormat: 'dd/mm/yy' });
                }, 200);
            }
        }, editrules: { edithidden: false }, sortable: true },
    checkboxTemplate = {width: 50,  formatter: "checkbox", align: 'center',
        editable: true, hidden: true, edittype: "checkbox",
        editrules: { edithidden: false }, sortable: false};

then you will be able to rewrite definition of the corresponding columns of jqGrid inside of colModel to the following:

{ name: 'fini', template: dateTemplate },
{ name: 'ffin', template: dateTemplate },
...
{ name: 'Lun', index: 'lun', editoptions: {value: "1:"}, template: checkboxTemplate },
{ name: 'Mar', index: 'mar', editoptions: {value: "2:"}, template: checkboxTemplate },
{ name: 'Mie', index: 'mie', editoptions: {value: "3:"}, template: checkboxTemplate },
{ name: 'Jue', index: 'jue', editoptions: {value: "4:"}, template: checkboxTemplate },
{ name: 'Vie', index: 'vie', editoptions: {value: "5:"}, template: checkboxTemplate },
{ name: 'Sab', index: 'sab', editoptions: {value: "6:"}, template: checkboxTemplate },
{ name: 'Dom', index: 'dom', editoptions: {value: "0:"}, template: checkboxTemplate }