Title: direct editable treegrid
Post by: JeroenNL on December 29, 2014, 03:19:54 AM
Hi,
My application needs a treegrid with 3 colums for each row: one string and two booleans. The boolean columns should be represented on screen by a checkbox. Suppose the treegrid consists of 10 rows, users should be able to quickly check/uncheck any of these checkboxes without first having to put the treegrid into editmode.
Is this possible with treegrid?
Cheers,
Jeroen
Title: Re: direct editable treegrid
Post by: stworthy on December 29, 2014, 08:35:39 AM
Please try the following example. <table id="tg"></table>
<script type="text/javascript">
var data = {total:4,rows:[
{id:1,name:'name1',b1:true,b2:true},
{id:2,name:'name11',b1:false,b2:true,_parentId:1},
{id:3,name:'name12',b1:true,b2:true,_parentId:1},
{id:4,name:'name13',b1:true,b2:true,_parentId:1}
]};
$(function(){
$('#tg').treegrid({
width:700,
height:250,
rownumbers: true,
animate:true,
fitColumns:true,
data:data,
idField:'id',
treeField:'name',
columns:[[
{title:'Name',field:'name',width:180},
{field:'b1',title:'B1',width:60,align:'center',
formatter:function(value,row){
var s = '<input class="ck" type="checkbox"' + (value?'checked':'') + '>'
return s;
}
},
{field:'b2',title:'B2',width:60,align:'center',
formatter:function(value,row){
var s = '<input class="ck" type="checkbox"' + (value?'checked':'') + '>'
return s;
}
}
]],
onLoadSuccess:function(){
var dg = $(this);
dg.treegrid('getPanel').unbind('.ck').bind('click.ck',function(e){
if ($(e.target).hasClass('ck')){
var td = $(e.target).closest('td');
var tr = td.closest('tr');
var id = tr.attr('node-id');
var field = td.attr('field');
var row = {};
row[field] = $(e.target).is(':checked') ? true : false;
dg.treegrid('update',{
id:id,
row:row
})
}
})
}
});
})
</script>
Title: Re: direct editable treegrid
Post by: JeroenNL on December 31, 2014, 02:01:48 AM
Excellent, I'm glad to see this functionality is possible. I'll try this a.s.a.p. :)
Title: Re: direct editable treegrid
Post by: vicente on May 12, 2015, 02:51:43 AM
Hi.
what is the event when I clicked the checkbox, let's say b1?
kindly help please.
thank you so much
|