KendoUI Grid Filter Posts Twice - kendo-ui

Question

I have this grid with a custom multi-select filter. When I click the filter icon an AJAX method calls an API to grab filter values. The method call is defined in the DocType column.
Here is my grid builder function:
$("#attachmentsGrid").kendoGrid({
pageable: {
change: function() {
CH.RelatedItems.GridPager();
}
},
scrollable: false,
sortable: true,
dataSource: attachments,
filterable: {
extra: false,
operators: {
string: {
startswith: "Starts with",
eq: "Is equal to",
neq: "Is not equal to",
contains: "Contains",
}
}
},
columns:
[
{
title: "id",
field: "Id", //turns out this needs to be lower case
sortable: false,
filterable: false,
template: "<input name='cbCheckboxColumn' type='checkbox' onclick='CH.RelatedItems.ToggleAttachmentsByCheckboxColumn()' data-row='#: Id#' />",
headerTemplate: "<input id='cbCheckboxHeader' type='checkbox' onclick='CH.RelatedItems.ToggleAttachmentsByCheckboxHeader()'",
width: "18px",
},
{
title: "Exists?",
field: "IsAlreadyAttached",
type: "boolean",
sortable: false,
template: "<div style='text-align: center'>#: IsAlreadyAttached #</div>",
filterable: false,
width: "110px",
},
{
title: "Icon",
field: "DocType",
sortable: true,
template: "<div style='text-align: center'><img src='" + config.SPHostUrl + "/_layouts/images/#: DocIcon #' /></div>",
width: "60px",
filterable: {
ui: CH.RelatedItems.AttachmentsIconFilter,
extra: false,
},
},
{
title: "File Name",
field: "Name",
sortable: true,
filterable: false,
template: "<a href='#: Url#' target='_blank'>#: Name#</a>",
width: "650px",
},
{
title: "Modified",
field: "LastModifiedDateOnly",
template: "<span>#: LastModified#</span>",
sortable: true,
width: "250px",
filterable: {
ui: CH.RelatedItems.AttachmentsDateFilter,
extra: false
}
},
],
dataBound: CH.RelatedItems.PostGridDataBound
});
The AttachmentsIconFilter function is here:
pub.AttachmentsIconFilter = function (element) {
var menu = $(element).parent();
menu.find(".k-filter-help-text").text("Show document types:");
menu.find("[data-role=dropdownlist]").remove();
var multiSelect = element.kendoMultiSelect({
dataSource: {
transport: {
read: {
datatype: "jsonp",
url: config.WorkPaperViewRelativePath + "/_RelatedItemsPopup/GetAttachmentsUniqueDocIcons/" + config.SPQueryString
}
}
},
}).data("kendoMultiSelect");
menu.find("[type=submit]").on("click", { widget: multiSelect }, CH.RelatedItems.AttachmentsFilterByIcon);
}
When the AttachmentsIconFilter runs, the AJAX call get made twice:
Kendo Double GET
I thought that the property: filter: { extra: false } was supposed to prevent this double GET?
Also, when I select my filters and the grid make a new request to get the filtered records, it does a double POST. The function for the call to filter the grid is here:
pub.AttachmentsFilterByIcon = function (e) {
var icons = e.data.widget.value();
var filter = { logic: "or", filters: [] };
for (var i = 0; i < icons.length; i++)
{
filter.filters.push({ field: "DocIcon", operator: "Contains", value: icons[i].Contains });
}
$("#attachmentsGrid").data("kendoGrid").dataSource.filter(filter);
}
Any help here? What am I missing?