DropDown Editor

[mukul]

Hi,

I am using pro version of script.

I have used editor type select for dropdown.

I need to make another cell editable or not editable on the base of dropdown value.

Please help me that how can I achieve this.

Thanks

[paramvir]

assign a class or id to your dropdown

Code: [Select]

editor:{
  type: 'select' ,
  options: array of options,
  cls: class of dropdown
}

//bind a delegate change event listener to dropdown.

Code: [Select]

$( "selector of grid" ).on( "change", "selector of dropdown", function() {

  //get value of this dropdown.
  var val = $(this).val();

  //get column which you want to make editable/ non-editable.
  var column = $grid.pqGrid('getColumn',  { dataIndx: 'dataIndx of the column'} );
 
  if ( val == 'some value ' )
    column.editable = true;
  else
    column.editable = false;

});


[mukul]

Thanks For your response.

The above code I have used and it does editable false for all column of particular dataindex, but I need to change editable false for a single cell.

Please help.

THanks

[paramvir]

In that case column.editable callback would be useful.

suppose you have dropdown editor in column1 and you need to determine the editable of cells in column2 depending upon value  in dropdown.

first save the dropdown value on every change of option.

Code: [Select]

$( "selector of grid" ).on( "change", "selector of dropdown", function() { 
  $grid.pqGrid( 'saveEditCell' );
});

implement editable callback for column2

Code: [Select]

column2.editable = function (ui){
   var val = ui.rowData[ dataIndx of column1 ]
   if ( val == 'some value ' )
     return true;
   else
     return false;   
}


[mukul]

We  are not saving the value.

Is there any method that we can get rowindex and colindex of dropdown cell.

Thanks

[paramvir]

Please post a screenshot what you are trying to do.

Regards

[mukul]

Hi

Hope you are well.

I have attached screen shot, in which there are one column in red circle have drop-down of values.
I need to change the column marked in square, editable or not editable depend on circle marked column value.

Please let me know how can I achieve this.

Thanks

[paramvir]

I'm well thanks. Where is the screenshot

[mukul]

Please find attached screenshot

[paramvir]

For setting the individual 'editable' of the cells in Planning meeting column you have to save the state editable: true/false in each row. saving State doesn't mean you have to display it, you can keep it in a hidden column. You can implement getData callback of editor to save the editable state of individual cells.

So in summary:

On change of dropdown value save editable of the cell in same row.

Code: [Select]

$( "selector of grid" ).on( "change", "selector of dropdown", function() { 
  $grid.pqGrid( 'saveEditCell' );
});


Code: [Select]

editor:{
  type: 'select' ,
  options: array of options,
  cls: class of dropdown,
  getData: function(ui) {
     var val = ui.$cell.find("select").val(),
        rowData = ui.rowData;
     if( val == 'some value' )
       rowData['editable']=true;
     else
       rowData['editable']=false;
  }
}

implement editable callback for column2 (planning meeting)

Code: [Select]

column2.editable = function (ui){
   return ui.rowData['editable];
}

Please let me know whether you still have any questions.

[mukul]

Hi,

According to your refrence I have implement below code but it is not working.

{title: "VP Assesment", width: 100, dataType: "string", dataIndx: "vp_assessment",
             editor: {type: 'select',cls:'prvp',  options: ['','YES' ,'NO'],getData: function(ui) {
     var val = ui.$cell.find("select").val(),
        rowData = ui.rowData;
console.log(rowData);
     if( val == 'YES' )
       rowData['editable']=true;
     else if(val == 'NO')
       rowData['editable']=false;
       else
       rowData['editable']=true;
  }
                    },
                           
            
            filter: {type: 'select',
                        options: ['','YES' ,'NO'],
                        condition: 'equal',
                        listeners: [{change: function(evt, ui) {
                                    filter("vp_assessment", $(this).val());
                                }
                            }]
                    }
            },
            
            {title: "Planning Meeting", width: 100, dataType: "string", dataIndx: "planning_meeting",
            editor: {
                        type: dateEditor,
                    }


 var column = $grid.pqGrid('getColumn',  { dataIndx: 'planning_meeting'} );
                    $("#grid_editing").on( "change", ".prvp", function() { 
                    $grid.pqGrid( 'saveEditCell' );
                });
                 $("#grid_editing").pqGrid( {editable:column.editable = function (ui){
   return ui.rowData['editable'];
}} );



Please let me know what I am doing wrong.

[paramvir]

your last line doesn't look right

$("#grid_editing").pqGrid( {editable:column.editable = function (ui){
   return ui.rowData['editable'];
}} );


Please set the editable property of column within colModel definition during initialization.

http://paramquery.com/pro/api#option-column-editable