This is a migrated thread and some comments may be shown as answers.

Grid with Sortable Groups only?

1 Answer 186 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Scott
Top achievements
Rank 1
Scott asked on 23 Nov 2015, 03:48 PM

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.}

1 Answer, 1 is accepted

Sort by
0
Konstantin Dikov
Telerik team
answered on 24 Nov 2015, 11:30 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Scott
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Share this question
or