[SOLVED] Kendo Sortable integrated with a grouped Grid

Kendo Sortable integrated with a grouped Grid

Here's my View, in which I have a Sortable that's integrated with a Grid. This works fine, but the problem is that the Grid is grouped. And, I want each group to have its own Sortable functionality, meaning that the user should not be able to drag and drop rows from one group to another. How do I do that? Do I have to have separate Sortables for each group?

@(Html.Kendo().Grid<QRMT.ViewModels.SubsystemViewModel>()
    .Name("subsystems")
    .ToolBar(toolbar => toolbar.Create().Text("Add new Subsystem"))
    .Columns(columns =>
    {
        columns.ForeignKey(c => c.SystemId, new SelectList(ViewBag.Systems, "Value", "Text")).Hidden();
        columns.Bound(c => c.SubsystemCode);
        columns.Bound(c => c.SubsystemDesc);
        columns.Command(c => { c.Edit(); c.Destroy(); }).Width(200);
    })
    .Editable(e => e.Mode(GridEditMode.PopUp).Window(window => window.Width(500)))
    .DataSource(dataSource => dataSource
        .Ajax()
        .Events(events => events.Sync("onSync").Error("onError"))
        .Model(model =>
        {
            model.Id(m => m.SubsystemId);
        })
        .Group(group => group.Add(m => m.SystemId))
        .Create(create => create.Action("Add", "Subsystems"))
        .Read(read => read.Action("Read", "Subsystems"))
        .Update(update => update.Action("Update", "Subsystems"))
        .Destroy(destroy => destroy.Action("Delete", "Subsystems"))
    )
    .Events(events => events.Edit("onEdit"))
)


@(Html.Kendo().Sortable()
    .For("#subsystems")
    .Filter("table > tbody > tr:not(.k-grouping-row)")
    .Cursor("move")
    .HintHandler("noHint")
    .PlaceholderHandler("placeholder")
    .ContainerSelector("#subsystems tbody")
    .Events(events => events.Change("onChange"))
)

<script type="text/javascript">
    var noHint = $.noop;

    function placeholder(element) {
        return element.clone().addClass("k-state-hover").css("opacity", 0.65);
    }

    function onEdit(e) {
        if (e.model.isNew()) {
            $('.k-window-title').text("Add");
        }
    }

    function onSync(e) {
        this.read();
    }

    function onError(e) {
        alert(e.errors);
    }

    function onChange(e) {
        var grid = $("#subsystems").data("kendoGrid"),
            skip = grid.dataSource.skip(),
            oldIndex = e.oldIndex + skip,
            newIndex = e.newIndex + skip,
            data = grid.dataSource.data(),
            dataItem = grid.dataSource.getByUid(e.item.data("uid"));

        grid.dataSource.remove(dataItem);
        grid.dataSource.insert(newIndex, dataItem);
    }
</script>

<style>
    .k-grid tbody tr:not(.k-grouping-row) {
        cursor: move;
    }
</style>

Solution