Unable to edit cells

[jpantona]

I have multiple pqgrids on one page. Everything was working as expected until I upgraded pqgrid to the PRO version. First, the column editors broke. I was able to fix that (for the first table on my page). Now, all the other tables are not editable. When I click on a cell, it doesn't go into edit mode. Here is some code:

This table works:

Code: [Select]

var titleRowIndex;
var titleData = [ <%= attributeComp.getProjectTitlesTableData() %> ];
    var titleObj = {};
    titleObj.width = 900;
    titleObj.height = 200;
titleObj.title = "Project Titles";
    titleObj.colModel = [{title:"Picture Title", width:200, dataType:"string", dataIndx: "picture", editor: { type: function (ui) { dropDownEditor(ui, arrPictures);}} },
        {title:"Project #", width:50, dataType:"string", align:"center", dataIndx: "project"},
        {title:"Business Unit", width:150, dataType:"string", align:"left", dataIndx: "bu", editor: { type : function (ui) { dropDownEditor(ui, arrBu);} }},
{title:"objectId", width:16, dataType:"string", hidden:true, dataIndx: "objectId"},
{title:"AKAs", width:300, dataType:"string", dataIndx: "aka"},
{title:"Status", width:30, dataType:"string", dataIndx: "document_status"},
{title:"parentId", width:16, dataType:"string", hidden:true, dataIndx: "parentId"},
{title:"contractChronId", width:16, dataType:"string", hidden:true, dataIndx: "contractChronId"}];
    titleObj.dataModel = {data:titleData};
titleObj.hoverMode = 'cell';
titleObj.selectionModel = { type: 'cell' };
titleObj.editModel = {
            saveKey: $.ui.keyCode.ENTER,
            select: false,
            keyUpDown: false,
            cellBorderWidth: 0               
        };
titleObj.editor = { type: "textbox" };
    var titleGrid = jQuery("#grid_array").pqGrid( titleObj );
jQuery("#grid_array").pqGrid( {
rowDblClick : function (evt, srtobj) {
titleRowIndex = srtobj.rowIndx;
var objId = srtobj.dataModel.data[srtobj.rowIndx].objectId;
var picture = srtobj.dataModel.data[srtobj.rowIndx].picture;
_title = picture;
<%= attributeComp.getServiceDataOptions() %>
serviceObj.dataModel = {data:serviceData};
jQuery("#grid_service").pqGrid( serviceObj );
jQuery("#grid_service").pqGrid( {title: picture + " - Services" } );
jQuery("#grid_service").pqGrid( "refreshDataAndView" );
jQuery("#currentTitleIndex").val(titleRowIndex);
scrollTo('side-service');
}
});
jQuery("#grid_array").pqGrid( {
quitEditMode: function (evt, tobj) {
//alert(titleRowIndex);
prepareTitleSavePackage(tobj,titleRowIndex);
}
});
jQuery("#grid_array").pqGrid( {
rowClick: function (evt, tobj) {
titleRowIndex = tobj.rowIndx;
prepareTitleSavePackage(tobj,titleRowIndex);
//alert(eventRowIndex);
}
});
titleGrid.on("pqgridquiteditmode", function (evt, ui) {
        //exclude esc and tab           
        if (evt.keyCode != $.ui.keyCode.ESCAPE && evt.keyCode != $.ui.keyCode.TAB) {
            titleGrid.pqGrid("saveEditCell");
        }
    });
  });

This table does NOT work:

Code: [Select]

var serviceRowIndex;
var serviceObj = {};
    serviceObj.width = 900;
    serviceObj.height = 200;
serviceObj.title = "Services";
    serviceObj.colModel = [{title:"Service Type", width:100, dataType:"string", dataIndx: "document_category"},
        {title:"Status", width:50, dataType:"string", align:"center", dataIndx: "document_status"},
        {title:"Service Name", width:150, dataType:"string", align:"left", dataIndx: "object_name"},
{title:"Opt", width:25, dataType:"string", align:"center", dataIndx: "optional"},
{title:"Ex'd", width:25, dataType:"string", align:"center", dataIndx: "exercised"},
{title:"objectId", width:16, dataType:"string", hidden:true, dataIndx: "r_object_id"},
{title:"Sub Type", width:16, dataType:"string", dataIndx: "sub_type"},
{title:"Start Date", width:16, dataType:"string",  dataIndx: "start_date", editor: { type: dateEditor}},
{title:"End Date", width:16, dataType:"string",  dataIndx: "end_date", editor: { type: dateEditor}},
{title:"Exercise Date", width:16, dataType:"string",  dataIndx: "exercise_date", editor: { type: dateEditor}},
{title:"Date Exercised", width:16, dataType:"string",  dataIndx: "date_exercised", editor: { type: dateEditor}},
{title:"Original Committed", width:16, dataType:"float", dataIndx: "original_committed"},
{title:"Current Committed", width:16, dataType:"float",  dataIndx: "current_committed"},
{title:"Optional", width:16, dataType:"float",  dataIndx: "optional_amount"},
{title:"Applied Against $", width:16, dataType:"float", dataIndx: "applied_against"},
{title:"parentId", width:16, dataType:"string", hidden:true, dataIndx: "parentId"},
{title:"contractChronId", width:16, dataType:"string", hidden:true, dataIndx: "contractChronId"}];
var serviceData = [];
serviceObj.hoverMode = 'cell';
serviceObj.selectionModel = { type: 'cell' };
serviceObj.editModel = {
            saveKey: $.ui.keyCode.ENTER,
            select: false,
            keyUpDown: false,
            cellBorderWidth: 0               
        };
serviceObj.editor = { type: "textbox" };
var serviceGrid = jQuery("#grid_service").pqGrid( serviceObj );
jQuery("#grid_service").pqGrid( {
rowDblClick : function (evt, stobj) {
serviceRowIndex = stobj.rowIndx;
var objId = stobj.dataModel.data[stobj.rowIndx].r_object_id;
var serviceName = stobj.dataModel.data[stobj.rowIndx].object_name;
_service = serviceName;
<%= attributeComp.getStepDataOptions() %>
stepObj.dataModel = {data:stepData};
jQuery("#grid_step").pqGrid( stepObj );
jQuery("#grid_step").pqGrid( {title: _title + " - " + serviceName + " - Steps" } );
jQuery("#grid_step").pqGrid( "refreshDataAndView" );
jQuery("#currentServiceIndex").val(serviceRowIndex);
scrollTo('side-step');
}
});
jQuery("#grid_service").pqGrid( {
quitEditMode: function (evt, srobj) {
//alert(serviceRowIndex);
prepareServiceSavePackage(srobj,serviceRowIndex);
}
});
jQuery("#grid_service").pqGrid( {
rowClick: function (evt, srobj) {
serviceRowIndex = srobj.rowIndx;
prepareServiceSavePackage(srobj,serviceRowIndex);
//alert(eventRowIndex);
}
});
serviceGrid.on("pqgridquiteditmode", function (evt, ui) {
        //exclude esc and tab           
        if (evt.keyCode != $.ui.keyCode.ESCAPE && evt.keyCode != $.ui.keyCode.TAB) {
            serviceGrid.pqGrid("saveEditCell");
        }
    });


[jpantona]

Never mind. I figured this out. Below are the changes to the table config that made it work. IN summary, it appears the editor needs to be explicitely defined for each column model in the PRO version (but not in the standard version).

Code: [Select]

serviceObj.colModel = [{title:"Service Type", width:100, dataType:"string", dataIndx: "document_category", editor: { type: function (ui) { dropDownEditor(ui, arrServices);}} },
        {title:"Status", width:50, dataType:"string", align:"center", dataIndx: "document_status", editor: { type: function (ui) { dropDownEditor(ui, arrStatus);}} },
        {title:"Service Name", width:150, dataType:"string", align:"left", dataIndx: "object_name", editor: { type: "contenteditable" }},
{title:"Opt", width:25, dataType:"string", align:"center", dataIndx: "optional", editor: {
                type: 'select',
                options: ['', 'X'] }},
{title:"Ex'd", width:25, dataType:"string", align:"center", dataIndx: "exercised", editor: {
                type: 'select',
                options: ['', 'X'] }},
{title:"objectId", width:16, dataType:"string", hidden:true, dataIndx: "r_object_id"},
{title:"Sub Type", width:16, dataType:"string", dataIndx: "sub_type", editor: { type: function (ui) { dropDownEditor(ui, arrSubServices);}} },
{title:"Start Date", width:16, dataType:"string",  dataIndx: "start_date", editor: { type: dateEditor}},
{title:"End Date", width:16, dataType:"string",  dataIndx: "end_date", editor: { type: dateEditor}},
{title:"Exercise Date", width:16, dataType:"string",  dataIndx: "exercise_date", editor: { type: dateEditor}},
{title:"Date Exercised", width:16, dataType:"string",  dataIndx: "date_exercised", editor: { type: dateEditor}},
{title:"Original Committed", width:16, dataType:"float", dataIndx: "original_committed", editor: { type: "contenteditable" }},
{title:"Current Committed", width:16, dataType:"float",  dataIndx: "current_committed", editor: { type: "contenteditable" }},
{title:"Optional", width:16, dataType:"float",  dataIndx: "optional_amount", editor: { type: "contenteditable" }},
{title:"Applied Against $", width:16, dataType:"float", dataIndx: "applied_against", editor: { type: "contenteditable" }},
{title:"parentId", width:16, dataType:"string", hidden:true, dataIndx: "parentId"},
{title:"contractChronId", width:16, dataType:"string", hidden:true, dataIndx: "contractChronId"}];


[jpantona]

The other key to success was adding clicksToEdit: 1, to the editModel for the table e.g.

Code: [Select]

eventObj.editModel = {
clicksToEdit: 1,
            saveKey: $.ui.keyCode.ENTER,
            select: false,
            keyUpDown: false,
            cellBorderWidth: 0               
        };


[paramvir]

jpantona

Pro helps you to write less code and is based on DRY (don't repeat yourself)

Instead of writing editor: { type: "contenteditable" } for individual columns, you can put it in the global editor option

http://paramquery.com/pro/api#option-editor

Summary:

1) If most of your columns are of a single type i.e. 'textbox', then you can put it in the global editor option. Similarly, if you want to assign common style and class to all editors in your grid, you can again put it in global editor option

2) Same is the case with editModel http://paramquery.com/pro/api#option-editModel

Please refer API for details and all the available options.