Recent Posts

Hi jarry.

Ohh i see. Just use the options

Thanks

Call the code below will recreate the datagrid again.

Code:

$('#dgList').datagrid({
   singleSelect:true           
});

You can set the 'title' property while creating the datagrid.

Code:

$('#dgList').datagrid({
   title: '...',
   singleSelect:true           
});

If you only want to change the selecting mode, please set the 'singleSelect' property instead of recreating the whole datagrid again.

Code:

$('#dgList').datagrid('options').singleSelect=true;

Any help ??

Please override the 'renderRow' method of the scrollview.

Code:

$.extend(scrollview, {
renderRow: function (target, fields, frozen, rowIndex, rowData) {
var opts = $.data(target, 'datagrid').options;
var cc = [];
if (frozen && opts.rownumbers) {
var rownumber = rowIndex + 1;
cc.push('<td class="datagrid-td-rownumber" style="height:50px"><div class="datagrid-cell-rownumber">' + rownumber + '</div></td>');
}
if (!frozen) {
cc.push('<td colspan=' + fields.length + ' style="padding:1px 10px 1px 10px;border:0;height:50px;width:360px !important;">');
cc.push('<div class="dash">');
cc.push('<table style="width:100%;border:none;border-collapse:collapse;">');
cc.push('<tr>');
cc.push('<td style="border:0">' + rowData['name'] + '</td>')
cc.push('</tr>');
cc.push('</table>');
cc.push('</div>');
}
cc.push('</td>');
return cc.join('');
}
})

Could you please provide an example of using Datagrid Scrollview + Cardview together? I tried creating a Datagrid Cardview first and added the data-options with view:scrollview, but it didn't work.

ps. I successfully created a Datagrid Scrollview with remote load.

Code:

    <table id="GridPanel1" border="false" data-options="view:scrollview,singleSelect:true,rownumbers:true,pageSize:50,idField:'GID',autoRowHeight:false,showHeader:false">
        <thead>
            <tr>
                <th data-options="field:'GID',hidden:false">GID</th>
                <th data-options="field:'product',hidden:true,width:'20%'">Product</th>
                <th data-options="field:'short_title',hidden:true,width:'20%'">Title</th>
                <th data-options="field:'published',hidden:true,width:'10%'">Publish</th>
                <th data-options="field:'authors',hidden:true,width:'20%'">Author</th>
                <th data-options="field:'quote',hidden:true,width:'10%'">Quote</th>
                <th data-options="field:'PNV',hidden:true,width:'10%'">PNV</th>
            </tr>                       
        </thead>
    </table> 

Code:

var cardview = $.extend({}, $.fn.datagrid.defaults.view, {
            renderFooter: function (target, container, frozen) {
                var opts = $.data(target, 'datagrid').options;
                var rows = $.data(target, 'datagrid').footer || [];
                var fields = $(target).datagrid('getColumnFields', frozen);
                var table = ['<table class="datagrid-ftable" cellspacing="0" cellpadding="0" border="0"><tbody>'];

                for (var i = 0; i < rows.length; i++) {
                    var styleValue = opts.rowStyler ? opts.rowStyler.call(target, i, rows[i]) : '';
                    var style = styleValue ? 'style="' + styleValue + '"' : '';
                    table.push('<tr class="datagrid-row" datagrid-row-index="' + i + '"' + style + '>');
                    table.push(this.renderRow.call(this, target, fields, frozen, i, rows[i]));
                    table.push('</tr>');
                }

                table.push('</tbody></table>');
                $(container).html(table.join(''));
            },
            renderRow: function (target, fields, frozen, rowIndex, rowData) {
                var cc = [];
                cc.push('<td colspan=' + fields.length + ' style="padding:1px 10px 1px 10px;border:0;width:360px !important;">');
                if (!frozen && rowData.GID) {
                    cc.push('<div class="dash">');
                    cc.push('<table style="width:100%;border:none;border-collapse:collapse;">');
                    cc.push('<tr>');
                    .......
                    cc.push('</tr>');
                    cc.push('</table>');
                    cc.push('</div>');
                }
                cc.push('</td>');
                return cc.join('');
            }
        });

Define the 'styler' function to set the CSS styles for the column.

Code:

    <script>
        function mystyler(){
            return 'background:#ddd'
        }
    </script>
<table id="tg" title="Folder Browser" class="easyui-treegrid" style="width:700px;height:250px"
data-options="
data:data,
rownumbers: true,
idField: 'id',
treeField: 'name'
">
<thead>
<tr>
<th data-options="field:'name',styler:mystyler" width="220">Name</th>
<th data-options="field:'size'" width="100" align="right">Size</th>
<th data-options="field:'date'" width="150">Modified Date</th>
</tr>
</thead>
</table>

Add the CSS style to hide the expanding/collapsing icon on the treegrid.

Code:

<style>
    .mytg .tree-hit{
        display: none;
    }
</style>

And then listen to the 'onClickRow' event, call the 'toggle' method to expand or collapse the node.

Code:

$('#tg').treegrid({
    cls: 'mytg',
    onClickRow: function(row){
        $(this).treegrid('toggle',row.id)
    }
})

How do I change the background color for a column?

I have a treegrid and i want the child rows to be smaller. Can i change the row height to smaller for just the child rows?

-btork

Hello,
I want to hide the expand icon for a treegrid for the entire table. I want the user to be able to expand by clicking on the entire row. Is this possible?

-btork