Datagrid scrollview and cardview together

[Aod47]

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('');
            }
        });

[jarry]

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('');
}
})