Kendo Jquery Grid - фильтрация по столбцу значений, разделенных запятыми

Question

У нас есть Kendo Jquery Grid, и мы пытаемся предоставить фильтр для столбца, где мы показываем значения в разделенной запятыми форме.Код показан ниже, я попытался поймать объект фильтра в событии dataBound и попытаться отфильтровать записи по источнику данных, но не смог помочь.Пожалуйста, предложите, как мы можем достичь этого.

Поле, в котором мы должны достичь этого, ProviderSpecialty

<script>
    var grid;
    var dataSource;
    var gridView = 'updatesRequired';

    $(document).ready(function () {
        $('#selectGridView').change(function () {
            gridView = $('#selectGridView').val();
            $('#grid').kendoGrid('destroy').empty();
            renderGrid();
        });
        renderGrid();
    });

    function renderGrid() {

        var fieldsSchema =
        {
            'ProviderDelegateId': { type: 'number' },
            'EndDate': {type: 'date' }
        };
        dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: providerProfileApiBaseUrl)
                }
            },
            error: function (e) {
                if (e.xhr.responseText != '') {
                    var jsonError = JSON.parse(e.xhr.responseText);

                    if (myApp.Web.utility.displacolumns !== undefined) {
                        myApp.Web.utility.displacolumns.push({
                            field: 'EndDate', template: '#= kendo.toString(kendo.parseDate(EndDate), "MM/dd/yyyy")#', title: 'Campaign End Dt', width: '125px', filterable: {
                                ui: function (element) {
                                    element.kendoDatePicker({
                                        format: "MM/dd/yyyy"
                                    });
                                }
                            }
                        });
                    }
                    myApp.Web.utility.displayErrorDialog(jsonError.error);
                }
            },
            pageSize: myApp.Web.config.grid.pageable.pageSize,
            schema: {
                model: {
                    id: 'UniqueId',
                    fields: fieldsSchema
                }
            },
            sort: { field: "ProviderLastName", dir: "asc" }
        });

        var columns = [];
        columns.push({ field: 'ProviderDelegateId', hidden: true });
        if (gridView === 'updatesRequired') {
            columns.push({ field: 'ProviderLastName', title: 'Last Name', width: '125px', template: '<a href="/ProviderLanding/ProviderUpdate/Index/#=CampaignTrackingId#">#=ProviderLastName#</a>' });
            columns.push({ field: 'ProviderFirstName', title: 'First Name', width: '125px', template: '<a href="/ProviderLanding/ProviderUpdate/Index/#=CampaignTrackingId#">#=ProviderFirstName#</a>' });
            columns.push({ field: 'ProviderNPI', title: 'NPI', width: '125px', template: '<a href="/ProviderLanding/ProviderUpdate/Index/#=CampaignTrackingId#">#=ProviderNPI != null ? ProviderNPI : \'\' #</a>' });
        } else {
            columns.push({ field: 'ProviderLastName', title: 'Last Name', width: '125px', template: '<a href="/ProviderUpdate/UpdateProfile?providerId=#=ProviderId#">#=ProviderLastName#</a>' });
            columns.push({ field: 'ProviderFirstName', title: 'First Name', width: '125px', template: '<a href="/ProviderUpdate/UpdateProfile?providerId=#=ProviderId#">#=ProviderFirstName#</a>' });
            columns.push({ field: 'ProviderNPI', title: 'NPI', width: '125px', template: '<a href="/ProviderUpdate/UpdateProfile?providerId=#=ProviderId#">#=ProviderNPI != null ? ProviderNPI : \'\' #</a>' });
        };
        columns.push({ field: 'ProviderSpecialty', title: 'Specialty', width: '125px', template: '#= getSpecialties(ProviderSpecialties) #' });
        columns.push({ field: 'ProviderEmail', title: 'Email', width: '125px' });
        columns.push({ field: 'LocationName', title: 'Location', width: '125px', template: '#= getLocations(ProviderLocations) #'  });
        if (gridView === 'updatesRequired') {
            columns.push({ field: 'CampaignName', title: 'Campaign', width: '125px', template: '<a href="/ProviderLanding/ProviderUpdate/Index/#=CampaignTrackingId#">#=CampaignName#</a>' });
            columns.push({
                field: 'EndDate', template: '#= kendo.toString(kendo.parseDate(EndDate), "MM/dd/yyyy")#', title: 'Campaign End Dt', width: '125px', filterable : {
                ui: function (element) {
                    element.kendoDatePicker({
                        format: "MM/dd/yyyy"
                    });
                }
            } });
        } else {
            columns.push({ field: 'IsPendingChangeAvailable', title: 'Pending Changes', width: '125px', template: '#if (IsPendingChangeAvailable) {# Yes #} else {# No #}#' });
        };

        grid = $("#grid").kendoGrid({
            dataSource: dataSource,
            columns: columns,
            scrollable: false,
            filterable: myApp.Web.config.grid.filterable,
            sortable: myApp.Web.config.grid.sortable,
            pageable: myAppWeb.config.grid.pageable,
        }).data('kendoGrid');
    };

    function getSpecialties(specialties) {
        // remove duplicates and then join...
        var result = [];
        $.each(specialties, function(i, e) {
            if ($.inArray(e.SpecialtyName, result) == -1) result.push(e.SpecialtyName);
        });
        return result.join(',');
    };

    function getLocations(locations) {
        return locations.map(function (location) {
            return location.LocationName
        }).join(',');
    };

    $(document).ajaxStart(function () {
        $('#overlay-screen').show();
    });
    $(document).ajaxStop(function () {
        $('#overlay-screen').hide();
    });
</script>

Answer 1

Поле фильтра не позволит вам добавить запятую. Я не уверен, что вы можете сделать это с запятой, если вы не переопределите пользовательский интерфейс, чтобы показать свой собственный блок фильтра, и при изменении примените фильтр через jquery / javascript, как показано ниже. Если я вас правильно понимаю.

//After user enters their values. Imagine "Tom,John" would be what the user entered
//After you exploded the comma list yourself
$('#grid').data('kendoGrid').dataSource.filter({
    logic: "or",
    filters: [
       { field: "Name", operator: "contains", value: 'Tom' },
       { field: "Name", operator: "contains", value: 'John' },
    ]
});

Очевидно, было бы немного сложнее, если бы вы позволили фильтровать и другие столбцы. Вместо этого вы будете изменять фильтр, а не переопределять его. Обратите внимание, мой пример использует содержит. Это может быть, если бы вы этого хотели. Однако, предполагая, что столбец, по которому вы хотите фильтровать, является текстом, вы могли бы вместо этого использовать «mulit: true» для фильтруемого объекта. Это позволяет пользователю управлять выбором с элементом пользовательского интерфейса kendo

//On the column property
filterable: {
    multi:true
}

Это даст вам флажки для каждого возможного значения в столбце. Обратите внимание, что если вы используете режим фильтруемого объекта в вашей сетке, он установлен в строку. Это не будет работать

//On the grid
filterable: {
    mode: "row"
}

Откройте код по следующей ссылке в додзё https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.filterable.multi

Надеюсь, это поможет