Print Page - checkbox rendering

Title: checkbox rendering
Post by: JeroenNL on March 05, 2016, 01:14:59 AM

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

Title: Re: checkbox rendering
Post by: stworthy on March 05, 2016, 03:44:51 AM

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}
	]]
})

Title: Re: checkbox rendering
Post by: JeroenNL on March 11, 2016, 10:45:29 AM

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?

Title: Re: checkbox rendering
Post by: stworthy on March 11, 2016, 07:42:18 PM

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.

Title: Re: checkbox rendering
Post by: JeroenNL on March 12, 2016, 12:18:24 AM

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!

Title: Re: checkbox rendering
Post by: stworthy on March 12, 2016, 03:20:22 AM

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/

Title: Re: checkbox rendering
Post by: JeroenNL on March 13, 2016, 04:23:23 AM

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

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

}

and it works in my scenario too. Thanks! :)

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: JeroenNL on March 05, 2016, 01:14:59 AM