Kendo Grid in Bootstrap 2 or 3 Modal - IE Filters do not work

Question

Please check this out in IE (boot v2): http://jsbin.com/emuqazEz/22 Here is bootstrap 3 version: http://jsbin.com/emuqazEz/31

Here is the editable version: http://jsbin.com/emuqazEz/22/edit

The filters do not work at all in any version of IE I have tested. It works fine however in Chrome or Firefox.

Here is are the column settings and the datasource:

columnsettings = [
        "ProductName",
        {
                field: "UnitPrice",
                title: "Unit Price",
                format: "{0:c}",
                width: "130px"
        },
        {
                field: "UnitsInStock",
                title: "Units In Stock",
                width: "130px"
        },
        {
                field: "Discontinued",
                width: "130px"
        }
];

var gridDataSource = new kendo.data.DataSource({
     data: products,
     schema: {
              model: {
                      id: "uid",
                      fields: {
                        ProductName: { type: "string" },
                        UnitPrice: { type: "number" },
                        UnitsInStock: { type: "number" },
                        Discontinued: { type: "boolean" }
                      }
              }
      },
      sort: {
              field: "",
              dir: "desc"
      },
      pageSize: 50
});

Answer 1

here is what resolves my issue with this:

For bootstrap 3.0

$('#myModal').on('shown.bs.modal', function () {
   $(document).off('focusin.modal');
  })

for other lower version as provided by telerik

$('#myModal').on('shown', function () {
  $(document).off('focusin.modal');
});