direct editable treegrid

[JeroenNL]

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

[stworthy]

Please try the following example.

Code:

<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>

[JeroenNL]

Excellent, I'm glad to see this functionality is possible. I'll try this a.s.a.p.

[vicente]

Hi.

what is the event when I clicked the checkbox, let's say b1?

kindly help please.

thank you so much