kendo grid : filtering on an array object

Question

I want to filter on a kendo grid that it's model has list of objects.

My filter is not working on a list of Contacts:

Here's my javascript code:

var typeFilter;
var contactsFilter;
var datesFilter;
var ByFiler;
var zeroFilter = {
    field: "ID",
    operator: "eq",
    value: 0
};

function filterOnMultiSelectContacts(e) {

    var filters;
    for (var i = 0; i < $('#ContactsDropDownFilter').data("kendoMultiSelect").dataItems().length; i++)
    {
        filters =[
                    {
                        field: "Contacts.ContactID",
                        operator: "eq",
                        value: Number($('#ContactsDropDownFilter').data("kendoMultiSelect").dataItems()[i].ContactID)
                    },
                        zeroFilter
        ]
    }

    contactsFilter = {
        logic: "or",
        filters: filters
    };
    applyFilters();
}

function TypeChanged(e) {
    var type = $("#SelectedType").val();
    var value = Number(type);

    if (value === -1) {
        typeFilter = null;
    }
    else {
        typeFilter = {
            logic: "or",
            filters: [
                {
                    field: "Type",
                    operator: "eq",
                    value: value
                },
                zeroFilter
            ]
        };
    }
    applyFilters();
}


function applyFilters() {
    var ds = $("#Grid").data("kendoGrid").dataSource;
    var filters = [];

    if (typeFilter) filters.push(typeFilter);
    if (contactsFilter) filters.push(contactsFilter);
    if (datesFilter) filters.push(datesFilter);
    ds.filter(filters);
}

The filter on my date and on my type is working fine because the fields (model) are not an array. On the other hand, my filterOnMultiSelectContacts() function is not working correctly. My guess that my mistake is this line field: "Contacts.ContactID" . This line is working fine by guetting the correct ContactID :

Number($('#ContactsDropDownFilter').data("kendoMultiSelect").dataItems()[i].ContactID)

By the way here's my razor datasource for the grid:

    .DataSource(dataSource => dataSource
    .Ajax()
    .ServerOperation(false)
    .Events(e => e.Sync("SyncLogEventGrid"))
    .Model(m =>
    {
        m.Id(t => t.LogEventID);
        m.Field(u => u.CreatedByContact).DefaultValue(UserHelper.GetCurrentUserContact(Request.RequestContext));
        m.Field(u => u.CreatedBy).DefaultValue(UserHelper.GetCurrentUserContact(Request.RequestContext).ContactID);
        m.Field(u => u.Contacts).DefaultValue(new List<ContactModel>());
        m.Field(u => u.LogEventAttachments).DefaultValue(new List<LogEventAttachmentModel>());
    })
    )

EDIT

I added in my model ContactIds which contains the Ids of the contacts (not the whole object). I came up with this but it's still not working...

function filterOnMultiSelectContacts(e) {
    contactsFilter = null;
    var ContactIdsList = new Array();
    for (var i = 0; i < $('#LogEventContactsDropDownFilter').val().length; i++)
    {
        ContactIdsList.push(Number($('#LogEventContactsDropDownFilter').val()[i]));
    }

    var filters;
    if ($('#LogEventContactsDropDownFilter').data("kendoMultiSelect").dataItems().length > 0) {
        filters = [
                    {
                        field: "ContactIDs",
                        operator: "eq",
                        value: ContactIdsList
                    }
                    ,
                    zeroFilter
        ];
        contactsFilter = {
            logic: "or",
            filters: filters
        };
    }
    else
    {
        contactsFilter = null;
    }
    applyFilters();
}   

Answer 1

I finally make it work, here's the solution:

MyFunctions = {
    getIntersect: function (arr1, arr2) {
        var intersect = [];

        for (i = 0; i < arr2.length; i++) {
            if ($.inArray(arr2[i], arr1) > -1)
                intersect.push(arr2[i]);
        }

        return intersect;
    }
}

function filterOnMultiSelectContacts(e) {
    filterBtnClicked(e, $(this));
    contactsFilter = null;

    var filters;
    if ($('#LogEventContactsDropDownFilter').data("kendoMultiSelect").dataItems().length > 0)
    {
        var ContactIdsList = new Array();
        for (var i = 0; i < $('#LogEventContactsDropDownFilter').val().length; i++) {
            ContactIdsList.push(Number($('#LogEventContactsDropDownFilter').val()[i]));
        }
        filters = [
                    {
                        field: "ContactIDs",
                        operator: function (items, filterValue) {

                            var intersect = MyFunctions.getIntersect(items, ContactIdsList);
                            if (intersect.length > 0) return true;
                            return false;
                        },
                        value: ContactIdsList
                    }
                    ,
                    zeroFilter
                ];
        contactsFilter = {
            logic: "or",
            filters: filters
        };
    }

    else
    {
        contactsFilter = null;
    }
    applyFilters();
}

function applyFilters() {
    var ds = $("#Grid").data("kendoGrid").dataSource;
    var filters = [];

    if (typeFilter) filters.push(typeFilter);
    if (contactsFilter) filters.push(contactsFilter);
    if (datesFilter) filters.push(datesFilter);
    ds.filter(filters);
}

I needed to create a function that intersects the given array with the items of the grid's datasource.