Recent Posts

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

Hi

Have set title on datagrid with

var dgPanel = $('#dgList').datagrid('getPanel');
dgPanel.panel('setTitle',data.titleName);

When changing singleselect state with

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

it destroys the title.

How to keep it without do a setTitle on panel again

Hi Jarry.

Works perfect. Thanks