jQuery UI Widgets Forums Grid change search engine position

This topic contains 5 replies, has 3 voices, and was last updated by  pepe 1 month, 1 week ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • change search engine position #134564

    pepe
    Participant

    Good evening, I am trying to put the combobox with the fields and the input with the search button on the right, but in the following order from right to left.
    1.- the search button
    2.- the imput
    3.- the combox with the fields.

    thank you

    change search engine position #134578

    admin
    Keymaster

    Hi pepe,

    Could you explain which exactly, because the Grid has several different modes for seach and filter?

    Looking forward to your reply.

    Regards,
    Peter

    jQWidgets team
    https://www.jqwidgets.com/

    change search engine position #134583

    pepe
    Participant

    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>

    change search engine position #134592

    ivanpeevski
    Participant

    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/

    • This reply was modified 2 months ago by  ivanpeevski.
    change search engine position #134598

    pepe
    Participant

    Good afternoon Ivan, the example does exactly what I wanted.

    Thank you so much

    change search engine position #134689

    pepe
    Participant

    Good evening, how could I add a button to the left of the search engine.

    Thank you

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.