Help Request: Filtering

[bradybray]

Hello;

I enabled filtering with 'filtering: true,' on my grid. But whenever I input a value into the filtering area and press the enter key nothing happens.

My grid data is fetched using JSON, not the usual DB object passed into the grid demos. Does filtering require an additional function to perform the filtering of row objects?

Here is my grid

function newGrid(model, table) {
	$("#rules").jsGrid({
		height:"auto",
		width: "100%",
		editing: true,
		inserting: true,

		filtering: true,
		sorting: true,
		paging: false,
		autoload: true,

		deleteConfirm: function(item) {
			return "You're deleting X rule. Are you sure?"
		},

		rowClick: function(args) {
				showDetailsDialog("Edit", args.item);
		},

		controller: {
			loadData: function(item) {
				var d = $.Deferred();

				$.ajax({
					type: "GET",
					url: "http://localhost:8000/rules/BCAAPI/"+model+"/"+table+"/",
					}).done(function(response) {
						console.log("done");
						d.resolve($.map(response, function(item) {
							return $.extend(item.fields, { id: item.id,
							model: item.model,
							table: item.table,
							source_ip: item.source_ip,
							destination_ip: item.destination_ip,
							protocol: item.protocol,
							source_port_lo: item.source_port_lo,
							source_port_hi: item.source_port_hi,
							destination_port_lo: item.destination_port_lo,
							destination_port_hi: item.destination_port_hi,
							Pcapfile: item.Pcapfile,
							origin: item.origin,
							created: item.created,
							last_edited: item.last_edited,
							owner: item.owner,
							tailnumber: item.tailnumber,
							feature: item.feature,
							comments: item.comments
							});
						}));
					}).fail(function() {
						console.log("fail");
						d.reject();
					});

				return d.promise();
			},

			updateItem: function(item) {
				return $.ajax({
					type: "POST",
					url: "http://localhost:8000/rules/BCAAPI/"+model+"/"+table+"/",
					data: $.extend(item.fields, { id: item.id,
							model: item.model,
							table: item.table,
							source_ip: item.source_ip,
							destination_ip: item.destination_ip,
							protocol: item.protocol,
							source_port_lo: item.source_port_lo,
							source_port_hi: item.source_port_hi,
							destination_port_lo: item.destination_port_lo,
							destination_port_hi: item.destination_port_hi,
							Pcapfile: item.Pcapfile,
							origin: item.origin,
							created: item.created,
							last_edited: item.last_edited,
							owner: item.owner,
							tailnumber: item.tailnumber,
							feature: item.feature,
							comments: item.comments})
				});
			},

			deleteItem: function(item) {
				return $.ajax({
					type: "DELETE",
					url: "http://localhost:8000/rules/BCAAPI/"+model+"/"+table+"/" + item.id + "/",
					data: $.extend(item.fields, { id: item.id,
							model: item.model,
							table: item.table,
							source_ip: item.source_ip,
							destination_ip: item.destination_ip,
							protocol: item.protocol,
							source_port_lo: item.source_port_lo,
							source_port_hi: item.source_port_hi,
							destination_port_lo: item.destination_port_lo,
							destination_port_hi: item.destination_port_hi,
							Pcapfile: item.Pcapfile,
							origin: item.origin,
							created: item.created,
							last_edited: item.last_edited,
							owner: item.owner,
							tailnumber: item.tailnumber,
							feature: item.feature,
							comments: item.comments})
				});
			}
		},
		fields: [
			{ name: "source_ip", type: "textarea", align: "center", width: 150, validate:
				function(value, item) {
					return /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(value)
				}
			},
			{ name: "destination_ip", type: "textarea", align: "center",width: 150, validate:
				function(value, item) {
					return /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(value)
				}
			},
			{ name: "protocol", type: "textarea", align:"center",width: 75, validate: 
				function(value, item) {
					return /UDP{1}|TCP{1}/.test(value)
				}
			},
			{ name: "source_port_lo", type: "number", align:"center",width: 200, validate: {
					validator: "range",
					message: function(value, item) {
						return value + " is not a valid source port";
					},
					param: [1, 65535]
				}
			},
			{ name: "source_port_hi", type: "number", align:"center",width: 200, validate: {
					validator: "range",
					message: function(value, item) {
						return value + " is not a valid source port";
					},
					param: [1, 65535]
				}
			},
			{ name: "destination_port_lo", type: "number", align:"center",width: 200, validate: {
					validator: "range",
					message: function(value, item) {
						return value + " is not a valid destination port";
					},
					param: [1, 65535]
				}
			},
			{ name: "destination_port_hi", type: "number", align:"center",width: 200, validate: {
					validator: "range",
					message: function(value, item) {
						return value + " is not a valid destination port";
					},
					param: [1, 65535]
				}
			},
			{ name: "Pcapfile", type: "textarea", width:300, readOnly:true, visible:false},
			{ name: "origin", type: "textarea",width:100, readOnly:true, visible:false},
			{ name: "created", type: "textarea", width:400, readOnly:true, visible:false},
			{ name: "last_edited", type: "textarea",width:400, readOnly:true, visible:false},
			{ name: "owner", type: "textarea",width:100, readOnly:true, visible:false},
			{ name: "tailnumber", type: "textarea",width:125, validate: {
				validator: "required",
				message: "Column cannot be empty.",
				},visible:false
			},
			{ name: "feature", type: "textarea",width:100, validate: {
				validator: "required",
				message: "Column cannot be empty.",
				},visible:false
			},
			{ name: "comments", type: "textarea",width:225, validate: {
				validator: "required",
				message: "Column cannot be empty.",
				},visible:false
			},
			{ type: "copycontrol" },
			{ type: "control" }
		]
	});

	$("#detailsDialog").dialog({
		autoOpen: false,
		width: 400,
		close: function() {
			$("#detailsForm").validate().resetForm();
			$("#detailsForm").find(".error").removeClass("error");
		}
	});

	var pattern = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/


	var proto_pattern = /UDP{1}|TCP{1}/
	$("#detailsForm").validate({
		rules: {
			source_ip: {required: true, format: pattern},
			destination_ip: {required: true, format: pattern},
			protocol: {required: true, format: proto_pattern},
			source_port_lo: {required: true, range: [1, 65535]},
			source_port_hi: {required: true, range: [1, 65535]},
			destination_port_lo: {required: true, range: [1, 65535]},
			destination_port_hi: {required: true, range: [1, 65535]},
			Pcapfile: "required",
			origin: "required",
			created: "required",
			last_edited: "required",
			owner: "required",
			tailnumber: "required",
			feature: "required",
			comments: "required"
		},
		messages: {
			source_ip: "Please Provide an IP address",
			destination_ip: "Please Provide an IP address",
			protocol: "Please provide a protocol",
			source_port_lo: "Invalid port(s)",
			source_port_hi: "Invalid port(s)",
			destination_port_lo: "Invalid port(s)",
			destination_port_hi: "Invalid port(s)",
			Pcapfile: "Please provide a PCAP filename",
			origin: "Please provide an origin",
			created: "Please provide a created date",
			last_edited: "Please provide a last edited date",
			owner: "Please provide an owner",
			tailnumber: "Please provide a Boeing tailnumber",
			feature: "Please provide a feature set",
			comments: "Please provide any comments"
		},
		submitHandler: function() {
			formSubmitHandler();
		}
	});

	var formSubmitHandler = $.noop;

	var showDetailsDialog = function(dialogType, item) {
		$("#source_ip").val(item.source_ip);
		$("#dest_ip").val(item.destination_ip);
		$("#protocol").val(item.protocol);
		$("#source_port_lo").val(item.source_port_lo);
		$("#source_port_hi").val(item.source_port_hi);
		$("#dest_port_lo").val(item.destination_port_lo);
		$("#dest_port_hi").val(item.destination_port_hi);
		$("#pcapfile").val(item.Pcapfile);
		$("#origin").val(item.origin);
		$("#created").val(item.created);
		$("#last_edited").val(item.last_edited);
		$("#owner").val(item.owner);
		$("#tailnumber").val(item.tailnumber);
		$("#feature").val(item.feature);
		$("#comments").val(item.comments);

		formSubmitHandler = function() {
			saveRule(item, dialogType === "Add");
		};

		$("#detailsDialog").dialog("option", "title", dialogType + " Client")
		.dialog("open");
	};

	var saveRule = function(item, isNew) {
		$.extend(item, {
			source_ip : $("#source_ip").val(),
			dest_ip : $("#dest_ip").val(),
			protocol: $("#protocol").val(),
			source_port_lo : $("#source_port_lo").val(),
			source_port_hi: $("#source_port_hi").val(),
			dest_port_lo : $("#dest_port_lo").val(),
			dest_port_hi : $("#dest_port_hi").val(),
			pcapfile: $("#pcapfile").val(),
			origin: $("#origin").val(),
			created: $("#created").val(),
			last_edited: $("#last_edited").val(),
			owner: $("#owner").val(),
			tailnumber: $("#tailnumber").val(),
			feature: $("#feature").val(),
			comments: $("#comments").val()
		});

		$("#rules").jsGrid(isNew ? "insertItem" : "updateItem", item);

		$("#detailsDialog").dialog("close");
	};			
}

[bradybray]

#32

I found this old post that explains the problem. How does one receive messages that a filter is being applied to a grid?

[tabalinas]

Once filter is applied the loadData of the controller will be invoked, that's where filtering logic should be implemented - on client or/and server side.

The invoke filtering you need to call search() method of the grid. That's exactly what control field does.