What do I need to do to make 'cbHeader: true' working.

[waldemarb]

Hi,

Please help.
I am trying to place a checkbox, that sellects all rows in view, in the header and I can not succeed.
My code below.

Thank you,
Waldemar



function claims_drawGrid() {
   //console.log('inside claims_drawGrid.');
   //debugger;
   
    function pqDatePicker(ui) {
         var $this = $(this);
         $this
             .css({ zIndex: 3, position: "relative" })
             .datepicker({
                 yearRange: "-10:+0", //10 years prior to present.
                 changeYear: true,
                 changeMonth: true,
                 //showButtonPanel: true,
                 onClose: function (evt, ui) {
                     $(this).focus();
                 }
             });
         //default From date
         $this.filter(".pq-from").datepicker("option", "defaultDate", new Date("2014/01/01"));
         $this.filter(".pq-from").datepicker( "option", "dateFormat", "yy/mm/dd" );
         
         //default To date
         $this.filter(".pq-to").datepicker("option", "defaultDate", new Date("2016/12/31"));
         $this.filter(".pq-to").datepicker( "option", "dateFormat", "yy/mm/dd" );
     }

   var gridD = null;
   var obj = {
      width : "100%",
      height : 800,
      editable : false,
      editModel: { clicksToEdit: 2, saveKey: 13},
      resizable : true,
      track: true,
      collapsible: false,
      rowBorders: false,
        columnBorders: false,
      showTitle : false,
      selectionModel: {type: 'none', subtype: 'incr', cbHeader: false, cbAll: true},
      //selectionModel: { type: 'row' , mode: 'range', all: null, cbAll: null, cbHeader: true },
      //selectionModel: {type: 'row', subtype: 'incr', cbAll: true,  cbHeader: true},
        filterModel: { on: true, mode: "AND", header: true },
        rowSelect: function (evt, ui) { claims_setSelectedRow(ui) },
        rowUnSelect: function (evt, ui) { claims_reSetSelectedRow(ui) },
        numberCell: {show: false},
        //minWidth: 30,
        pageModel: {type: "local", rPP: 15, rPPOptions: [5, 10, 15, 25, 50, 100]},
      colModel: [
          //{title : "<label><input type='checkbox' /></label>", dataIndx : "cbStatus",
         {title : "", dataIndx : "cbStatus", width : 10, align : "center", type : 'checkBoxSelection',
         cls : 'ui-state-default', resizable : false, sortable : false, hidden : false },
         {dataIndx: 'clmStatusDesc', title: 'Status', width: '80',
               filter: {type: 'textbox', condition: 'begin', listeners: ['keyup']},
            render: function (ui) {
               var flData = ui.rowData.clmStatusDesc;               
               if (flData == undefined || flData.trim() == "") {flData = 'New'};
               return flData;
            }
         },
           {dataIndx: 'reviewer', title: 'Reviewer', width: '150', editable: true,
               filter: {type: 'textbox', condition: 'contain', listeners: ['keyup']},
               render: function (ui) {
               var flData = ui.rowData.reviewer;
               if (flData == undefined || flData.trim() == "") {flData = 'Unassigned'};
               return flData;
            }
           },
           {dataIndx: 'iot', title: 'Region', width: '100',
               filter: {type: 'textbox', condition: 'begin', listeners: ['keyup']}},
           {dataIndx: 'ctryDesc', title: 'Country', width: '100',
               filter: {type: 'textbox', condition: 'begin', listeners: ['keyup']}},
           {dataIndx: 'clmNumber', title: 'Claim Number', width: '110',
               filter: {type: 'textbox', condition: 'contain', listeners: ['keyup']},
               render: function (ui) {
                   var flData = ui.rowData.clmNumber;
                   var sLink = '<a class="underline highlight" href="ClaimItem.html?clmNbr='
                      + flData + '" target="_self">' + flData + '</a>';
                   return sLink;
                  }
           },
           {dataIndx: 'clmName', title: 'Claim Description', width: '220',
               filter: {type: 'textbox', condition: 'contain', listeners: ['keyup']}},               
            {dataIndx: 'clmAmount', title: '$ Amount', width: '95',
              filter: {type: 'textbox', condition: 'gte', listeners: ['keyup']}
               ,render: function(ui){
                  return appFormatCurrency(ui.cellData);
               }
            },
           {dataIndx: 'ovrallScr', title: 'Risk Score', width: '70',
               filter: {type: 'textbox', condition: 'gte', listeners: ['keyup']}},
            {dataIndx: 'shrtScrCmmnts', title: 'Reason', width: '160',
                  filter: {type: 'textbox', condition: 'contain', listeners: ['keyup']}},
           {dataIndx: 'empName', title: 'Requester', width: '160',
               filter: {type: 'textbox', condition: 'contain', listeners: ['keyup']}},                     
           {dataIndx: 'paiddate', title: 'Paid date', minWidth: '130', dataType: "date",
               filter: {type: 'textbox', condition: "between", init: pqDatePicker, listeners: ['change']},
               render: function (ui) {
                  var flData = new Date(ui.rowData.paiddate);
                  flData = jQuery.datepicker.formatDate('yy/mm/dd', flData);
                  return flData;
               }
           },
           //{ title: "", dataIndx: "state", width: 30, align: "center", type:'checkBoxSelection', cls: 'ui-state-default', resizable: false, sortable:false }
            //{ title: ' ', width: '0', dataType: "text"}
      ],
       dataModel: { location: "local", sorting: "local", recIndx: "clmNumber" }
   };

   appGrid = $("#gridAllClaims").pqGrid(obj);
};