jQWidgets Forums

jQuery UI Widgets › Forums › Grid › Filter -and- Edit Data

Tagged: ,

This topic contains 4 replies, has 2 voices, and was last updated by  akshayyes 11 years, 6 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Filter -and- Edit Data Posts
  • January 10, 2014 at 11:08 am Filter -and- Edit Data #47678

    akshayyes
    Participant

    1. Filter & Show Data – code working successfully on one page (data.php)

    2. Update/Edit and Show Data – code working successfully on one page (data.php)

    3. On combining – Update/Edit, Filter & Show Data on one page (data.php) – code NOT working on one page (data.php)

    > Filter/Search command is executed successfully
    >> But. update/edit is NOT WORKING

    `<!DOCTYPE html>
    <html lang=”en”>
    <head>
    <link rel=”stylesheet” href=”../jqwidgets/styles/jqx.base.css” type=”text/css” />
    <link rel=”stylesheet” href=”../jqwidgets/styles/jqx.classic.css” type=”text/css” />
    <script type=”text/javascript” src=”../scripts/jquery-1.10.2.min.js”></script>
    <script type=”text/javascript” src=”../jqwidgets/jqxcore.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/jqxcheckbox.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.js”></script>
    <script type=”text/javascript” src=”../jqwidgets/jqxdata.js”></script>
    <script type=”text/javascript” src=”../jqwidgets/jqxgrid.selection.js”></script>
    <script type=”text/javascript” src=”../jqwidgets/jqxgrid.edit.js”></script>
    <script type=”text/javascript” src=”../jqwidgets/jqxgrid.pager.js”></script>
    <script type=”text/javascript” src=”../jqwidgets/jqxgrid.filter.js”></script>
    <script type=”text/javascript” src=”../jqwidgets/jqxgrid.selection.js”></script>
    <script type=”text/javascript” src=”../jqwidgets/jqxinput.js”></script>
    <script type=”text/javascript” src=”../jqwidgets/jqxwindow.js”></script>
    <script type=”text/javascript”>
    $(document).ready(function () {
    // prepare the data
    var data = {};
    var theme = ‘classic’;
    var source =
    {
    datatype: “json”,
    datafields: [
    { name: ‘id’ },
    { name: ‘name’ },
    { name: ‘age’ }
    ],
    id: ‘id’,
    url: ‘data.php’,
    filter: function()
    {
    // update the grid and send a request to the server.
    $(“#jqxgrid”).jqxGrid(‘updatebounddata’, ‘filter’);
    },
    updaterow: function (rowid, rowdata, commit) {
    //alert(rowid);
    // synchronize with the server – send update command

    //alert(data);
    $.ajax({
    dataType: ‘json’,
    url: ‘data.php’,
    data: data,
    success: function (data, status, xhr) {
    // update command is executed.
    commit(true);
    },
    error: function () {
    // cancel changes.
    commit(false);
    }
    });
    }
    };
    // initialize the input fields.
    $(“#name”).jqxInput({ theme: theme });
    $(“#age”).jqxInput({ theme: theme });
    $(“#jqxCheckBox2”).jqxCheckBox({ theme: theme });

    var dataAdapter = new $.jqx.dataAdapter(source);
    var editrow = -1;

    // initialize jqxGrid
    $(“#jqxgrid”).jqxGrid(
    {
    width: 1200,
    height: 350,
    selectionmode: ‘singlerow’,
    source: source,
    showfilterrow: true,
    // virtualmode: true,
    filterable: true,
    theme: theme,
    editable: true,
    columns:
    [
    { text: ‘Edit’, datafield: ‘Edit’, columntype: ‘button’, cellsrenderer: function () {
    return “Edit”;
    }, buttonclick: function (row) {
    // open the popup window when the user clicks a button.
    editrow = row;
    var offset = $(“#jqxgrid”).offset();
    $(“#popupWindow”).jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60 } });
    // get the clicked row’s data and initialize the input fields.
    var dataRecord = $(“#jqxgrid”).jqxGrid(‘getrowdata’, editrow);
    //alert(getrowdata);
    $(“#brand”).val(dataRecord.brand);
    $(“#part_no”).val(dataRecord.part_no);
    $(“#size”).val(dataRecord.size);
    $(“#name”).val(dataRecord.outline_dimension);
    $(“#jqxCheckBox2”).val(dataRecord.age);

    // show the popup window.
    $(“#popupWindow”).jqxWindow(‘show’);
    }
    },
    { text: ‘OutlineDimension’, datafield: ‘outline_dimension’, width: 140 },
    { text: ‘production_status’, datafield: ‘production_status’, width: 140,columntype: ‘checkbox’},
    }

    ]
    });
    // initialize the popup window and buttons.
    $(“#popupWindow”).jqxWindow({
    width: 450, resizable: false, isModal: true, autoOpen: false, cancelButton: $(“#Cancel”), modalOpacity: 0.01
    });
    $(“#popupWindow”).on(‘open’, function () {
    $(“#name”).jqxInput(‘selectAll’);
    });

    $(“#Cancel”).jqxButton({ theme: theme });
    $(“#Save”).jqxButton({ theme: theme });
    // update the edited row when the user clicks the ‘Save’ button.
    $(“#Save”).click(function () {
    if (editrow >= 0) {

    var row = { name: $(“#name”).val(), age: $(“#age”).val()
    };
    //alert(row.brand);
    var rowID = $(‘#jqxgrid’).jqxGrid(‘getrowid’, editrow);
    //alert(rowID);
    $(‘#jqxgrid’).jqxGrid(‘updaterow’, rowID, row);
    $(“#popupWindow”).jqxWindow(‘hide’);
    }
    });
    });

    });
    </script>
    </head>
    <body class=’default’>
    <div id=’jqxWidget’>
    <div id=”jqxgrid”></div>
    <div style=”margin-top: 30px;”>
    <div id=”cellbegineditevent”></div>
    <div style=”margin-top: 10px;” id=”cellendeditevent”></div>
    </div>
    <div id=”popupWindow”>
    <div>Edit</div>
    <div style=”overflow: hidden;”>
    <table>

    <tr>
    <td align=”right”>name:</td>
    <td align=”left”><input id=”name” /></td>
    </tr>
    <tr>
    <td align=”right”>age:</td>
    <td align=”left”><input id=”age” /></td>
    </tr>

    <tr>
    <td align=”right”></td>
    <td style=”padding-top: 10px;” align=”right”><input style=”margin-right: 5px;” type=”button” id=”Save” value=”Save” /><input id=”Cancel” type=”button” value=”Cancel” /></td>
    </tr>
    </table>
    </div>
    </div>
    </div>
    </body>
    </html>

    January 10, 2014 at 11:27 am Filter -and- Edit Data #47680

    Peter Stoev
    Keymaster

    Hi akshayyes,

    The Ajax call in the provided code does not make any updates – the data variable points to an Empty Object which is incorrect. For doing CRUD, please refer to the PHP Integration help topics in the documentation or take a look at the “phpdemos” included in the download package.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    January 10, 2014 at 12:00 pm Filter -and- Edit Data #47682

    akshayyes
    Participant

    I have myself removed the UPDATE command in the above post.

    Now, I am using your code to run a test. It is run successfully when used as it is.
    http://www.jqwidgets.com/jquery-widgets-documentation/documentation/phpintegration/php-server-side-grid-crud.htm

    When I added the FILTER command in your file (data.php), Then your code stops working.
    I also added – Filter.js – in index.html file.
    jqxGrid – Filterable Properties – is set TRUE.

    Please inform to me what is wrong with what I am doing ??

    —— FILTER CODE —–

    else if (isset($_GET['filterscount']))
	{
		$filterscount = $_GET['filterscount'];
		
		if ($filterscount > 0)
		{
			$where = " WHERE (";
			$tmpdatafield = "";
			$tmpfilteroperator = "";
			for ($i=0; $i < $filterscount; $i++)
		    {
				// get the filter's value.
				$filtervalue = $_GET["filtervalue" . $i];
				// get the filter's condition.
				$filtercondition = $_GET["filtercondition" . $i];
				// get the filter's column.
				$filterdatafield = $_GET["filterdatafield" . $i];
				// get the filter's operator.
				$filteroperator = $_GET["filteroperator" . $i];
				
				if ($tmpdatafield == "")
				{
					$tmpdatafield = $filterdatafield;			
				}
				else if ($tmpdatafield <> $filterdatafield)
				{
					$where .= ")AND(";
				}
				else if ($tmpdatafield == $filterdatafield)
				{
					if ($tmpfilteroperator == 0)
					{
						$where .= " AND ";
					}
					else $where .= " OR ";	
				}
				
				// build the "WHERE" clause depending on the filter's condition, value and datafield.
	        	switch($filtercondition)
				{
					case "NOT_EMPTY":
					case "NOT_NULL":
						$where .= " " . $filterdatafield . " NOT LIKE '" . "" ."'";
						break;
					case "EMPTY":
					case "NULL":
						$where .= " " . $filterdatafield . " LIKE '" . "" ."'";
						break;
					case "CONTAINS_CASE_SENSITIVE":
						$where .= " BINARY  " . $filterdatafield . " LIKE '%" . $filtervalue ."%'";
						break;
					case "CONTAINS":
						$where .= " " . $filterdatafield . " LIKE '%" . $filtervalue ."%'";
						break;
					case "DOES_NOT_CONTAIN_CASE_SENSITIVE":
						$where .= " BINARY " . $filterdatafield . " NOT LIKE '%" . $filtervalue ."%'";
						break;
					case "DOES_NOT_CONTAIN":
						$where .= " " . $filterdatafield . " NOT LIKE '%" . $filtervalue ."%'";
						break;
					case "EQUAL_CASE_SENSITIVE":
						$where .= " BINARY " . $filterdatafield . " = '" . $filtervalue ."'";
						break;
					case "EQUAL":
						$where .= " " . $filterdatafield . " = '" . $filtervalue ."'";
						break;
					case "NOT_EQUAL_CASE_SENSITIVE":
						$where .= " BINARY " . $filterdatafield . " <> '" . $filtervalue ."'";
						break;
					case "NOT_EQUAL":
						$where .= " " . $filterdatafield . " <> '" . $filtervalue ."'";
						break;
					case "GREATER_THAN":
						$where .= " " . $filterdatafield . " > '" . $filtervalue ."'";
						break;
					case "LESS_THAN":
						$where .= " " . $filterdatafield . " < '" . $filtervalue ."'";
						break;
					case "GREATER_THAN_OR_EQUAL":
						$where .= " " . $filterdatafield . " >= '" . $filtervalue ."'";
						break;
					case "LESS_THAN_OR_EQUAL":
						$where .= " " . $filterdatafield . " <= '" . $filtervalue ."'";
						break;
					case "STARTS_WITH_CASE_SENSITIVE":
						$where .= " BINARY " . $filterdatafield . " LIKE '" . $filtervalue ."%'";
						break;
					case "STARTS_WITH":
						$where .= " " . $filterdatafield . " LIKE '" . $filtervalue ."%'";
						break;
					case "ENDS_WITH_CASE_SENSITIVE":
						$where .= " BINARY " . $filterdatafield . " LIKE '%" . $filtervalue ."'";
						break;
					case "ENDS_WITH":
						$where .= " " . $filterdatafield . " LIKE '%" . $filtervalue ."'";
						break;
				}
								
				if ($i == $filterscount - 1)
				{
					$where .= ")";
				}
				
				$tmpfilteroperator = $filteroperator;
				$tmpdatafield = $filterdatafield;			
			}
			// build the query.
			$query = "SELECT * FROM employees" . $where;			
		}
	}
    January 10, 2014 at 1:42 pm Filter -and- Edit Data #47688

    akshayyes
    Participant

    How to ADD the – FILTER code – {http://www.jqwidgets.com/jquery-widgets-demo/demos/php/index.htm?%28arctic%29?%28arctic%29#demos/php/serverfiltering.htm} IN http://www.jqwidgets.com/jquery-widgets-documentation/documentation/phpintegration/php-server-side-grid-crud.htm

    January 10, 2014 at 4:15 pm Filter -and- Edit Data #47703

    akshayyes
    Participant

    Hello Peter,
    How to ADD – ServerFiltering – along with – http://www.jqwidgets.com/jquery-widgets-documentation/documentation/phpintegration/php-server-side-grid-crud.htm

    Please reply. Thanks

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.