0

I've added a kendoDropDownList in one of the cells in a kendoGrid, and it works fine at first. However, when I click on a column header to sort, the cell loses its formatting. Anyone have any idea how to prevent this? Here's a simple sample:

<html>
<head>
    <title>test</title>
    <link href="/kendoui.web.2013.2.716.open-source/styles/kendo.common.min.css" rel="stylesheet" type="text/css"/>
    <link href="/kendoui.web.2013.2.716.open-source/styles/kendo.default.min.css" rel="stylesheet" type="text/css"/>
    <script src="/kendoui.web.2013.2.716.open-source/js/jquery.min.js"></script>
    <script src="/kendoui.web.2013.2.716.open-source/js/kendo.web.min.js" type="text/javascript"></script>
</head>
<body>
    <table class="gridTable">
        <thead>
        <tr>
            <th data-field="name">Name</th>
            <th data-field="options">Options</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td class="wrap">Item</td>
            <td>
                <select class="menuBar" style="width:80px;">
                    <option>Big</option>
                    <option>Medium</option>
                    <option>Small</option>
                </select>
            </td>
        </tr>

        </tbody>
    </table>
    <script type="text/javascript">
        $(document).ready(function() {
            $(".gridTable").kendoGrid({
                sortable: true
            });

            $(".menuBar").kendoDropDownList({
            });
        });
    </script>
</body>
</html>
John Fehr
  • 91
  • 2
  • 8
  • Oddly enough, if you swap the gridTable and menuBar initialization at the bottom, the drop down lists don't work, but when you sort them, the css isn't stripped. – John Fehr Nov 12 '13 at 17:39
  • I couldn't find a way to prevent the reformatting, but found that the dataBound event is called after the grid is initialized, and each time its sorted, so this seems to work: $(document).ready(function() { $(".gridTable").kendoGrid({ sortable: true, dataBound:function(e) { var el=e.sender.element[0]; $(el).find(".menuBar").kendoDropDownList({ }); } }); }); There may be a better variable to use then e.sender.element[0], but I couldn't find it. – John Fehr Nov 12 '13 at 19:35

1 Answers1

2

The Grid is reconstructed each time you perform Page/Sort/Group etc. For such cases you need to use the dataBound event of the Grid to re-initialize any widgets or executed any JavaScript code that affects what is displayed in the Grdi.

Petur Subev
  • 19,983
  • 3
  • 52
  • 68