Kendo Grid's column filterable property "ui" not working when property "multi:true" specified

I am trying to create a multi checkbox filter for a Kendo grid column. For this feature I am using "multi:true" property on the column's filterable. I also want to use the "ui" callback function which does not seem to work when I have the "multi:true" property set. If I remove this property, the "ui:function(e){}" gets called.

Is there a way I can use both these together?

Here is a link to the demo I am trying

Thank you in advance!

Setting the filter property of the grid data source does the trick.

     <div id="grid"></div>

    <script>
      var onlyOnce = false;
      $(document).ready(function () {
        var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
            dataSource = new kendo.data.DataSource({
              transport: {
                read: {
                  url: crudServiceBaseUrl + "/Products",
                  dataType: "jsonp"
                }              
              },
              filter: {
                                logic: "or",
                                filters: [
                                { field: "ProductName", operator: "eq", value: "Chai" },
                                { field: "ProductName", operator: "eq", value: "Chang" }
                                ]
                            }
            });

        $("#grid").kendoGrid({
          dataSource: dataSource,
          columns: [
              { field: "ProductName", title: "Product Name", filterable:{
                multi:true
              } 
            }
           ],
          filterable: true                    
        });
      });  
    </script>