Kendo Grid Custom Filtering With Column Menu

columnMenuInit.js

$("#grid").kendoGrid({
    dataSource: localDataSource,
    columnMenu: true,
    columnMenuInit: onColumnMenuInit,
    filterable: true,
    columns: [
        { field: "url", title: "Page Url", width: "350px" },
        { field: "name", title: "Page name" }
    ],
    editable: true
});

function onColumnMenuInit(e) {
  // Find filtering container
  var filterContainer = e.container.find(".k-filter-menu");
  
  // Remove existing filtering UI
  filterContainer.empty();
  
  // Add custom UI
  filterContainer.html($("<div>Something useful here</div>"));
};

filterMenuInit.js

$("#grid").kendoGrid({
    dataSource: localDataSource,
    filterMenuInit: onFilterMenuInit,
    filterable: true,
    columns: [
        { field: "url", title: "Page Url", width: "350px" },
        { field: "name", title: "Page name" }
    ],
    editable: true
});

function onFilterMenuInit(e) {
  // Remove existing filtering UI
  e.container.empty();
  
  // Add custom UI
  e.container.html($("<div>Something useful here</div>"));
};