jQuery UI Widgets Forums Grid customfiltering change Source

This topic contains 3 replies, has 2 voices, and was last updated by  Dimitar 8 years, 6 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • customfiltering change Source #78893

    ronaldlin
    Participant

    Hello,

    i like this example URL: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm?(arctic)#demos/jqxgrid/customfiltering.htm

    but how can i change the data source to php & mysql??

    I have tried to change the right of the Grid success, but the left has only a blank filter.

    customfiltering change Source #78909

    Dimitar
    Participant

    Hello ronaldlin,

    Please take a look at our PHP Integration section of the Documentation to learn how to bind widgets to a MySQL database using PHP.

    Best Regards,
    Dimitar

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

    customfiltering change Source #79089

    ronaldlin
    Participant

    Hi

    Thanks for Reply
    I successfully grid data into mysql
    But Column filter on the left is empty, how do I debug

    `<!DOCTYPE html>
    <html lang=”en”>
    <head>
    <title id=’Description’>This example illustrates how to create and apply a custom filter to jqxGrid.
    </title>
    <link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
    <script type=”text/javascript” src=”scripts/jquery-1.11.1.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/jqxlistbox.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxdropdownlist.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.filter.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxgrid.sort.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxgrid.selection.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxpanel.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”>
    $(document).ready(function () {

    var theme = ‘classic’;
    var source =
    {

    datatype: “json”,

    datafields: [
    { name: ‘rID’ ,type: ‘string’},
    { name: ‘rTYPE’ ,type: ‘string’},
    { name: ‘rMOD’ ,type: ‘number’},
    { name: ‘rINPUT’ ,type: ‘string’},
    { name: ‘rOUTPUT’ ,type: ‘string’},
    { name: ‘rAXIS’ ,type: ‘string’},
    { name: ‘rINSP’ ,type: ‘number’},
    { name: ‘rOUTSP’ ,type: ‘string’},
    { name: ‘rMAXOUT’ ,type: ‘number’},
    { name: ‘rOHL’ ,type: ‘number’},
    { name: ‘rRATIO’ ,type: ‘string’},
    { name: ‘rINSHAFY’ ,type: ‘string’},
    { name: ‘rMAXIN’ ,type: ‘number’},
    { name: ‘rPIC’ ,type: ‘string’}
    ],
    cache: false,
    url: ‘data.php’,
    sort: function () {
    // update the grid and send a request to the server.
    $(“#jqxgrid”).jqxGrid(‘updatebounddata’, ‘sort’);
    }
    };
    var dataAdapter = new $.jqx.dataAdapter(source);

    // create grid.
    $(“#jqxgrid”).jqxGrid(
    {
    width: 600,
    source: dataAdapter,
    filterable: false,
    sortable: true,
    autoshowfiltericon: false,
    columns: [
    { text: ‘rID’, datafield: ‘rID’, width: 100 },
    { text: ‘rTYPE’, datafield: ‘rTYPE’, width: 100 },
    { text: ‘rMOD’, datafield: ‘rMOD’, width: 180 },
    { text: ‘rINPUT’, datafield: ‘rINPUT’, width: 100, },
    { text: ‘rOUTPUT’, datafield: ‘rOUTPUT’, width: 80, },
    { text: ‘rAXIS’, datafield: ‘rAXIS’, width: 100, },
    { text: ‘rINSP’, datafield: ‘rINSP’, width: 100, },
    { text: ‘rOUTSP’, datafield: ‘rOUTSP’, width: 100, },
    { text: ‘rMAXOUT’, datafield: ‘rMAXOUT’, width: 100, },
    { text: ‘rOHL’, datafield: ‘rOHL’, width: 100, },
    { text: ‘rRATIO’, datafield: ‘rRATIO’, width: 100, },
    { text: ‘rINSHAFY’, datafield: ‘rINSHAFY’, width: 100, },
    { text: ‘rMAXIN’, datafield: ‘rMAXIN’, width: 100, },
    { text: ‘rPIC’, datafield: ‘rPIC’, width: 100, }
    ]
    });

    // create buttons, listbox and the columns chooser dropdownlist.
    $(“#applyfilter”).jqxButton({ theme: theme });
    $(“#clearfilter”).jqxButton({ theme: theme });
    $(“#filterbox”).jqxListBox({ checkboxes: true, width: 200, height: 300 });
    $(“#columnchooser”).jqxDropDownList({ autoDropDownHeight: true, selectedIndex: 0, width: 200, height: 25,
    source: [{ label: ‘rID’, value: ‘rID’ },
    { label: ‘rTYPE’, value: ‘rTYPE’ },
    { label: ‘rMOD’, value: ‘rMOD’ },
    { label: ‘rINPUT’, value: ‘rINPUT’ },
    { label: ‘rOUTPUT’, value: ‘rOUTPUT’ },
    { label: ‘rAXIS’, value: ‘rAXIS’ },
    { label: ‘rINSP’, value: ‘rINSP’ },
    { label: ‘rOUTSP’, value: ‘rOUTSP’ },
    { label: ‘rMAXOUT’, value: ‘rMAXOUT’ },
    { label: ‘rOHL’, value: ‘rOHL’ },
    { label: ‘rRATIO’, value: ‘rRATIO’ },
    { label: ‘rINSHAFY’, value: ‘rINSHAFY’ },
    { label: ‘rMAXIN’, value: ‘rMAXIN’ },
    { label: ‘rPIC’, value: ‘rPIC’ }

    ]
    });

    // updates the listbox with unique records depending on the selected column.
    var updateFilterBox = function (datafield) {
    var filterBoxAdapter = new $.jqx.dataAdapter(source,
    {
    uniqueDataFields: [datafield],
    autoBind: true
    });
    var uniqueRecords = filterBoxAdapter.records;
    uniqueRecords.splice(1, 1, ‘(Select All)’);
    $(“#filterbox”).jqxListBox({ source: uniqueRecords, displayMember: datafield });
    $(“#filterbox”).jqxListBox(‘checkAll’);
    }

    updateFilterBox(‘rID’);

    // handle select all item.
    var handleCheckChange = true;
    $(“#filterbox”).on(‘checkChange’, function (event) {
    if (!handleCheckChange)
    return;

    if (event.args.label != ‘(Select All)’) {
    handleCheckChange = false;
    $(“#filterbox”).jqxListBox(‘checkIndex’, 0);
    var checkedItems = $(“#filterbox”).jqxListBox(‘getCheckedItems’);
    var items = $(“#filterbox”).jqxListBox(‘getItems’);

    if (checkedItems.length == 1) {
    $(“#filterbox”).jqxListBox(‘uncheckIndex’, 0);
    }
    else if (items.length != checkedItems.length) {
    $(“#filterbox”).jqxListBox(‘indeterminateIndex’, 0);
    }
    handleCheckChange = true;
    }
    else {
    handleCheckChange = false;
    if (event.args.checked) {
    $(“#filterbox”).jqxListBox(‘checkAll’);
    }
    else {
    $(“#filterbox”).jqxListBox(‘uncheckAll’);
    }

    handleCheckChange = true;
    }
    });

    // handle columns selection.
    $(“#columnchooser”).on(‘select’, function (event) {
    updateFilterBox(event.args.item.value);
    });

    // builds and applies the filter.
    var applyFilter = function (datafield) {
    $(“#jqxgrid”).jqxGrid(‘clearfilters’);
    var filtertype = ‘stringfilter’;
    if (datafield == ‘date’) filtertype = ‘datefilter’;
    if (datafield == ‘price’ || datafield == ‘quantity’) filtertype = ‘numericfilter’;

    var filtergroup = new $.jqx.filter();
    var checkedItems = $(“#filterbox”).jqxListBox(‘getCheckedItems’);
    if (checkedItems.length == 0) {
    var filter_or_operator = 1;
    var filtervalue = “Empty”;
    var filtercondition = ‘equal’;
    var filter = filtergroup.createfilter(filtertype, filtervalue, filtercondition);
    filtergroup.addfilter(filter_or_operator, filter);
    }
    else {
    for (var i = 0; i < checkedItems.length; i++) {
    var filter_or_operator = 1;
    var filtervalue = checkedItems[i].label;
    var filtercondition = ‘equal’;
    var filter = filtergroup.createfilter(filtertype, filtervalue, filtercondition);
    filtergroup.addfilter(filter_or_operator, filter);
    }
    }

    // add the filters.
    $(“#jqxgrid”).jqxGrid(‘addfilter’, datafield, filtergroup);
    // apply the filters.
    $(“#jqxgrid”).jqxGrid(‘applyfilters’);
    }

    // clears the filter.
    $(“#clearfilter”).click(function () {
    $(“#jqxgrid”).jqxGrid(‘clearfilters’);
    });

    // applies the filter.
    $(“#applyfilter”).click(function () {
    var dataField = $(“#columnchooser”).jqxDropDownList(‘getSelectedItem’).value;
    applyFilter(dataField);
    });
    });
    </script>
    </head>
    <body class=’default’>
    <div id=’jqxWidget’ style=”font-size: 13px; font-family: Verdana; float: left;”>
    <div style=”float: left”>
    <div>Choose Column:</div>
    <div id=”columnchooser”></div>
    <div style=”margin-top: 10px;” id=”filterbox”></div>
    <div style=”margin-top: 10px;”>
    <input type=”button” id=”applyfilter” value=”Apply Filter” />
    <input type=”button” id=”clearfilter” value=”Clear Filter” />
    </div>
    </div>
    <div style=”margin-left: 20px; float: left” id=”jqxgrid”>
    </div>
    </div>
    </body>
    </html>

    • This reply was modified 8 years, 6 months ago by  ronaldlin.
    • This reply was modified 8 years, 6 months ago by  ronaldlin.
    customfiltering change Source #79097

    Dimitar
    Participant

    Hi ronaldlin,

    You can check your browser’s console for any errors that might point you in the right direction. You can also debug in the browser’s developer tools. This tutorial shows how to debug in Chrome: https://developer.chrome.com/devtools/docs/javascript-debugging and this one – https://msdn.microsoft.com/en-us/library/y740d9d3.aspx – in Visual Studio.

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.