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

Can't drag column headers to group by

12 Answers 517 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Tim
Top achievements
Rank 1
Tim asked on 28 Nov 2012, 12:57 AM
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.

12 Answers, 1 is accepted

Sort by
0
Nikolay Rusev
Telerik team
answered on 29 Nov 2012, 08:26 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Bibin
Top achievements
Rank 1
answered on 13 Dec 2012, 01:59 PM
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.
0
Nikolay Rusev
Telerik team
answered on 13 Dec 2012, 05:13 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Bibin
Top achievements
Rank 1
answered on 13 Dec 2012, 07:17 PM
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
0
Nikolay Rusev
Telerik team
answered on 17 Dec 2012, 09:01 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Bibin
Top achievements
Rank 1
answered on 17 Dec 2012, 01:10 PM
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.
0
Bibin
Top achievements
Rank 1
answered on 17 Dec 2012, 01:16 PM
Here is the video demo of what is going on.
0
Nikolay Rusev
Telerik team
answered on 19 Dec 2012, 09:41 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Bibin
Top achievements
Rank 1
answered on 20 Dec 2012, 06:46 PM
Thanks a lot !! This fixed a major issue I was having with the grid.
0
Web Monkey
Top achievements
Rank 1
answered on 16 Jan 2013, 11:48 PM
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!
0
Nikolay Rusev
Telerik team
answered on 17 Jan 2013, 07:29 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Web Monkey
Top achievements
Rank 1
answered on 24 Jan 2013, 08:17 PM
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.
Tags
Grid
Asked by
Tim
Top achievements
Rank 1
Answers by
Nikolay Rusev
Telerik team
Bibin
Top achievements
Rank 1
Web Monkey
Top achievements
Rank 1
Share this question
or