Dear All,
I have a requirement to display the Tiles (oj-flex-item oj-panel) in 2 rows and 3 columns layout on a page. In other words, per page should display 6 panels. And the pagination control should allow the user to navigate back/forth to next/previous set of 6 tiles.
But the problem is that I am always getting the panels as a single row. What I want is that they should overflow into a second row, and only beyond that they should go to the second page through pagination control. Appreciate any help.
Sample html:
<div class="oj-web-applayout-max-width oj-web-applayout-content">
<div id="pagingControlDemo" >
<table id="table" summary="Asset List"
data-bind="ojComponent: {component: 'ojTable', rowTemplate: 'row_template',
data: pagingDatasource,
rootAttributes: {'style':'width: 100%;'}}">
</table>
<div class="oj-table-panel-bottom">
<div id="paging" data-bind="ojComponent: {component: 'ojPagingControl',
data: pagingDatasource, pageSize: 3}">
</div>
</div>
</div>
<script type="text/html" id="row_template">
<td>
<div class="oj-panel oj-panel-alt5 oj-margin demo-panel-customizations "
style="height : 300px; width : 380px" >
<p style="font-size: 25px;" data-bind="text: Name" />
<p style="font-size: 15px; align: center" data-bind="text: Role" />
<p style="font-size: 20px;" data-bind="text: City" />
</div>
</td>
</script>
</div>
Sample JS code:
require(['ojs/ojcore', 'knockout', 'jquery', 'ojs/ojknockout', 'ojs/ojrouter',
'ojs/ojmodule', 'ojs/ojoffcanvas', 'ojs/ojnavigationlist', 'ojs/ojarraytabledatasource', 'ojs/ojtable', 'ojs/ojpagingcontrol', 'ojs/ojpagingtabledatasource'],
function (oj, ko, $)
{ // this callback gets executed when all required modules are loaded
var router = oj.Router.rootInstance;
//...
function viewModel()
{
var self = this;
var assetArray = [
{Name: 'Sanjay Gupta', Role: 'Chief Scientist', City: 'Bangalore'},
{Name: 'Sunil Dhar', Role: 'Programmer', City: 'Hyderabad'},
{Name: 'David Jones', Role: 'Maintenance Staff', City: 'San Francisco'},
{Name: 'Alfried Gomes', Role: 'Manager, Sales', City: 'London'},
{Name: 'Sundar Noble', Role: 'HR Representative', City: 'Singapore'},
{Name: 'Patrick James', Role: 'PR Manager', City: 'San Francisco'},
{Name: 'Sun Yi', Role: 'Dev Manager', City: 'Beijing'}];
self.pagingDatasource = new oj.PagingTableDataSource(new oj.ArrayTableDataSource(assetArray, {idAttribute: 'Name'}));
}
oj.Router.defaults['urlAdapter'] = new oj.Router.urlParamAdapter();
oj.Router.sync().then(
function () {
ko.applyBindings(new viewModel(), document.getElementById('pagingControlDemo'));
},
function (error) {
oj.Logger.error('Error in root start: ' + error.message);
}
);
}
Regards,
Bhaskar