Enable server-side grouping.

[Michal]

Hi, I wrote kendo Grid control in javascript application; I had needed implement server-side grouping, but I couldn't turn it on eventually. Server sorting, and filtering already works, perhaps I am doing something wrong in a render-control-code; here it is:

01.jQuery(ORDER_GRID_ID).kendoGrid({
02.                "change": XX.OrderGrid_Change,
03.                "columns": [{
04.                    "title": XX.Title,
05.                    "width": "120px",
06.                    "field": "number",
07.                    "filterable": true,
08.                    "encoded": true
09.                },
10.                {
11.                    "title": XX.Title1,
12.                    "width": "200px",
13.                    "field": "status",
14.                    "filterable": true,
15.                    "encoded": true
16.                },
17.                {
18.                    "title": XX.Title2,
19.                    "width": "100px",
20.                    "field": "orderDate",
21.                    "format": "{0: yyyy/MM/dd}",
22.                    "filterable": true,
23.                    "encoded": true
24.                },
25.                {
26.                    "title": XX.Title3,
27.                    "width": "100px",
28.                    "field": "deliveryDate",
29.                    "format": "{0: yyyy/MM/dd}",
30.                    "filterable": true,
31.                    "encoded": true
32.                },
33.                {
34.                    "title": XX.Title4,
35.                    "width": "200px",
36.                    "field": "customer.userName",
37.                    "filterable": true,
38.                    "encoded": true
39.                },
40.                {
41.                    "title": XX.Title5,
42.                    "template": "#=totalRequested()# EUR",
43.                    "field": "totalRequested()",
44.                    "filterable": true,
45.                    "encoded": true
46.                }],
47.                "groupable": true,
48.                "pageable": {
49.                    "input": true,
50.                    "refresh": true,
51.                    "pageSizes": [2, 5, 10, 100],
52.                    "buttonCount": 10
53.                },
54.                "scrollable": {
55.                    "virtual": true
56.                },
57.                "sortable": true,
58.                "selectable": "Single, Row",
59.                "toolbar": [{
60.                    "template": '...here is an HTML with toolbar; nothing valuable to solve grouping problem...'
61.                }],
62.                "dataSource": {
63.                    "transport": {
64.                        "read": function (options) {
65.                            getOrders(options);
66.                        },
67.                    },
68.                    "schema": {
69.                        "groups": [{
70.                            "field": "number"
71.                        }],
72.                        "data": "data",
73.                        "total": "total"
74.                    },
75.                    "pageSize": 10,
76.                    "serverPaging": true,
77.                    "serverSorting": true,
78.                    "serverFiltering": true,
79.                    "serverGrouping": true, //why its not working?
80.                    "serverAggregates": true,
81.                    "error": XX.OrderGrid_Error
82.                }
83.            });

When I fire my application, I am trying drag'n'drop column header to "Drop column header here" box, but it seems like this functionality was disabled.

Maybe I am missing some section in kendoGrid constructor, or maybe I wrote some unnecessary data?

[Alexander Valchev]

Hi Michal,

I believe that the problem comes from the schema configuration - the groups property can be defined as function or string and is intended to indicate the field from the server response which contains the groups. Please see the corresponding documentation:

• http://docs.kendoui.com/api/framework/datasource#configuration-schema.groups
  
  

The group option on the other hand is not part of the schema and is used for setting the default DataSource grouping fields.

• http://docs.kendoui.com/api/framework/datasource#configuration-group
  
  

It seems that you have mistaken those two different configuration options.

Regards,
Alexander Valchev
Telerik

[Michal]

Ok, I understand, but when I remove lines 69-71 and 79 in order to set at least client-side grouping - It is still not working. (To be precise - I have also corrected my mistakes according to Your instructions with server grouping and still no effect)

The problem is with enabling drag'n'drop column headers in Grid interface, just like line 47 was not enough to enable it. When I try to drag column header - there is no visible action instead of animating header block dragging.

[Alexander Valchev]

Hi Michal,

Could you please prepare a small but runnable sample with mock data which isolates the issue? In this way we will be able to reproduce the issue you experienced on our side, examine what exactly is going wrong and provide you with a concrete recommendations.
Please send us such project and we will check it right away.

To learn how to get most of your Kendo UI Support please check this blog post:

• http://www.kendoui.com/blogs/teamblog/posts/13-09-24/how-to-get-the-most-out-of-your-kendo-ui-support.aspx
  
  

Regards,
Alexander Valchev
Telerik

[Michal]

I think I know what the problem is: using grid with durandalJS induces unability to drag'n'drop column header. 

When I copy&paste grid code from this example:

http://demos.kendoui.com/web/grid/index.html

to my project - there is exactly the same issue with drag'n'drop. 


How does Kendo handle this drag'n'drop functionality? I guess There are implemented jQuery event listeners in kendo script library, which are operating with the DOM, am I right? Problem is that, when kendo libs are linked, HTML div containing grid is not created by durandal yet, so library events aren't fire...

[Alexander Valchev]

Hi Michal,

I am not an expert in DurandalJS but the reason you pointed out sounds reasonable.
The problem might occur if the Grid is initialized before its element is appended to the DOM. I suppose that there is some Durandal event which fires when the DOM modifications are finished. Could you please search for such event and try to initialize the Grid on it?

Regards,
Alexander Valchev
Telerik

[Michal]

Durandal is loading its views in a specific event cycle;

 every control-initializing scripts, which are working with DOM, should be placed in "Attached" event (at this "step" of a durandal cycle all HTML elements are created on page, so initializing scripts can do its job). I am doing it correctly because this is the only possible way to do this.

But I think, its not a point; Initializing control is one thing, but dragging behaviour is probably set in Kendo library, which I am linking at start of the application, with jQuery and so on. One thing is strange - sorting works, refresh button, paging, scrolling works too, but drag'n'drop and filtering - not...

I have no Idea what to do... Maybe there are so many incompatibilities between kendo UI and DurandalJS that is almost impossible?

[Alexander Valchev]

Hi Michal,

Thank you for the provided information.
We are not sure what exactly is going wrong. As an assumption, could you please verify if your project uses supported by Kendo UI jQuery version (v1.9.1)?

Regards,
Alexander Valchev
Telerik

[Michal]

Yep - its ver 1.9.1;

[Alexander Valchev]

Hi Michal,

I tried to reproduce the behavior in a sample app but to no avail. Here are the steps which I performed:

1. Downloaded latest Durandal HTML started kit from here.
2. Added kendo.all.min.js file in lib/kendo folder, added Kendo UI CSS files in the index page.
3. Edited app/viewmodels/flikr.js file and pasted the initialization code from the demo in the attached event, added div with ID grid in the respective view.

For your convenience I attached the project. Could you please check it and let me know what I am missing?

Regards,
Alexander Valchev
Telerik

[Michal]

It just works :). Obviously not as a local web page (due to no permission to load local html (shell.html) file by XHR in requireJS), but on a web server (for example in empty asp.net project on IIS).

Grid is working fine with drag'n'drop; the only difference between this project and mine is a durandal version (my project uses older durandalJS v.2.0.0);

I just need to upgrade durandal version :).

Thanks a lot for help - problem is solved