jqxgrid editable properties based on a value on another column

With reference to the code available in given link below http://jsfiddle.net/tzHXR/

var data = generatedata(500);
 var source = {
     localdata: data,
     datafields: [{
         name: 'firstname',
         type: 'string'
     }, {
         name: 'lastname',
         type: 'string'
     }, {
         name: 'productname',
         type: 'string'
     }, {
         name: 'date',
         type: 'date'
     }, {
         name: 'quantity',
         type: 'number'
     }, {
         name: 'price',
         type: 'number'
     }],
     datatype: "array"
 };

 var adapter = new $.jqx.dataAdapter(source);
 $("#jqxgrid").jqxGrid({
     width: 500,
     theme: 'energyblue',
     editable: true,
     source: adapter,
     sortable: true,
     columns: [{
         text: 'First Name',
         datafield: 'firstname',
         width: 90
     }, {
         text: 'Last Name',
         datafield: 'lastname',
         width: 90
     }, {
         text: 'Product',
         datafield: 'productname',
         width: 170
     }, {
         text: 'Order Date',
         datafield: 'date',
         width: 160,
         cellsformat: 'dd-MMMM-yyyy'
     }, {
         text: 'Quantity',
         datafield: 'quantity',
         width: 80,
         cellsalign: 'right'
     }, {
         text: 'Unit Price',
         datafield: 'price',
         cellsalign: 'right',
         cellsformat: 'c2'
     }]
 });

How to set the column property of column quantity and price based on the value of Order Date??

Example: 
cellbeginedit: function (row) {
    var Orderdate = $("#jqxgrid1").jqxGrid('getcellvalue', row, 'date');
    if (Orderdate < '1-June-2018'){
    $('#jqxgrid').jqxGrid('setcolumnproperty', 'quantity', 'editable', false);  
    $('#jqxgrid').jqxGrid('setcolumnproperty', 'price', 'editable', false);
    }

}

In this particular case, all columns are by default having editable:true as the default properties. However as you can see in the given example, is it possible for the editable properties of a column to be set up based on the value from another column.

So after several tries, I finally figured out how to do this by utilizing 'cellselect'

$("#jqxgrid").on('cellselect', function (event) {
    $('#jqxgrid1').jqxGrid('setcolumnproperty','quantity', 'editable', true);
    $('#jqxgrid1').jqxGrid('setcolumnproperty','price', 'editable',true);
    var datafield = event.args.datafield;
    var rowindex = event.args.rowindex;
    var date = $("#jqxgrid").jqxGrid('getcellvalue',rowindex,'date');
    if (date < '1-June-2018' ){
        $('#jqxgrid1').jqxGrid('setcolumnproperty','quantity', 'editable', false);
        $('#jqxgrid1').jqxGrid('setcolumnproperty','price', 'editable', false);
    }

One interesting observation that I had is that it is important to reset the column property to default for every 'cellselect' event. if there is no reset, the impact of first 'cellselect' event will propagate to subsequent 'cellselect' event hence producing the undesirable result.

By doing this, one can dynamically decide which column can be edited for different row