Author Topic: boolean column rendering  (Read 4808 times)

RedBully

  • Pro Deluxe
  • Jr. Member
  • *
  • Posts: 51
    • View Profile
boolean column rendering
« on: April 04, 2014, 07:13:28 pm »
I've a customer requirement for a Boolean column in a grid where a checkbox is immediately exposed to allow editing of the value without the 'click to edit' model which seems prevalent in the paramgrid out of the box. Couldn't see a similar demo at quick review. Easy to do?

Cheers.

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6310
    • View Profile
Re: boolean column rendering
« Reply #1 on: April 04, 2014, 07:27:27 pm »
use render method to draw a checkbox in each cell of the column as in this demo on line 40

http://paramquery.com/demos/selection_custom

and use event.target in cellclick event to listen for checkbox clicks.

http://paramquery.com/pro/api#event-cellClick
« Last Edit: April 04, 2014, 07:30:58 pm by paramquery »

RedBully

  • Pro Deluxe
  • Jr. Member
  • *
  • Posts: 51
    • View Profile
Re: boolean column rendering
« Reply #2 on: April 24, 2014, 04:01:43 pm »
Hello,

I've followed your instructions and I now have a cellClick event that I use to
1. change the boolean value and
2. Go into Edit mode for the cell

I have created a custom editor for my boolean cell
It creates an input html control of type check box and I append it to $cell using much the same techinque you use in your examples:

Code: [Select]
var input = "";
input += "<input type='checkbox' ";
input += "name='" + dataIndx + "' ";
input += "class='" + cls + " grid_cell' ";

//Check it if required
var value = _convertToBoolean(cellData);
if (value) {
    input += "checked='checked' ";
}

input += "/>";

var $inp = $(input);


I also put in a handler to respond to the checkbox being selected to mark the cell as saved
and to send some data off to the server so that the back end is also updated

Code: [Select]
$inp.change(function () {

    $(grid).pqGrid("saveEditCell")

    //Also send the changed data to the server via ajax

});

The problem I have is that the value in the cell (i.e. ui.rowData[ui.column.dataIndx])
is a valid boolean prior to calling  $(grid).pqGrid("saveEditCell")  i.e. true or false.

However, after I call $(grid).pqGrid("saveEditCell"), ui.rowData[ui.column.dataIndx] changes
 to 'on'  (irrespective of whether the checkbox is checked or not)

I'm not sure what is going wrong and why the cell data is not storing the correct value.

Can you help?

RedBully

  • Pro Deluxe
  • Jr. Member
  • *
  • Posts: 51
    • View Profile
Re: boolean column rendering
« Reply #3 on: April 24, 2014, 06:21:53 pm »
I solved this myself.

I used the getData property when specifying the editor as described here:
http://paramquery.com/pro/api#option-column-editor