Kendo Grid Filter on specific column : how to customize?

Question

I have filter on the specific column in Kendo grid and i would like to modify this column like on the image below:

I tried to do by setting on the column config by this way:

// ADD DATE PICKER FOR COLUMNS CREATION TIME
          if(value.filterable.cell.dataTextField == "creationTime") {
            //preparedGridColumnItem.AllowFiltering = false,
            preparedGridColumnItem.format = "{0:dd.MM.yyyy}";
            preparedGridColumnItem.filterable = {
              ui: function (element) {
                element.kendoDatePicker({
                  format: "dd.MM.yyyy"
                });
              },
              cell: {
                operator: "eq",
                showOperators: false, // HIDE FILTER MENU
                template: function (arg) {
                  arg.element.kendoDatePicker({
                    format: "dd.MM.yyyy",
                    change: function (e){
                      console.log("Change :: " + kendo.toString(this.value(), 'd'));
                      var timestamp = moment(this.value()).unix();
                      console.log(timestamp);

                    }
                  });

                }
              }
            }
          }

But without luck.

I would like to have dropdown boxes not editable with predefined value to search.

How can i do it please?

I tried to find any working solution in documentation.

http://demos.telerik.com/kendo-ui/grid/filter-menu-customization

But without the luck. Many thanks for any advice.

Edit:

Filter is looking like this:

Answer 1

Here you go:

filterMenuInit: function(e) {
    if (e.field == "date") {
        var sels = e.container.find("select");
        var sel1 = $(sels[0]).data("kendoDropDownList");
        var sel2 = $(sels[2]).data("kendoDropDownList");

        sel1.select(3);
        sel1.enable(false);

        sel2.select(5);
        sel2.enable(false);
    }
}

Fiddle . This doc helped me.

e.container refers to the filter widget. With it you can play around freely. Note that the event is just called once, at the initialization of the filter widget, and not at each open/close.

Updated code for columnMenu :

Just change the filterMenuInit to columnMenuInit .

Fiddle .

Update 2:

I have added the following code to the columnMenuInit event:

var dates = $(e.container).find('[data-role="datepicker"]');
$(dates[0]).data("kendoDatePicker").unbind("change");
$(dates[1]).data("kendoDatePicker").unbind("change");

Fiddle . I just unbind the default change event of the datepickers, avoiding changing the dropdowns.