Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
1390
Binding to JSON object's complex properties
posted

I'm connecting to an Odata service that returns the following JSON data structure:

 {
    "Results":[
     { "ActivationDate":"\/Date(1329677323000)\/",
      "CurrentParticipant":{"ExtensionData":{},"DisplayName":"Site Administrator","EmailAddress":"site@abc.com","Id":1,"IsGroup":false,"Name":"Jannie"},
      "DateOfCreation":"\/Date(1329677323000)\/",
      "DueDate":null,
      "HasBeenEscalated":false,
      "HasBeenRouted":false,
      "IsNew":true,
      "Originator":{"ExtensionData":{},"DisplayName":"Site Administrator","EmailAddress":"site@abc.com","Id":1,"IsGroup":false,"Name":"Jannie"},
      "ProcessInstanceId":942,
      "Routes":null,
      "ExtensionData":{},
      "DisplayName":"Lookup - fcBusinessEvent",
      "Id":1631,
      "Name":"LO20Lookup",
      "ProcessGroupId":3,
      "ProcessId":25,
      "TargetUrl":null,
      "Type":3,
      "VersionNumber":"1.0.0.197"
     }],
    "Total":282,
    "Skip":0,
    "Take":1,
    "Count":1,
    "Page":1,
    "Pages":282
   }

My requirements are to display the 'Originator.DisplayName' in a grid column named 'From' with filtering feature enabled.

Using a JQuery template I am able to render the 'Originator.DisplayName'  in the grid into a column with header 'From'.

<script id="rowTemplate" type="text/x-jquery-tmpl">
	<tr>		
		<td>${Originator.DisplayName}</td>		
	</tr>
</script

 

<script>
	$(function () {
				
		var dSource = new $.ig.JSONPDataSource({
			dataSource: "@base.Url.Action("Tasks""Pending")",				
			type: "remoteUrl",
			responseDataKey: "Results",				
		});
 
		$("#table").igGrid({
			dataSource: dSource,
			autoGenerateColumns: false,			
			jQueryTemplating : true,			
			rowTemplate: $("#rowTemplate").html(),							
			columns: [
				{
					headerText: "From",
					key: "Originator"					
				}
			],
			features: [
				{
					name: 'Paging',
					pageSize: 10,
					recordCountKey: "Total"					
				},
				{
					name: 'Sorting'
				},
				{
					name: "Filtering",
					mode: 'simple',
					allowFiltering: true,
					caseSensitive: false										
				}
			]
		});
	});
</script>

Now, the problem....

When filtering the 'From' column the OData filter send to the server comes out as:

$filter=indexof(Originator,Admin)%27ge%270%27&$skip=0&$top=10

How can I get the filter to be applied as follow and as indicated in the OData Protocol URI standard.

$filter=indexof(Originator/DisplayName,Admin)%27ge%270%27&$skip=0&$top=10

Please can you advise to going forward, I do not have control over the OData service and I'm stuggling to find any kind of work around. Except for dropping the Infragistics for something like DataTables or JqGrid

Thanks in advance.

  • 24671
    Verified Answer
    posted

    Hi,

    This is not currently supported out of the box as part of the OData functionality. We can add this as a feature request and implement it for a future Service release. I don't think any of the products you have mentioned support this out of the box either.

    In the meantime you can easily workaround this by using the urlParamsEncoded event of the dataSource in order to intercept the encoding of the URL and add the /DisplayName :

    Example for the following OData service:

    http://developer.netflix.com/docs/oData_Catalog

    $("#netflixGrid").data("igGrid").dataSource.settings.urlParamsEncoded = function (owner, params) {

    params.filteringParams.$filter = params.filteringParams.$filter.replace("BoxArt", "BoxArt/LargeUrl");

    };

    Hope it helps. Thanks,

    Angel