Custom Filter on Extended Data with odata

5 posts, 0 answers
  1. Indicia
    Indicia avatar
    18 posts
    Member since:
    Mar 2012

    Posted 03 Apr 2017 Link to this post

    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": "Rick75@import.nl",
    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

  2. Indicia
    Indicia avatar
    18 posts
    Member since:
    Mar 2012

    Posted 04 Apr 2017 in reply to Indicia Link to this post

    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.

  3. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2062 posts

    Posted 05 Apr 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  4. Indicia
    Indicia avatar
    18 posts
    Member since:
    Mar 2012

    Posted 11 Apr 2017 in reply to Boyan Dimitrov Link to this post

    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

     

  5. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2062 posts

    Posted 13 Apr 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top