ParamQuery grid support forum

General Category => Help for ParamQuery Pro => Topic started by: mukul on April 02, 2014, 02:14:04 pm

Title: DropDown Editor
Post by: mukul on April 02, 2014, 02:14:04 pm

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

Title: Re: DropDown Editor
Post by: paramvir on April 02, 2014, 02:53:48 pm

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;

});


Title: Re: DropDown Editor
Post by: mukul on April 02, 2014, 06:33:38 pm

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

Title: Re: DropDown Editor
Post by: paramvir on April 02, 2014, 06:52:07 pm

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;   
}


Title: Re: DropDown Editor
Post by: mukul on April 02, 2014, 07:03:33 pm

We  are not saving the value.

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

Thanks

Title: Re: DropDown Editor
Post by: paramvir on April 02, 2014, 07:09:37 pm

Please post a screenshot what you are trying to do.

Regards

Title: Re: DropDown Editor
Post by: mukul on April 03, 2014, 10:38:44 am

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

Title: Re: DropDown Editor
Post by: paramvir on April 03, 2014, 10:54:50 am

I'm well thanks. Where is the screenshot :)

Title: Re: DropDown Editor
Post by: mukul on April 03, 2014, 11:52:33 am

Please find attached screenshot

Title: Re: DropDown Editor
Post by: paramvir on April 03, 2014, 03:32:27 pm

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.

Title: Re: DropDown Editor
Post by: mukul on April 04, 2014, 10:53:17 am

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.

Title: Re: DropDown Editor
Post by: paramvir on April 04, 2014, 02:13:16 pm

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