DbNetSuite Sample

Example

Source

Menu

|

|

Run as

Filter columns provide a quick and easy way to filter the data by the values in a specified column. To turn on filtering for a column set the filter property to true. Filter columns can be applied either singly or in combination by setting the filterColumnMode to Simple, Combined or Composite. In addition the column property filterSelectionMode can be set to List or Input which allows the user to either select the filter value from a list of values ot to enter a wildcard value as free text. This sample also uses the onPageLoaded event to assign a default column filter value when the page loads.

Filter Type

Filter Selection Mode

Include the client JavaScript & CSS libraries

	<link rel="stylesheet" type="text/css" href="dbnetsuite.css.ashx" />
	<script language="JavaScript" src="dbnetsuite.js.ashx"></script>

Client-side configuration script

	<script>
	jQuery(document).ready( init )
	var dbnetgrid1
	//////////////////////////////////////////
	function init()
	//////////////////////////////////////////
	{
		dbnetgrid1 = new DbNetGrid("dbnetgrid1");
		with (dbnetgrid1)
		{
			connectionString = "SamplesDatabase"
			fromPart = "Orders"

			setColumnExpressions("CustomerID","EmployeeID","OrderDate","ShipVia","ShipCountry");
            setColumnProperty("CustomerID","label", "Customer");
            setColumnProperty("CustomerID","lookup", "select customerid, companyname from customers");
            setColumnProperty("CustomerID","filter", true);
            setColumnProperty("EmployeeID","label", "Employee");
            setColumnProperty("EmployeeID","lookup", "select employeeid, lastname from employees");
            setColumnProperty("EmployeeID","filter", true);
            setColumnProperty("OrderDate","filter", true);
            setColumnProperty("ShipCountry","filter", true);
            setColumnProperty("ShipVia","lookup", "select shipperid, companyname from shippers");
            setColumnProperty("ShipVia","filter", true);

			setFilterColumnMode()

			bind("onPageLoaded", setDefaultFilter )

			setFilterMode()
		}
	}

	var filterDefaultValue = "Speedy Express";
	var filterColumnName = "shipvia";

	//////////////////////////////////////////
	function setDefaultFilter(grid)
	//////////////////////////////////////////
	{	
		if (filterDefaultValue == "")
			return;

		var filter = grid.getColumnFilter(filterColumnName);

		filter.find("option:contains('" + filterDefaultValue + "')").attr("selected","true");
		filter.trigger("change");
		filterDefaultValue = ""
	}

	//////////////////////////////////////////
	function setFilterColumnMode()
	//////////////////////////////////////////
	{	
		with (dbnetgrid1)
		{
			filterColumnMode = document.getElementById("filterColumnMode").value;
		}	
	}

	//////////////////////////////////////////
	function setFilterMode()
	//////////////////////////////////////////
	{
		var filterMode = document.getElementById("filterMode").value;

		with (dbnetgrid1)
		{
			setColumnProperty("CustomerID","filterMode", filterMode);
			setColumnProperty("EmployeeID","filterMode", filterMode);
			setColumnProperty("OrderDate","filterMode", filterMode);
			setColumnProperty("ShipCountry","filterMode", filterMode);
			setColumnProperty("ShipVia","filterMode", filterMode);

			initialize();
		}	

	}
	</script>

HTML markup

	<table>
		<td>Filter&nbsp;Type</td>
		<td>
			<select id="filterColumnMode" onchange="setFilterColumnMode()">
				<option value="Simple">Simple</option>
				<option value="Combined">Combined</option>
				<option value="Composite">Composite</option>
			</select>
		</td>
		<td>Filter&nbsp;Selection&nbsp;Mode</td>
		<td>
			<select id="filterMode" onchange="setFilterMode()">
				<option value="List">List</option>
				<option value="Input">Input</option>
			</select>
		</td>
	</table>
	<div id="dbnetgrid1"></div>