checkbox rendering

[JeroenNL]

Hello,

I have a checkbox in a propertygrid. When the row is selected, I see a checkbox I can check on or off. When the row is not selected, I see the value in text (either true or false in my case). I want to see a checkbox all the time, whether the row is selected or not.

How can I achieve that?

Cheers,
Jeroen

[stworthy]

The propertygrid extends from datagrid, the 'columns' property can be defined as below to display a 'checkbox' column.

Code:

$('#pg').propertygrid({
	columns:[[
	    {field:'ck',width:20,checkbox:true},
	    {field:'name',title:'Name',width:100,sortable:true},
	    {field:'value',title:'Value',width:100,resizable:false}
	]]
})

[JeroenNL]

This does not show a normal propertygrid.  According to the documentation some data is mandatory for propertygrid data and the example here does not provide for that?

Can you provide a working example of getting a checkbox working in propertygrid?

[stworthy]

There's one thing that must be clarified. Do you want the checkbox to display through all the rows, or only on one special row? i.e. What you want is the customized 'checkbox' editor on the value column. Please describe your requirement in more detail.

[JeroenNL]

I have a propertygrid in which I want to show+edit properties of an object. That object has multiple boolean values which I want to set using a checkbox editor. I got that working using the checkbox editor. When I -edit- the cell, I see a checkbox.

But when I leave the cell, the checkbox disappears and the cell displays the boolean value (so either true or false) as plain text in the propertygrid. This is not wanted. I want to see checkboxes for all boolean properties all the time, whether I'm editing or not.

Thanks for getting into this - if you need more info, let me know!

[stworthy]

Here is the solution that use the 'formatter' function to display a checkbox with 'true'/'false' label on the value column.

Code:

$('#pg').propertygrid({
	width: 400,
	data: data,
	scrollbarSize: 0,
	columns:[[
	    {field:'name',title:'Name',width:100,sortable:true},
	    {field:'value',title:'Value',width:100,resizable:false,
	    	formatter:function(value,row){
	    		if (row.name == 'FrequentBuyer'){
	    			console.log(value)
		    		return '<input class="pg-ck" type="checkbox" ' + (value=='true'?'checked':'') + '>' + value;
	    		} else {
	    			return value;
	    		}
	    	}
		}
	]],
	onBeforeEdit: function(index,row){
		if (row.name == 'FrequentBuyer'){
			return false;
		}
	},
	onLoadSuccess: function(){
		var pg = $(this);
		$(this).propertygrid('getPanel').click(function(e){
			if ($(e.target).hasClass('pg-ck')){
				var tr = $(e.target).closest('tr.datagrid-row');
				var index = parseInt(tr.attr('datagrid-row-index'));
				var row = pg.propertygrid('getRows')[index];
				if (row.value == 'true'){
					row.value = 'false';
				} else {
					row.value = 'true';
				}
				pg.propertygrid('refreshRow', index);
			}
		})
	}
})

The example is also available from http://jsfiddle.net/tuy4qnmj/

[JeroenNL]

Nice example! I changed the check on "FrequentBuyer" to

if (row.editor && row.editor.type === 'checkbox') {

}

and it works in my scenario too. Thanks!