Can't drag column headers to group by

[Tim]

I've created a grid with Ajax datasource and set 'Groupable()', but when I try to group by the first column (a text field), the field has the circle with a cross icon (not allowed) and can't be dropped in the 'Drag a column header here....' area.

I have also set grouping to default to the first columns, which works, but if I remove that grouping (by clicking on the close icon for the column header), grouping is cancelled and I can't drag it back.

[Nikolay Rusev]

Hello Tim,

We are not aware of such issue. We will need runnable application which demonstrates the behavior, so we can assist you further.

Regards,
Nikolay Rusev
the Telerik team

[Bibin]

This may be related to another open issue with the grid. Grid for some reason allow you to group only on columns which you have set as groupable in the datasource. This can be easily replicated by loading the grid, the group by one or two columns. Reload the grid without refreshing the page, then try grouping. The grid will allow you to group only on columns we grouped initially. This is a behavior is Chrome and JQuery 1.8.3.

[Nikolay Rusev]

Hello Bibin,

Can you please explain what you mean by "..Reload the grid..". Here is a sample which attempts to replicate the described behavior without any luck. Can you modify it so the behavior can be observed?
http://jsbin.com/akonid/1/edit

Regards,
Nikolay Rusev
the Telerik team

[Bibin]

Nikoley,

The issue is reproduced in the JSBin. This is how to run the code. 
Add 'Foo' to the grouping header. Then click on the reload button. Now try to drag bar to the header.

Thanks,
Bibin

[Nikolay Rusev]

Hello Bibin,

Here is a short video capture in Chrome Version 23.0.1271.97 m using the fiddle from my last post.
http://screencast.com/t/hX04s5ZqC

Regards,
Nikolay Rusev
the Telerik team

[Bibin]

Replace the JS code with this one -

function loadGrid() {
  $("#grid").kendoGrid({
    dataSource: {
        data: [{foo:1, bar: "bar 1"},{foo:2, bar: "bar 2"}]
    },
    columns: ["foo", "bar"],
    groupable: true
  });
}
  $("button").click(function() {
    loadGrid();
  });

Now click the Relaod button once to load the grid. Then drag foo to group. Then click on reload again and try dragging bar to the grid.

[Bibin]

Here is the video demo of what is going on.

[Nikolay Rusev]

Hello Bibin,

That is way different from the scenario in the sample. In your case you are initializing the widget multiple times over same element without destroying the previous instance.

The correct implementation in this case should be:

$("button").click(function() {
     var grid = $("#grid").data("kendoGrid");

     if (grid) {
      //destroy the previous Grid instance
       grid.destroy();
       //clean up the html
       grid.wrapper.html("");
     }

     loadGrid();
   });

However you will also need to download latest internal build as it contains some fixes on how Grid widget is destroyed.

Regards,
Nikolay Rusev
the Telerik team

[Bibin]

Thanks a lot !! This fixed a major issue I was having with the grid.

[Web Monkey]

I think it's worth noting that there *is* a problem here when using an earlier Kendo release.

If you try this example using http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js you will replicate the issue. The Grouping area appears but column headers cannot be dragged there.

Using http://cdn.kendostatic.com/2012.3.1024/js/kendo.web.min.js fixes the issue.

That just took me a while to figure out!

[Nikolay Rusev]

Hello,

In version 2012.2.710 there wasn't concept for destroying a widget implemented. If you need to destroy a widget you will have to use more recent version.

All the best,
Nikolay Rusev
the Telerik team

[Web Monkey]

Hi,

There are two issues here;

1) Destroying a widget and using Group headers (original post)
2) Using Group headers with Kendo 2012.2.71 (Header dragging doesn't work)

Number 2 is an issue even without destroying any widgets;

Your original basic example;
http://jsbin.com/akonid/1/edit

Can easily be updated (downgraded) from kendo v.2012.3.1114 to v.2012.2.710 in order to demonstrate the Group header dragging not working;

http://jsbin.com/akonid/12/edit

I just wanted to prevent other people wasting time on this issue since they can simply update their Kendo library to fix the problem.

Regards.