jQuery UI Widgets Forums Grid Filtering from one to another grid into a mapped datafield

This topic contains 1 reply, has 1 voice, and was last updated by  HSE_MLang 9 years, 11 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author

  • HSE_MLang
    Participant

    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_MLang
    Participant

    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

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

You must be logged in to reply to this topic.