jqwidgets-scripts-custom
Version:
jQWidgets is an advanced jQuery, Angular 7, Vue, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.
208 lines (181 loc) • 10.1 kB
HTML
<html lang="en">
<head>
<title id='Description'>Grid Custom Element StatusBar</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 status bar 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.filter.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/jqxcheckbox.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxwindow.js"></script>
<script type="text/javascript" src="../../sampledata/generatedata.js"></script>
<script type="text/javascript" src="../../../scripts/demos.js"></script>
<script type="text/javascript">
var getAdapter = function() {
var source =
{
localdata: generatedata(15),
datatype: 'array',
datafields:
[
{ name: 'firstname', type: 'string' },
{ name: 'lastname', type: 'string' },
{ name: 'productname', type: 'string' },
{ name: 'quantity', type: 'number' },
{ name: 'price', type: 'number' },
{ name: 'available', type: 'bool' }
]
};
var dataAdapter = new jqx.dataAdapter(source);
return dataAdapter;
}
JQXElements.settings['windowSettings'] =
{
resizable: false, autoOpen: false
};
JQXElements.settings['dropDownListSettings'] =
{
selectedIndex: 0, autoDropDownHeight: true,
source: [ 'First Name', 'Last Name', 'Product', 'Quantity', 'Price' ]
};
window.onload = function() {
var myGrid = document.createElement('jqx-grid');
var myWindow = document.querySelector('jqx-window');
var myWindowInput = myWindow.querySelector('input');
var myWindowButtons = myWindow.querySelectorAll('jqx-button');
var myWindowDropDownList = myWindow.querySelector('jqx-drop-down-list');
var toolbar = toolbar => {
var container = document.createElement('div');
container.style.cssText = 'overflow: hidden; position: relative; margin: 5px;';
var addButton = document.createElement('jqx-button');
var deleteButton = document.createElement('jqx-button');
var reloadButton = document.createElement('jqx-button');
var searchButton = document.createElement('jqx-button');
addButton.style.cssText = 'float: left; margin-left: 5px';
deleteButton.style.cssText = 'float: left; margin-left: 5px';
reloadButton.style.cssText = 'float: left; margin-left: 5px';
searchButton.style.cssText = 'float: left; margin-left: 5px';
addButton.innerHTML = '<img style="position: relative; margin-top: 2px" src="../../../images/add.png"/><span style="position: relative;bottom: 3px;left: 3px;">Add</span>';
deleteButton.innerHTML = '<img style="position: relative; margin-top: 2px" src="../../../images/close.png"/><span style="position: relative;bottom: 3px;left: 3px;">Delete</span>';
reloadButton.innerHTML = '<img style="position: relative; margin-top: 2px" src="../../../images/refresh.png"/><span style="position: relative;bottom: 3px;left: 3px;">Reload</span>';
searchButton.innerHTML = '<img style="position: relative; margin-top: 2px" src="../../../images/search.png"/><span style="position: relative;bottom: 3px;left: 3px;">Find</span>';
addButton.settings = { width: 80, height: 25 };
deleteButton.settings = { width: 80, height: 25 };
reloadButton.settings = { width: 80, height: 25 };
searchButton.settings = { width: 80, height: 25 };
container.appendChild(addButton);
container.appendChild(deleteButton);
container.appendChild(reloadButton);
container.appendChild(searchButton);
toolbar[0].appendChild(container);
addButton.addEventListener('click', function() {
var datarow = generatedata(1);
myGrid.addrow(null, datarow[0]);
});
deleteButton.addEventListener('click', function() {
var selectedrowindex = myGrid.getselectedrowindex();
var rowscount = myGrid.getdatainformation().rowscount;
var id = myGrid.getrowid(selectedrowindex);
myGrid.deleterow(id);
});
reloadButton.addEventListener('click', function() {
myGrid.source = getAdapter();
});
searchButton.addEventListener('click', function() {
myWindow.open();
myWindow.move(60, 60);
});
};
myGrid.settings = {
width: 850,
source: getAdapter(),
showtoolbar: true,
rendertoolbar: toolbar,
columns: [
{ text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 120 },
{ text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 120 },
{ text: 'Product', datafield: 'productname', width: 170 },
{ text: 'In Stock', datafield: 'available', columntype: 'checkbox', width: 125 },
{ text: 'Quantity', datafield: 'quantity', width: 85, cellsalign: 'right', cellsformat: 'n2' },
{ text: 'Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2' }
]
};
document.querySelector('.grid-container').appendChild(myGrid);
myWindowButtons[1].addEventListener('click', function() {
myGrid.clearfilters();
});
myWindowButtons[0].addEventListener('click', function() {
myGrid.clearfilters();
var searchColumnIndex = myWindowDropDownList.getSelectedIndex();
var datafield = '';
switch (searchColumnIndex) {
case 0:
datafield = 'firstname';
break;
case 1:
datafield = 'lastname';
break;
case 2:
datafield = 'productname';
break;
case 3:
datafield = 'quantity';
break;
case 4:
datafield = 'price';
break;
}
var searchText = myWindowInput.value;
var filtergroup = new jqx.filter();
var filter_or_operator = 1;
var filtervalue = searchText;
var filtercondition = 'contains';
var filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
filtergroup.addfilter(filter_or_operator, filter);
myGrid.addfilter(datafield, filtergroup);
myGrid.applyfilters();
});
};
</script>
</head>
<body>
<div class="example-description">
In this sample is demonstrated how to display tool bar in Custom element Grid.
</div>
<div class="grid-container"></div>
<jqx-window settings="windowSettings">
<div>Find Record</div>
<div style="overflow: hidden;">
<div>Find what:</div>
<div style='margin-top:5px;'>
<input id='inputField' type="text" class="jqx-input" style="width: 190px; height: 23px;" />
</div>
<div style="margin-top: 7px; clear: both;">Look in:</div>
<div style='margin-top:5px;'>
<jqx-drop-down-list settings="dropDownListSettings"></jqx-drop-down-list>
</div>
<div>
<div style="margin-top: 15px; margin-left: 40px; float: left">
<jqx-button>Find</jqx-button>
</div>
<div style="margin-top: 15px; margin-left: 5px; float: left">
<jqx-button>Clear</jqx-button>
</div>
</div>
</div>
</jqx-window>
</body>
</html>