Use Kendo UI sortable widget on MVVM table-CodePudding

I am using kendo UI MVVM to populate this table.

<div >
    <table id="table" >
        <thead>
            <tr>
                <th>#</th>
                <th>Image</th>
                <th>Description</th>
                <th">Actions</th>
            </tr>
        </thead>
        <tbody data-template="rowTemplate" data-bind="source: photos"> </tbody>
    </table>
</div>

<script type="text/x-kendo-template" id="rowTemplate">
    <tr>
        <td data-bind="text: number"></td>
        <td>
            <img  width="100" height="80" data-bind="attr:{ src:src }, events: { click: showPhoto }" />
        </td>
        <td data-bind="text: desc"></td>
        <td>
            <i ></i>
        </td>
    </tr>
</script>

I want to be able to move the table rows in the UI by clicking on the user account. If I add data-role="sortable" to the table, nothing works. Ref: https://www.telerik.com/forums/sortable-handler-inside-kendo-template

How do I get kendo sortable and its handlers to work inside the MVVM observable?

CodePudding user response：

Try using the jQuery equivalent kendoSortable widget. Using sortable inside MVVM templates seems to cause inconsistent compilations. This might cause the handlers to not work correctly inside the sortable widget. See: kendo sortable widget mvvm UI glitch.

Assign an id to the parent <div> wrapping the <table> and create the sortable object on it.

Then you can bind observable methods to the jQuery widget handlers as a proxy:

kendo.jQuery("#"   id).kendoSortable({
    filter: ">div.container",
    cursor: "move",
    placeholder: function (element) {
        return element.clone().css("opacity", 0.1);
    },
    hint: function (element) {
        return element.clone().removeClass("k-state-selected");
    },
    change: viewModel.updatePositions.bind(viewModel, e)
});