jQWidgets Forums
jQuery UI Widgets › Forums › Grid › Grid formatting
This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 12 years, 3 months ago.
Viewing 2 posts - 1 through 2 (of 2 total)
-
AuthorGrid formatting Posts
-
This is probably a simple question: How can I center the grid div within another container??
Thanks for your response.
Hello Consulting programmer,
Here is an example on how to center the grid div within a container div horizontally:
<!DOCTYPE html><html lang="en"><head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script> <script type="text/javascript" src="../../scripts/gettheme.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.grouping.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.export.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.export.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.export.js"></script> <script type="text/javascript"> $(document).ready(function () { var theme = getTheme(); var url = "../sampledata/products.xml"; // prepare the data var source = { datatype: "xml", datafields: [ { name: 'ProductName', type: 'string' }, { name: 'QuantityPerUnit', type: 'int' }, { name: 'UnitPrice', type: 'float' }, { name: 'UnitsInStock', type: 'float' }, { name: 'Discontinued', type: 'bool' } ], root: "Products", record: "Product", id: 'ProductID', url: url }; var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties) { if (value < 20) { return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">' + value + '</span>'; } else { return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>'; } } var dataAdapter = new $.jqx.dataAdapter(source, { downloadComplete: function (data, status, xhr) { }, loadComplete: function (data) { }, loadError: function (xhr, status, error) { } }); // initialize jqxGrid $("#jqxgrid").jqxGrid( { width: 670, source: dataAdapter, theme: theme, pageable: true, groupable: true, autoheight: true, sortable: true, altrows: true, enabletooltips: true, editable: true, columnsresize: true, autoheight: true, selectionmode: 'multiplecellsadvanced', columns: [ { text: 'Product Name', datafield: 'ProductName', width: 250 }, { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', width: 150 }, { text: 'Unit Price', datafield: 'UnitPrice', cellsalign: 'right', cellsformat: 'c2', width: 70 }, { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', cellsrenderer: cellsrenderer, width: 100 }, { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued', width: 100 }, ] }); $("#excelExport").click(function () { $("#jqxgrid").jqxGrid('exportdata', 'xls', 'jqxGrid', false); }); // centers the grid within the container var dWidth = $("#jqxWidget").width(); var gWidth = $("#jqxgrid").width(); var margin = (dWidth - gWidth) / 2; $("#jqxgrid").css("margin-left", margin); }); </script></head><body class='default'> <div id='jqxWidget' style="width: 1000px; background-color: Blue; font-size: 13px; font-family: Verdana; float: left;"> <div id="jqxgrid"> </div> </div> <input type="button" value="Export to Excel" id='excelExport' /></body></html>
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
Viewing 2 posts - 1 through 2 (of 2 total)
You must be logged in to reply to this topic.