jqwidgets-scripts-custom
Version:
jQWidgets is an advanced jQuery, Angular 7, Vue, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.
72 lines (66 loc) • 4.06 kB
HTML
<html lang="en">
<head>
<title id='Description'>Grid Custom Element AutoRowHeight</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<meta name="description" content="This is an example of auto row height in Custom Element Grid." />
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="../../../styles/demos.css" type="text/css" />
<script type="text/javascript" src="../../../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcore.elements.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/jqxgrid.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxgrid.columnsresize.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxgrid.pager.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxpanel.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="../../../scripts/demos.js"></script>
<script type="text/javascript">
var source =
{
datatype: 'xml',
datafields: [
{ name: 'ShippedDate', map: 'm\\:properties>d\\:ShippedDate', type: 'date' },
{ name: 'Freight', map: 'm\\:properties>d\\:Freight', type: 'float' },
{ name: 'ShipName', map: 'm\\:properties>d\\:ShipName', type: 'string' },
{ name: 'ShipAddress', map: 'm\\:properties>d\\:ShipAddress', type: 'string' },
{ name: 'ShipCity', map: 'm\\:properties>d\\:ShipCity', type: 'string' },
{ name: 'ShipCountry', map: 'm\\:properties>d\\:ShipCountry', type: 'string' }
],
root: 'entry',
record: 'content',
id: 'm\\:properties>d\\:OrderID',
url: '../../sampledata/orders.xml'
};
var dataAdapter = new jqx.dataAdapter(source);
JQXElements.settings['gridSettings'] =
{
source: dataAdapter,
pageable: true,
autorowheight: true,
autoheight: true,
altrows: true,
columns: [
{ text: 'Ship Name', datafield: 'ShipName', width: 150 },
{ text: 'Freight', datafield: 'Freight', width: 100, cellsformat: 'F2', cellsalign: 'right' },
{ text: 'Ship Address', datafield: 'ShipAddress', width: 350 },
{ text: 'Ship City', datafield: 'ShipCity', width: 100 },
{ text: 'Ship Country', datafield: 'ShipCountry' }
]
};
</script>
</head>
<body>
<div class="example-description">
This example demonstrates the Auto Row Height functionality of Custom element Grid. The new feature enables the Grid Rows to automatically adjust their height depending on the cell values. In order to use the new functionality, you must set the Grid's 'autoheight' and 'autorowheight' properties to true.
</div>
<jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>