Custom Filter on Extended Data with odata

[Indicia]

Hello,

Currently I'm having an issue with a Custom Filter in my Grid. I'm trying to get all our function groups from our server and make those filterable in the Grid.
However the name I want to use for filtering isn't found in the Grid schema and throwing an error.

To fill my Grid i'm using odata-v4 and Extending it with extra data. The problem is i'm trying to create the custom filter on data in the Extended object I get from odata. However when i try to apply the filter I get the error message "ReferenceError: Employee is not defined". 

I've tested what happens if I try to apply the filter to a field in the base schema of the Grid's datasource and then the data is retrieved as expected. 

So my question is how can I apply the filter to an attribute in the Extended object?

Kendo Grid Schema

01.schema: {
02.    total: function(data) {
03.        return data["@odata.count"];
04.    },
05.    model: {
06.        id: "EmployeeId",
07.        fields: {
08.            EmployeeId: { type: "number", editable: false },
09.            EmployerBudgetId: { type: "boolean" },
10.            Id: { type: "string" },
11.            CreatedDate: { type: "string", defaultValue: new Date().toISOString() },
12.            CreatedBy: { type: "string" },
13.            LastModifiedDate: { type: "string", defaultValue: new Date().toISOString() },
14.            LastModifiedBy: { type: "string" },
15.            Description: { type: "number" },
16.            StartDate: { type: "number" },
17.            EndDate: { type: "number" },
18.        }
19.    }
20.},

KendoGrid Datagrid

01.$scope.datagrid = {
02.        dataSource: dataSource,
03.        pageable: true,
04.        filterable: true,
05.        sortable: true,
06.        selectable: true,
07.        height: 800,
08.        toolbar: ['create', { name: 'edit', title: 'Bulk Edit', template: '<a ng-click="bulkEdit()" class="k-button k-button-icontext k-grid-edit">Bulk Edit</a>' }],
09.        columns: [
10.            { title: 'select', template: '<input class="checkbox" type="checkbox" />' },
11.            { field: "Employee.Email", title: "Email" },
12.            { field: "Employee.LocalFunctionGroup", title: "Local Function Group" },
13.            {
14.                field: 'Employee.FunctionGroup.Name', // Custom Filter (on extended data)
15.                title: "Global Function Group",
16.                filterable: {
17.                    multi: true,
18.                    dataSource: filterDatasource,
19.                    dataTextField: "Name"
20.                },
21.                template: '# if (Employee.FunctionGroup != null) { # #: Employee.FunctionGroup.Name # # } #',
22.            },
23.            { field: "CurrentAmount.Amount", title: "Current Amount" },
24.            { command: ["edit", "destroy"], title: " ", width: "110px" },
25.        ],
26.        editable: "popup",
27.    };

KendoFitlerSchema

01.schema: {
02.    model: {
03.        id: "Id",
04.        fields: {
05.            Id: { type: "number", editable: false },
06.            Name: { type: "string" },
07.        }
08.    }
09.},

ResponseBody odata

01.{
02.  "@odata.context": "https://localhost/Awvn.Admin.Api/odata/$metadata#EmployeeBudgets",
03.  "value": [
04.    {
05.      "Id": 4,
06.      "CreatedDate": "2017-03-29T08:27:07.17+02:00",
07.      "CreatedBy": "EmployeeBudgetsInitializer",
08.      "LastModifiedDate": "2017-03-29T08:27:07.17+02:00",
09.      "LastModifiedBy": "EmployeeBudgetsInitializer",
10.      "Description": null,
11.      "StartDate": "2000-01-01T00:00:00+01:00",
12.      "EndDate": "2100-01-01T00:00:00+01:00",
13.      "EmployeeId": 4162,
14.      "EmployerBudgetId": 3,
15.      "InitialAmount": {
16.        "Amount": 0,
17.        "Currency": "EUR"
18.      },
19.      "CurrentAmount": {
20.        "Amount": 0,
21.        "Currency": "EUR"
22.      },
23.      "Employee": {
24.        "Id": 4162,
25.        "IsDeleted": false,
26.        "Email": "[e-mail]",
27.        "LocalFunctionGroup": "Automotive",
28.        "FunctionGroupId": 2,
29.        "UserId": null,
30.        "EmployerId": 2,
31.        "FunctionGroup": {
32.          "Id": 2,
33.          "Name": "Accounting / Financieel" <- The field I want to use for my filtering
34.        }
35.      }
36.    }
37.  ]
38.}

 

Kendo UI version: "2017.1.223"
Chrome Version 56.0.2924.87

[Indicia]

I'm now also running into the same issue with another Grid but this time with the create functionality. When I try to create a new record, when refering to data in that comes from the $expand from my odata query I get the message "Uncaught TypeError: Cannot read property 'Name' of undefined"

01.$scope.datagrid = {
02.    dataSource: dataSource,
03.    pageable: true,
04.    filterable: true,
05.    sortable: true,
06.    height: 800,
07.    toolbar: ["create"],
08.    columns: [
09.        { field: "Employer.Name", title: "Employer" }, // From data in the $expand from the odata query
10.        { field: "Priority", title: "Priority" },
11.        { field: "Description", title: "Description" },
12.        { field: "CurrentAmount.Amount", title: "Current Ammount" },
13.        { field: "StartDate", title: "Start Date", template: '#= kendo.toString(StartDate,"dd-MM-yyyy") #' },
14.        { field: "EndDate", title: "End Date", template: '#= kendo.toString(EndDate,"dd-MM-yyyy") #' },
15.        { command: ["edit", "destroy", { text: 'employee budgets', click: toEmplyeeBudgets}], title: " ", width: "110px" },
16.    ],
17.    editable: "popup"
18.};

This is now preventing me from creating new records in the grid. Am I taking a wrong approach in how to handle the odata data from $expand or is this something that is not supported, or bugged?

Best regards.

[Boyan Dimitrov]

Hello,

I am afraid that I do not completely understand the problem in your initial post. I guess that what you are looking for is the parameterMap of the DataSource. When using a odata type of the DataSource, a special predefined type of transport is used. This transport has a parameterMap which "knows" how to serialize the filter, sorting and paging information in OData compatible format. However, you are able to define your own parameterMap function and overridden the built-in one and keep the the default logic. Please refer to the code snippet below: 

dataSource: {
      type: "odata",
      transport: {
          read: "URL",
          parameterMap: function(options, type) {
              options.foo = "bar"; // do something here

              return kendo.data.transports["odata"].parameterMap(options, type);
          }
      },
//...
}

As for your second question: the Employee object is a complex object and a default value in the schema.model of the DataSource should be set as demonstrated in the Grid / Editing custom editor (please take a look at the Category field). 

Regards,
Boyan Dimitrov
Telerik by Progress

[Indicia]

Hello Boyan,

I'll try to clear up the first question a bit, i'm trying to get my grid to filter on part of the information that is not in the default schema from the datasource. I have the following call to odata:
/odata/EmployerBudgets(2)/EmployeeBudgets?$expand=Employee($expand=FunctionGroup)
The $expand FunctionGroup has two attribute, id and name. as you can see in the exceprt below

01.{
02."@odata.context": "https://localhost/Awvn.Admin.Api/odata/$metadata#EmployeeBudgets",
03.  "value": [
04.    {
05.      "Id": 4,
06.      ..
07.      ..
08.      "InitialAmount": {
09.        "Amount": 0,
10.        "Currency": "EUR"
11.      },
12.      "CurrentAmount": {
13.        "Amount": 0,
14.        "Currency": "EUR"
15.      },
16.      "Employee": {
17.        "Id": 4162,
18.        ..
19.        ..
20.        "FunctionGroup": {
21.          "Id": 2,
22.          "Name": "Accounting / Financieel" <- The field I want to use for my filtering
23.        }
24.      }
25.    }
26.  ]
27.}

 

I have a seperate datasource for the filter on the column that displays the functiongroup names. This datasource, only contains the functiongroup objects the same as they are in the $expand=functiongroup.

When I try to view this data in my grid, i need to call the field as "Employee.FunctionGroup.Name". The filter datasource however, only has the fields "Id" and "Name" and because these don't match. The filtering does not show any options. which results in the error message "ReferenceError: Employee is not defined". 

I hope i clarified the problem i'm having at this point.

Best regards

 

[Boyan Dimitrov]

Hello,

Unfortunately there is not much that can be done since the filter DataSource have only Id and Name and does not have any information about the Employee.FunctionGroup.Name. Somehow the value should be extracted from the other DataSource (I guess this is the most convenient solution) and pass as additional parameter to the read operation (filter DataSource). 

In order to send an additional data together with the read request please use transport.read.data. 

Regards,
Boyan Dimitrov
Telerik by Progress