ParamQuery grid support forum

General Category => Help for ParamQuery Pro => Topic started by: RedBully on April 04, 2014, 07:13:28 pm

Title: boolean column rendering
Post by: RedBully 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.

Title: Re: boolean column rendering
Post by: paramvir 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

Title: Re: boolean column rendering
Post by: RedBully 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?

Title: Re: boolean column rendering
Post by: RedBully 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 (http://paramquery.com/pro/api#option-column-editor)