Kendo UI With Bootstrap 2.3.2

Kendo Sortable IE Issue

by edsinek

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2015.1.318/js/kendo.web.min.js"></script>
<div class="container-fluid">
    <div class="k-content">
        <ol id="sortable" class="sortable chartList">
            <li>
                <div class="row">
                    <div class="col-xs-12 showTable" style="cursor: default; width: 100%;">
                        <div class="tableHolder">
                            <table cellpadding="0" cellspacing="0" id="a11yTable_2422_1">
                                <caption>Total Spend for for the past 12 Months</caption>
                                <tbody>
                                    <tr>
                                        <th scope="col">Oct 2011 - Nov 2013</th>
                                        <th>Merchandise</th>
                                        <th>Facilities</th>
                                    </tr>
                                    <tr>
                                        <th scope="row">Spend</th>
                                        <td>17,282</td>
                                        <td>10,245</td>
                                    </tr>
                                    <tr class="transactions">
                                        <th scope="row">Count</th>
                                        <td>385</td>
                                        <td>58</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">High</th>
                                        <td>150</td>
                                        <td>1,222</td>
                                    </tr>
                                    <tr>
                                        <th...

CSS

table {
    border: solid #ccc;
    border-width: 2px 2px 1px 1px;
    background: #fff;
    font-size: 10px;
    color: #000;
    text-align: left;
    padding: 0;
    cursor: default;
    width: 100%;
}
table caption {
    text-indent: -9000px;
}
table tr:first-child th {
    word-break: break-all;
    vertical-align: top;
}
table th, table td {
    border-left: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding: 8px 2px;
}
.tableHolder {
    max-height: 290px;
    min-width: 200px;
    overflow: auto;
}
.showTable {
    display: block;
    max-height: 300px;
    overflow: auto;
}

JavaScript

$("#sortable").kendoSortable({
    cursor: "move",
    hint: function (element) {
        var ele = element.clone();
        ele.width(element.width());
        return ele;
    },
    end: function (element) {
        var count = $("#sortable li").length;
        alert(count);
    }
});