Filtering from one to another grid into a mapped datafield

[HSE_MLangParticipant]

Hello,

I’m doing my first steps with jqWidgets and let me say im fascinated about that, what can be done with. But now i have some trouble with filtering from one grid to another.

I have a source grid, that reacts on rowclick with applaying a filter to a second grid (like a wizard). The second grid has the ID within a child object (see screen).

If i click on a row that targets CompanyID 1 i get no rows displayed in the second grid, but there must be a row because i have min. 1 row for this ID.

Could someone help me with this pls ?

Greetings

M. Lang

First grid (source)

	$(document).ready(function () {
		var srcgdv_Companies = {
			datatype: 'json',
			datafields: [
				{
					name: 'ID',
					
					type: 'int'
				},
				{
					name: 'ShortName',
					
					type: 'string'
				},
				{
					name: 'Name',
					
					type: 'string'
				},
				{
					name: 'Address',
					
					type: 'string'
				},
				{
					name: 'Postcode',
					
					type: 'string'
				},
				{
					name: 'City',
					
					type: 'string'
				},
				{
					name: 'Country',
					
					type: 'string'
				},
				{
					name: 'Phone',
					
					type: 'string'
				},
				{
					name: 'Fax',
					
					type: 'string'
				},
				{
					name: 'Website',
					
					type: 'string'
				}],
			url: '/_vti_bin/MedSurvCRMServices/MSServices.svc/GetCompanies'
		};
						
		var dagdv_Companies = new $.jqx.dataAdapter(srcgdv_Companies, {
			formatData: function (data) {
				$.extend(data, {
					featureClass: 'P', 
					style: 'full', 
					maxRows: 50, 
					username: 'jqwidgets' 
				});
				return data;
			}
		});
						
		$('#gdv_Companies').jqxGrid({
			theme: 'metro', 
			width: 300, 
			height: 350,
			source: srcgdv_Companies, 
			columnsresize: false, 
			sortable: false,
			columns: [
			{
				text: 'ID',
				datafield: 'ID',
				hidden: true,
				width: 0
			},
			{
				text: 'Kurzname',
				datafield: 'ShortName',
				hidden: false,
				width: 300
			},
			{
				text: 'Name',
				datafield: 'Name',
				hidden: true,
				width: 0
			},
			{
				text: 'Address',
				datafield: 'Address',
				hidden: true,
				width: 0
			},
			{
				text: 'Postcode',
				datafield: 'Postcode',
				hidden: true,
				width: 0
			},
			{
				text: 'City',
				datafield: 'City',
				hidden: true,
				width: 0
			},
			{
				text: 'Country',
				datafield: 'Country',
				hidden: true,
				width: 0
			},
			{
				text: 'Phone',
				datafield: 'Phone',
				hidden: true,
				width: 0
			},
			{
				text: 'Fax',
				datafield: 'Fax',
				hidden: true,
				width: 0
			},
			{
				text: 'Website',
				datafield: 'Website',
				hidden: true,
				width: 0
			}] 
		});
						
		$('#gdv_Companies').on('rowclick', function (event) {
			var args = event.args;
			var row = args.rowindex;
			var data = $('#gdv_Companies').jqxGrid('getrowdata', row);
			console.log(data);
			var filtergroup = new $.jqx.filter();
			var filter_or_operator = 1;
			var filtervalue = data.ID;
			var filtercondition = 'EQUAL';
			var filter1 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);

			filtergroup.addfilter(filter_or_operator, filter1);

			// add the filters.
			$('#gdv_Projects').jqxGrid('addfilter', 'CompanyID', filtergroup);
			$('#gdv_Contacts').jqxGrid('addfilter', 'CompanyID', filtergroup);
			$('#gdv_Tasks').jqxGrid('addfilter', 'CompanyID', filtergroup);
			// apply the filters.
			$('#gdv_Projects').jqxGrid('applyfilters');
			$('#gdv_Contacts').jqxGrid('applyfilters');
			$('#gdv_Tasks').jqxGrid('applyfilters');

			$('#sb_Details').html(
				'<div style="padding: 15px 15px 0px 15px;"><b>' + data.Name + '</b><br />' + 
				data.Address + '<br />' + 
				data.Postcode + ' ' + 
				data.City + '<br />' + 
				data.Country + '<br /><br />' + 
				data.Phone + '<br />' + 
				data.Fax + '<br />' + 
				data.Website + '<br /></div>' 
			);
		});
	});

Second Grid (Target) with filtering

	$(document).ready(function () {
		var srcgdv_Projects = {
			datatype: 'json',
			datafields: [
				{
					name: 'ID',
					
					type: 'int'
				},
				{
					name: 'ProjectName',
					
					type: 'string'
				},
				{
					name: 'CompanyID',
					map: 'Company>ID', 
					type: 'int'
				}],
			url: '/_vti_bin/MedSurvCRMServices/MSServices.svc/GetProjects'
		};
					
		var dagdv_Projects = new $.jqx.dataAdapter(srcgdv_Projects, {
			formatData: function (data) {
				$.extend(data, {
					featureClass: 'P', 
					style: 'full', 
					maxRows: 50, 
					username: 'jqwidgets' 
				});
				return data;
			}
		});
					
		$('#gdv_Projects').jqxGrid({
			theme: 'metro', 
			width: 300, 
			height: 350,
			source: srcgdv_Projects, 
			columnsresize: false, 
			sortable: false,
			columns: [
			{
				text: 'ID',
				datafield: 'ID',
				hidden: true,
				width: 0
			},
			{
				text: 'Projektname',
				datafield: 'ProjectName',
				hidden: false,
				width: 250
			},
			{
				text: 'CompanyID',
				datafield: 'CompanyID',
				hidden: false,
				width: 50
			}] 
		});
					
		$('#gdv_Projects').on('rowclick', function (event) {
			
		var args = event.args;
		var row = args.rowindex;
		var data = $('#gdv_Projects').jqxGrid('getrowdata', row);
		var filtergroup = new $.jqx.filter();
		var filter_or_operator = 0;
		var filtervalue = data.ID;
		var filtercondition = 'EQUAL';
		var filter1 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);

		filtergroup.addfilter(filter_or_operator, filter1);

		// add the filters.
		$('#gdv_Contacts').jqxGrid('addfilter', 'ProjectID', filtergroup);
		$('#gdv_Tasks').jqxGrid('addfilter', 'ProjectID', filtergroup);
		// apply the filters.
		$('#gdv_Contacts').jqxGrid('applyfilters');
		$('#gdv_Tasks').jqxGrid('applyfilters');
	
		});
	});	

JSON Source of second grid

[HSE_MLangParticipant]

I solved the problem i forgot to change the filter from “stringfilter” to “numericfilter”. I tested the filterting with strings and switched to numeric values.

Greetings

M. Lang

[Author]

Posts