jqGrid and jqPivot: Does it support inline or cell editing?

258 views Asked by At

I'm using jqGrid with the jqPivot API.

My problem is I need to edit pivoted columns (PHI, JAP, USA, KOR, CHI and SIN). Is inline editing or cell editing feature supported in jqGrid with jqPivot?

Here is my code below:

var mydata = [
    {id: "1", segment: "Transfer", type:"Revenue", weekName: "Week Total" , week:"7/6/2013", PHI:"8", JAP:"12", USA:"54", KOR:"67", CHI:"65", SIN:"3" },
 {id: "1", segment: "Transfer", type:"Revenue", weekName: "Week One", week:"6/15/2013", PHI:"8", JAP:"8", USA:"8", KOR:"67", CHI:"8", SIN:"54" },
 {id: "1", segment: "Transfer", type:"Revenue", weekName: "Week Two", week:"6/22/2013", PHI:"8", JAP:"8", USA:"43", KOR:"8", CHI:"8", SIN:"8" },
 {id: "1", segment: "Transfer", type:"Revenue", weekName: "Week Three", week:"6/29/2013", PHI:"8", JAP:"43", USA:"8", KOR:"43", CHI:"43", SIN:"8" },
 {id: "1", segment: "Transfer", type:"Revenue", weekName: "Week Four", week:"7/6/2013", PHI:"34", JAP:"8", USA:"8", KOR:"8", CHI:"8", SIN:"8" },
    
 {id: "1", segment: "Transfer", type:"QWPE", weekName: "Week Total", week:"7/6/2013", PHI:"8", JAP:"45", USA:"8", KOR:"54", CHI:"8", SIN:"8" },
 {id: "1", segment: "Transfer", type:"QWPE", weekName: "Week One", week:"6/15/2013", PHI:"8", JAP:"8", USA:"8", KOR:"8", CHI:"8", SIN:"43" },
 {id: "1", segment: "Transfer", type:"QWPE", weekName: "Week Two", week:"6/22/2013", PHI:"8", JAP:"4", USA:"3", KOR:"8", CHI:"43", SIN:"23" },
 {id: "1", segment: "Transfer", type:"QWPE", weekName: "Week Three", week:"6/29/2013", PHI:"8", JAP:"8", USA:"8", KOR:"43", CHI:"8", SIN:"8" },
 {id: "1", segment: "Transfer", type:"QWPE", weekName: "Week Four", week:"7/6/2013", PHI:"8", JAP:"8", USA:"8", KOR:"8", CHI:"8", SIN:"8" },
    
 {id: "1", segment: "Transfer", type:"ASWE", weekName: "Week Total", week:"7/6/2013", PHI:"3", JAP:"8", USA:"8", KOR:"8", CHI:"8", SIN:"8" },
 {id: "1", segment: "Transfer", type:"ASWE", weekName: "Week One", week:"6/15/2013", PHI:"32", JAP:"76", USA:"8", KOR:"8", CHI:"43", SIN:"8" },
 {id: "1", segment: "Transfer", type:"ASWE", weekName: "Week Two", week:"6/22/2013", PHI:"12", JAP:"8", USA:"43", KOR:"32", CHI:"8", SIN:"8" },
 {id: "1", segment: "Transfer", type:"ASWE", weekName: "Week Three", week:"6/29/2013", PHI:"12", JAP:"12", USA:"90", KOR:"8", CHI:"8", SIN:"8" },
 {id: "1", segment: "Transfer", type:"ASWE", weekName: "Week Four", week:"7/6/2013", PHI:"67", JAP:"8", USA:"8", KOR:"8", CHI:"8", SIN:"8" },
    
 {id: "1", segment: "Transfer", type:"YUPP", weekName: "Week Total", week:"7/6/2013", PHI:"8", JAP:"8", USA:"33", KOR:"8", CHI:"45", SIN:"76" },
 {id: "1", segment: "Transfer", type:"YUPP", weekName: "Week One", week:"6/15/2013", PHI:"8", JAP:"4", USA:"8", KOR:"43", CHI:"8", SIN:"8" },
 {id: "1", segment: "Transfer", type:"YUPP", weekName: "Week Two", week:"6/22/2013", PHI:"43", JAP:"2", USA:"43", KOR:"8", CHI:"8", SIN:"8" },
 {id: "1", segment: "Transfer", type:"YUPP", weekName: "Week Three", week:"6/29/2013", PHI:"43", JAP:"32", USA:"8", KOR:"43", CHI:"8", SIN:"8" },
 {id: "1", segment: "Transfer", type:"YUPP", weekName: "Week Four", week:"7/6/2013", PHI:"8", JAP:"8", USA:"34", KOR:"8", CHI:"8", SIN:"69" },
 
 
 {id: "2", segment: "Preview", type:"Revenue", weekName: "Week Total", week:"7/6/2013", PHI:"8", JAP:"12", USA:"54", KOR:"67", CHI:"65", SIN:"3" },
 {id: "2", segment: "Preview", type:"Revenue", weekName: "Week One", week:"6/15/2013", PHI:"8", JAP:"8", USA:"8", KOR:"67", CHI:"8", SIN:"54" },
 {id: "2", segment: "Preview", type:"Revenue", weekName: "Week Two", week:"6/22/2013", PHI:"8", JAP:"8", USA:"43", KOR:"8", CHI:"8", SIN:"8" },
 {id: "2", segment: "Preview", type:"Revenue", weekName: "Week Three", week:"6/29/2013", PHI:"8", JAP:"43", USA:"8", KOR:"43", CHI:"43", SIN:"8" },
 {id: "2", segment: "Preview", type:"Revenue", weekName: "Week Four", week:"7/6/2013", PHI:"34", JAP:"8", USA:"8", KOR:"8", CHI:"8", SIN:"8" },
    
 {id: "2", segment: "Preview", type:"QWPE", weekName: "Week Total", week:"7/6/2013", PHI:"8", JAP:"45", USA:"8", KOR:"54", CHI:"8", SIN:"8" },
 {id: "2", segment: "Preview", type:"QWPE", weekName: "Week One", week:"6/15/2013", PHI:"8", JAP:"8", USA:"8", KOR:"8", CHI:"8", SIN:"43" },
 {id: "2", segment: "Preview", type:"QWPE", weekName: "Week Two", week:"6/22/2013", PHI:"8", JAP:"4", USA:"3", KOR:"8", CHI:"43", SIN:"23" },
 {id: "2", segment: "Preview", type:"QWPE", weekName: "Week Three", week:"6/29/2013", PHI:"8", JAP:"8", USA:"8", KOR:"43", CHI:"32", SIN:"8" },
 {id: "2", segment: "Preview", type:"QWPE", weekName: "Week Four", week:"7/6/2013", PHI:"8", JAP:"8", USA:"232", KOR:"8", CHI:"8", SIN:"8" },
    
 {id: "2", segment: "Preview", type:"ASWE", weekName: "Week Total", week:"7/6/2013", PHI:"3", JAP:"8", USA:"8", KOR:"8", CHI:"8", SIN:"8" },
 {id: "2", segment: "Preview", type:"ASWE", weekName: "Week One", week:"6/15/2013", PHI:"32", JAP:"76", USA:"8", KOR:"4", CHI:"43", SIN:"8" },
 {id: "2", segment: "Preview", type:"ASWE", weekName: "Week Two", week:"6/22/2013", PHI:"13", JAP:"8", USA:"43", KOR:"8", CHI:"32", SIN:"8" },
 {id: "2", segment: "Preview", type:"ASWE", weekName: "Week Three", week:"6/29/2013", PHI:"2", JAP:"12", USA:"90", KOR:"23", CHI:"32", SIN:"8" },
 {id: "2", segment: "Preview", type:"ASWE", weekName: "Week Four", week:"7/6/2013", PHI:"67", JAP:"8", USA:"23", KOR:"8", CHI:"8", SIN:"8" },
    
 {id: "2", segment: "Preview", type:"YUPP", weekName: "Week Total", week:"7/6/2013", PHI:"8", JAP:"32", USA:"33", KOR:"8", CHI:"45", SIN:"76" },
 {id: "2", segment: "Preview", type:"YUPP", weekName: "Week One", week:"6/15/2013", PHI:"8", JAP:"4", USA:"8", KOR:"43", CHI:"8", SIN:"8" },
 {id: "2", segment: "Preview", type:"YUPP", weekName: "Week Two", week:"6/22/2013", PHI:"43", JAP:"323", USA:"43", KOR:"32", CHI:"8", SIN:"8" },
 {id: "2", segment: "Preview", type:"YUPP", weekName: "Week Three", week:"6/29/2013", PHI:"43", JAP:"8", USA:"8", KOR:"43", CHI:"8", SIN:"8" },
 {id: "2", segment: "Preview", type:"YUPP", weekName: "Week Four", week:"7/6/2013", PHI:"8", JAP:"8", USA:"34", KOR:"8", CHI:"32", SIN:"69" },
  
];


 var grid = $("#grid");
  grid.jqGrid('jqPivot',
    mydata, {
        xDimension: [
    {
            dataName: 'segment',
            label: ' ',
            width: 90
       }, {
            dataName: 'type',
            label: ' ',
            width: 90
       }  
  ],
        yDimension: [
    {
            dataName: 'week',
            converter: function (val, xval) {
      return val.replace(/\s/g, ' ');
   }
          }
  ],
  
        aggregates: [{
            member: 'PHI',
            aggregator: 'sum',
            width: 50,
   summaryType: 'sum',
            label: 'PHI'
     }, 
  {
            member: 'JAP',
            aggregator: 'sum',
            width: 50,
   summaryType: 'sum',
            label: 'JAP'
        },
        {
            member: 'USA',
            aggregator: 'sum',
            width: 50,
   summaryType: 'sum',
            label: 'USA'
        },
  {
            member: 'KOR',
            aggregator: 'sum',
            width: 50,
   summaryType: 'sum',
            label: 'KOR'
        },
  {
            member: 'CHI',
            aggregator: 'sum',
            width: 50,
   summaryType: 'sum',
            label: 'CHI'
        },
  {
            member: 'SIN',
            aggregator: 'sum',
            width: 50,
   summaryType: 'sum',
            label: 'SIN'
        }
  ],
        colTotals: true,
  rowTotals: true

    }, {
        width: "100%",
        height: "100%",
        pager: "#pager",
        caption: "ADR",
  /*
  cellEdit:true,
  beforeEditCell: function(rowid,cellname,value,iRow,iCol) {
   
  },*/
  onSelectRow: function(id){
   //grid.editRow(id); 
  }
    });
 <table id="grid"></table>

1

There are 1 answers

1
ramt On
  onSelectRow: function(rowid,status, e){
    if (rowid && rowid !== lastsel) {
            grid.saveRow(lastsel, false, 'clientArray');
            grid.editRow(rowid, true);
            lastsel = rowid;
    }
  },
  loadComplete : function() {
         var colModel = [];
               var model = {};
               var currentColModel = grid.jqGrid ('getGridParam', 'colModel');
         var editableColumns = ["PHI","JAP","USA","KOR","CHI","SIN"];

         for(var i =0; i < currentColModel.length; i++) {
                    model = currentColModel[i];
            if($.inArray( model.label, editableColumns ) !== -1){
                         model.editable = true;
                         model.sortable = false;
                    }
                    colModel.push(model);
                 }

               grid.setGridParam({colModel:colModel});
}