Kendo Angular Server Side Filtering for array column

[Michal]

Hello,

I have a problem for which I cannot find any solution. I have a Kendo grid declared in one of the components in Angular. One of the columns is an array of strings that are displayed together in the column. The filter for this column is a dropdown with possibility to select one of the stringsthat are displayed in these columns.

I'm doing server side filtering for this grid with the .ToDataSourceResult() method. The problem is that when I try to pass the string filter in state, I get (understandably because of mismatching types) an error:

'Invalid cast from 'System.String' to 'System.Collections.Generic.IEnumerable`1[[System.String, System.Private.CoreLib, Version=4.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]]'.'

I cannot find any solution for this problem - I don't know how to make it work so that I can filter an array of strings. Normally in these kind of problems we set the field as the single string with concatenated values from array. But because this particular method is working on IQueryable for better performance, it is not possible. 

Below I pass the code for reference:

The backend method:

public DataSourceResult GetAllServices(DataSourceRequest state)
        {
            var allServices = _serviceRepository.GetServices();

            IQueryable<NonDraftServiceDto> mappedAllServices = _mapper.ProjectTo<NonDraftServiceDto(allServices);

            return mappedAllServices.ToDataSourceResult(state);
        }

Model:

    public class NonDraftServiceDto
    {
        public int Id { get; set; }

        public string Service { get; set; }

        public IEnumerable<string> Sites { get; set; }
    }

 

Grid in Angular:

<kendo-grid

        [sortable]="true"

        [scrollable]="'none'"

        [selectable]="true"

        [sort]="gridState.sort"

        [data]="allServices"

        [pageSize]="gridState.take"

        [skip]="gridState.skip"

        [pageable]="true"

        [filterable]="true"

        [filter]="gridState.filter"

        (dataStateChange)="dataStateChange($event)">

        <kendo-grid-column

            [filterable]="true"

            field="Service"

            [sortable]="true"

            [title]="Service"

            [width]="157">

        </kendo-grid-column>

        <kendo-grid-column

          [filterable]="true"

          field="Sites"

          [sortable]="true"

          [title]="Sites"

          [width]="175">

          <ng-template kendoGridCellTemplate let-dataItem>

            {{dataItem.Sites}}

          </ng-template>

          <ng-template kendoGridFilterCellTemplate let-filter>

            <app-dropdown-filter #SiteDropdown

              [filter]="filter"

              [data]="dropdownSites"

              textField="DisplayName"

              valueField="DisplayName"

              filterField="Sites"

              operator="contains">

          </app-dropdown-filter>

        </ng-template>

        </kendo-grid-column>

        <kendo-grid-column

            [filterable]="true"

            field="Status"

            [sortable]="true"

            [title]="'service_overview.Status_column_name' | translate: 'Status'"

            [width]="50">

            <ng-template kendoGridCellTemplate let-dataItem>

              {{ returnStatusText(dataItem.Status) }}

            </ng-template>

            <ng-template kendoGridFilterCellTemplate let-filter>

                <app-dropdown-filter

                    [filter]="filter"

                    [data]="statusList"

                    textField="ServiceStatusText"

                    valueField="ServiceStatusText"

                    filterField="Status"

                    operator="eq">

                </app-dropdown-filter>

            </ng-template>

        </kendo-grid-column>

    </kendo-grid>