Grid with Sortable Groups only?

[Scott]

Hello,

 

I am evaluating this control for use within my company, and essential to that decision is the ability for this control to accomplish these:

 1. Group rows (ok...easy enough)

 2. Drag-drop ONLY the groups themselves, not the underlying rows (via kendoSortable).

 3. When "dropped" have the group's respective rows follow it.

In other words, I need to drag-drop on the groups, not the underlying rows, but when the group is "dropped" in its new position, its grouped rows need to follow.

 

Any help most appreciated.

My code thus far:

01.function gridRender(topics) {
02.
03.    var grid = $("#grid").kendoGrid({
04.        dataSource: {
05.            data: topics,
06.            height: '100%',
07.            width: '100%',
08.            groupable: true,
09.            group: {
10.                field: "groupID",
11.                dir: "asc"
12.            },
13.            schema: {
14.                model: {
15.                    fields: {
16.                        name: { type: "string" },
17.                        groupID: { type: "number", },
18.                        description: { type: "string" }
19.                    }
20.                }
21.            }
22.        },
23.        scrollable: false,
24.        columns: [
25.            {
26.                field: "name",
27.                title: "Topic Name",
28.                width: "40%"
29.            },
30.            {
31.                field: "groupID",
32.                title: "GroupID",
33.                width: "10%"
34.            },
35.            {
36.                field: "description",
37.                title: "Description",
38.                width: "40%"
39.            },
40.            {
41.                field: "color",
42.                width: "10%"
43.            }
44.        ]
45.    }).data("kendoGrid");
46.
47.    grid.table.kendoSortable({
48.        filter: ".k-grouping-row",
49.        hint: function (element) {
50.            return $("<span></span>")
51.                    .text(element.text())
52.                    .css("color", "#FF0000");
53.        },
54.        cursor: "move",
55.        placeholder: function (element) {
56.            return element.clone().addClass("k-state-hover").css("opacity", 0.65);
57.        },
58.        container: "#grid tbody",
59.        change: function (e) {
60.            // This is where I am stuck.  How do I reference the specific grouped-row, get it's index
61.            // and move it's respective rows along with it?
62.
63.            //grid.dataSource.remove(dataItem);
64.            //grid.dataSource.insert(newIndex, dataItem);
65.        }
66.    });
67.}

[Konstantin Dikov]

Hello Scott,

The Grid groups are sorted based on the grouped field value in ascending or descending order and it will not be possible to achieve the desired result, because even if you change the order of a particular group through kendoSortable, the underlying value for the group (the field used for the grouping) will not be changed. The only thing that I can think of is to change the GroupID for all records in the data source according to the new index from the change event, so that the new groups will follow that order.

Hope this helps.


Regards,
Konstantin Dikov
Telerik