How to filter a collection property using odata
9 Replies
Hi Ajith,
Correct, I am facing issues while filtering the multi-level complex field column (ActionUsers is a Collection of a Complect Type: User, which is a complex type too, and FullName is a string attribute of User).
- Share the complete grid code example.
@{
List<object> sortCols = new List<object>();
sortCols.Add(new { field = "StartDt", direction = "Descending" });
}
<ejs-grid id="MainGrid" actionBegin="onActionBeginMainGrid" actionComplete="onActionCompleteMainGrid" allowPaging="true" showColumnChooser="true" allowSorting="true" allowFiltering="true" allowExcelExport="true" allowPdfExport="true" allowTextWrap="true" toolbarClick="toolbarClick" toolbar="@(new List<string>() { "Add", "ExcelExport", "PdfExport", "Search", "ColumnChooser" })">
<e-grid-filterSettings type="Menu"></e-grid-filterSettings>
<e-grid-editSettings allowAdding="true" allowDeleting="false" allowEditing="false"></e-grid-editSettings>
<e-grid-pagesettings pageSize="50" pageCount="5"></e-grid-pagesettings>
<e-data-manager url="https://localhost:4455/myodata/Actions?$expand=ActionUsers($expand=User($select=Id,FullName)),Status" adaptor="ODataV4Adaptor" crossdomain="true"></e-data-manager>
<e-grid-sortsettings columns="sortCols"></e-grid-sortsettings>
<e-grid-columns>
<e-grid-column field="Id" isPrimaryKey="true" visible="false"></e-grid-column>
<e-grid-column field="StartDt" headerText="Start"></e-grid-column>
<e-grid-column headerText="Action Name" field="ActionName"></e-grid-column>
<e-grid-column headerText="Status" field="Status.Name" template="#templateStatus" filter="@(new { type="CheckBox" })"></e-grid-column>
<e-grid-column field="ActionUsers.User.FullName" template="#templateActionUsers"></e-grid-column>
</e-grid-columns>
</ejs-grid>
<script id="templateActionUsers" type="text/x-template">
console.log('this code works without issues')
${for(item of ActionUsers)}
<a rel='nofollow' href="/Details/${item.User.Id}" target="_blank">${item.User.FullName}</a>
<br>
${/for}
</script>
function onActionBeginMainGrid(args) {
if (args.requestType === "filterbeforeopen") {
switch (args.columnName) {
case "Status.Name": {
args.filterModel.options.dataSource =
[ { "Status": { "Name": "In Progress" } },
{ "Status": { "Name": "Created" } },
{ "Status": { "Name": "Completed" } }];
break;
}
}
}
}
function onActionCompleteMainGrid(args) {
if (args.requestType == "filterafteropen") {
if (args.columnName == "ActionName" ||
args.columnName == "ActionUsers.User.FullName" ) {
args.filterModel.dlgDiv.querySelector('input').ej2_instances[0].value = 'contains';
args.filterModel.dlgObj.element.children[0].firstElementChild.children[0].style.display = 'none';
}
}
}
- Share type of the filter used in your grid application
Im using: <e-grid-filterSettings type="Menu"></e-grid-filterSettings>, but for some columns I have: filter="@(new { type="CheckBox" })"
- Share the screenshot or video demonstration of the issue.
When I click on the column ActionUsers.User.FullName I see this error:
- Share the datasource bind to the grid component.
Im using a remote data source:
<e-data-manager url="https://localhost:4455/myodata/Actions?$expand=ActionUsers($expand=User($select=Id,FullName)),Status" adaptor="ODataV4Adaptor" crossdomain="true"></e-data-manager>
Im my previous post, you can see the odata endpoint and the data model of the returned objects.
- Share the Syncfusion package version.
Simple.OData.V4.Client 5.12.0
Syncfusion.EJ2.AspNet.Core 18.1.0.55
Thanks in advance!
Hi Manivel,
I followed your approach and the documentation, I ran into issues while implementing a custom adaptor and remote odata source. However, I manage to tweak the code to make it work, and currently I have this:
function onCreatedMainGrid(args) {
// class SerialNoAdaptor extends ej.data.ODataAdaptor {
class SerialNoAdaptor extends ej.data.ODataV4Adaptor {
// Request processing method
processQuery() {
// calling base class processQuery function
var original = super.processQuery.apply(this, arguments);
// Here you can customize the request as per your requirement and send it
return original;
}
// Response processing method
processResponse() {
// calling base class processResponse function
var original = super.processResponse.apply(this, arguments);
const resultObj = original.result ? { result: original.result, count: original.count } : original;
return resultObj;
}
}
var grid = document.querySelector('#MainGrid').ej2_instances[0];
grid.dataSource = new ej.data.DataManager({
url: 'MyOdataServiceUrl',
adaptor: new SerialNoAdaptor(),
crossDomain: true
});
}
1. ODataV4Adaptor instead of ODataAdaptor
2. const resultObj = original.result ? { result: original.result, count: original.count } : original; instead of just { result: original.result, count: original.count }
Above two points are needed, otherwise it doesn't work with odata and remote data sources, the second point is needed for filter menu columns, otherwise it fails.
I couldn't finish the entire code to make it work, but I guess that as you suggested, I should be able to change the query before it goes to the server. Ideally, this should automatically being handled for complex nested objects.
I realized now of this issue:
When I filter by x column of the grid it works, but if try to add another filter using a custom datasource right after I do click on the filter icon, it shows: "No matches found":
I have an onActionBegin function where I set the custom data source, like this:
function onActionBegin(args) {
if (args.requestType === "filterbeforeopen" && args.columnName == "Status.Name") {
args.filterModel.options.dataSource =
[ { "Status": { "Name": "Started" } },
{ "Status": { "Name": "Delayed" } },
{ "Status": { "Name": "Completed" } } ];
}
}
}
Any idea why is this happening? If I filter on that column without having any other active filter on any other column, it works.
Thanks!
SIGN IN To post a reply.
