jQuery UI Widgets › Forums › Grid › change search engine position
Tagged: change search engine position
This topic contains 5 replies, has 3 voices, and was last updated by pepe 9 months, 2 weeks ago.
-
Author
-
Hi pepe,
Could you explain which exactly, because the Grid has several different modes for seach and filter?
Looking forward to your reply.
Regards,
PeterjQWidgets team
https://www.jqwidgets.com/Good afternoon Peter, I attach the example code.
All the best.<!DOCTYPE html>
<html lang=”en”>
<head>
<title id=’Description’>In this sample is demonstrated how to filter through all records in the Grid.</title>
<meta name=”description” content=”JavaScript Grid which has multiple built-in aggregates” />
<link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.base.css” type=”text/css” />
<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″ />
<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/jqxgrid.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.edit.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.filter.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.sort.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.selection.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.aggregates.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”../../scripts/demos.js”></script>
<script type=”text/javascript” src=”generatedata.js”></script>
<script type=”text/javascript”>
window.onload = function() {
// prepare the data
var data = generatedata( 200 );
var source =
{
localdata: data,
datatype: “array”,
datafields:
[
{ name: ‘firstname’, type: ‘string’ },
{ name: ‘lastname’, type: ‘string’ },
{ name: ‘productname’, type: ‘string’ },
{ name: ‘available’, type: ‘bool’ },
{ name: ‘quantity’, type: ‘number’ },
{ name: ‘price’, type: ‘number’ }
],
updaterow: function ( rowid, rowdata ) {
// synchronize with the server – send update command
}
};
var dataAdapter = new jqx.dataAdapter( source );
// initialize jqxGrid
var grid = new jqxGrid( “#grid”,
{
width: ‘100%’,
source: dataAdapter,
filterable: true,
sortable: true,
showfilterbar: true,
columns: [
{ text: ‘First Name’, columntype: ‘textbox’, datafield: ‘firstname’, width: 170 },
{ text: ‘Last Name’, datafield: ‘lastname’, columntype: ‘textbox’, width: 170 },
{
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’
} ]
} );
var grid2 = new jqxGrid( “#grid2″,
{
width: ‘100%’,
source: dataAdapter,
filterable: true,
sortable: true,
filterbarmode: ‘simple’,
showfilterbar: true,
columns: [
{ text: ‘First Name’, columntype: ‘textbox’, datafield: ‘firstname’, width: 170 },
{ text: ‘Last Name’, datafield: ‘lastname’, columntype: ‘textbox’, width: 170 },
{
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’
} ]
} );
};
</script>
<script async src=”https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT”></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag(‘js’, new Date());gtag(‘config’, ‘G-2FX5PV9DNT’);</script></head>
<body class=’default’>
<h3>Grid with Search Input and Filter By List</h3>
<div id=”grid”></div>
<br />
<h3>Grid with Search Input</h3>
<div id=”grid2″></div>
</body>
</html>Hi pepe,
If I understood correctly, you want the elements in the same order, but moved to the right side of the toolbar?
If this is the case, you can use the CSS below:
.jqx-grid-toolbar{
display: flex;
justify-content: end;
}Best Regards,
Ivan Peevski
jQWidgets Team
https://www.jqwidgets.com/Good afternoon Ivan, the example does exactly what I wanted.
Thank you so much
Good evening, how could I add a button to the left of the search engine.
Thank you
-
AuthorPosts
You must be logged in to reply to this topic.