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

Grid Extension - Causing loss of groupable and reordable functionality

13 Answers 203 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Tim
Top achievements
Rank 1
Tim asked on 08 Mar 2013, 11:20 PM

Hi,

I have extended my Kendo UI Grid with the kendo.ui.Grid.extend/kendo.ui.plugin functionality as per this article:

http://www.aspnetwiki.com/page:kendo-ui-grid-export-excel

Everything works great except it causes the loss of grouping and reordering  - the Drag and Drop no longer works.

I suspect it may have to do with the  shift from:
$("#myGrid").data("kendoGrid");
to

$("#myGrid").data("kendoExcelGrid");

or is there something else going on with the Drag and Drop?


Cheers,

Kori

13 Answers, 1 is accepted

Sort by
0
Petur Subev
Telerik team
answered on 12 Mar 2013, 03:00 PM
Hello Kori,

I would suggest you to check the code-library article which we created that shows how to export the Grid to Excel. Using the approach there (the link below) seems a little bit shorter to me and should not cause any issues of that kind you mentioned.

http://www.kendoui.com/code-library/mvc/grid/export-grid-to-excel.aspx

Kind Regards,
Petur Subev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Tim
Top achievements
Rank 1
answered on 18 Mar 2013, 07:19 PM
Thank you for a non applicable answer Peter.

As you can see, I am not using Kendo UI MVC, so and Kendo UI MVC example is of no use and does not address the problem.


Kendo UI Web Grid has the functionality to be extended.  Why does an extension cause a loss of grouping and reordering?

i.e kendo.ui.Grid.extend()

0
Atanas Korchev
Telerik team
answered on 19 Mar 2013, 08:51 AM
Hello Kori,

 The web site http://www.aspnetwiki.com does not contain official Kendo UI documentation and we cannot comment why the code demonstrated there doesn't work. We recommend contacting the maintainer of that web site.

 Here is a short demo showing how grouping and reordering works when extending the Grid: http://jsbin.com/eluyex/2/edit

All the best,
Atanas Korchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Tim
Top achievements
Rank 1
answered on 25 Mar 2013, 10:37 PM
Thanks Antanas!

I found the culprit.  The extension works fine with the reorderable, groupable.

I reuse my grid by clearing the data beforehand:

$grid = $("#grid");
       if ($grid.length > 0 && $grid.data().kendoExcelGrid) {
           var thisKendoGrid = $grid.data().kendoExcelGrid;
 
           if (thisKendoGrid.dataSource) {
               $grid.removeData('kendoExcelGrid');
               $grid.empty();
           }
       }
This stripped the reorderable, groupable functionality.

I will investigate how to get around this.


Cheers,

0
Tim
Top achievements
Rank 1
answered on 25 Mar 2013, 11:36 PM


The groupable and reorderable functionality is lost between release 2012.2.913 and 2012.3.1315.


If I switch the css and script links to the older code then all of the functionality for the grid works.

Below is sample code that will fail in release 2012.3.1315:

(function ($) {
   
  var ExcelGrid = kendo.ui.Grid.extend({
  options: {
    name: "ExcelGrid"
  },
   exportToExcel: function () {
            var that = $("#DataTable").data("kendoExcelGrid"); 
            // Define the data to be sent to the server to create the spreadsheet.
 
            data = {
                model: JSON.stringify(that.columns),
                data: JSON.stringify(that.dataSource.data().toJSON()),
                title: that.options.exporting.title
 
            };
 
            // Create the spreadsheet.
            $.post(location.href + that.options.exporting.createUrl, data, function () {
                // Download the spreadsheet.
 
                window.location.replace(kendo.format("{0}?title={1}",
                    location.href + that.options.exporting.downloadUrl,
                   that.options.exporting.title));
 
            });
        }
});
 
kendo.ui.plugin(ExcelGrid);
   
  })(jQuery);
 
 
 
 
$("#grid").kendoExcelGrid({
  dataSource: [ {
    foo: "foo",
    bar: "bar"
  }],
  groupable: true,
  reorderable: true
});
 
 
 $grid = $("#grid");
        if ($grid.length > 0 && $grid.data().kendoExcelGrid) {
            var thisKendoGrid = $grid.data().kendoExcelGrid;
 
            if (thisKendoGrid.dataSource) {
                $grid.removeData('kendoExcelGrid');
                $grid.empty();
            }
        }
 
 
$("#grid").kendoExcelGrid({
  dataSource: [ {
    foo: "foo",
    bar: "bar"
  }],
  groupable: true,
  reorderable: true
});



0
Atanas Korchev
Telerik team
answered on 26 Mar 2013, 07:25 AM
Hello Kori,

 My example is using 2012.3.1315. Can you modify it so it mimics your exact scenario? Also have you tried using the destroy method of the grid? I guess you trying to achieve the same with empty() and removeData().

Kind regards,

Atanas Korchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Tim
Top achievements
Rank 1
answered on 26 Mar 2013, 03:40 PM
Hi Atanas,

I am aware that your example uses 2012.3.1315.

The code example I have provided works in 2012.2.913 but not 2012.3.1315.

Your example works fine in either, but does not provide an indication of why there is an issue.

I dynamically create an extended grid, along with a new datasource and model.  The removeData() and empty() clear the grid and allow for a new one to be instantiated.

The problem is that reordering and grouping fail to be re-instantiated in 2012.3.1315.

Please test 2012.2.913 and 2012.3.1315 with the code sample I included to see what I mean.

The grid.destroy(); does not work in any scenario that I have tested for a dynamic grid - hence the removeData() and empty().

Cheers,


0
Nikolay Rusev
Telerik team
answered on 27 Mar 2013, 09:05 AM
Hello Kori,

The proper way of destroying previous widget instance is to call its destroy method. However it seems that some handlers(related to reorderable feature) remains unattached. This will be fixed in one of the next internal builds.

As a temporary solution you can manually call jQuery .off for the grid element. This will remove all handlers left after destroy. Here is a sample for this: http://jsbin.com/eluyex/10/edit

Related code:
thisKendoGrid.destroy(); //<-- call Grid `destroy` method
$grid.off(); //<-- detach any handlers left


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
Tim
Top achievements
Rank 1
answered on 28 Mar 2013, 03:54 PM
Hi Nikolay,

The following code works for dynamically generating an extended grid in 2012.3.1315:
However .destroy() and .off() are insufficient, and require a grid.thead.remove(); in order to work properly.

BUT when the following is implemented in a splitter the filter dialogs fail to work and the grid fails to resize to its container.  So the snippet works, but some combination with other Kendo UI elements causes my code to fail in 2012.3.1315 (but not 2012.2.913).  Headache.

<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
   
<link href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
 
 
 
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div id="grid"></div>
  <script type="text/x-kendo-template" id="template">
                <div class="tabstrip">
                    <ul>
                        <li class="k-state-active">
                           Orders
                        </li>
                        <li>
                            Contact Information
                        </li>
                    </ul>
                    <div>
                        <div class="orders"></div>
                    </div>
                     
                </div>
 
            </script>
</body>
</html>

(function ($) {
    //var kendo = window.kendo;
 
    var ExcelGrid = kendo.ui.Grid.extend({
        options: {
            name: "ExcelGrid"
        },
 
        exportToExcel: function () {
            var that = $("#grid").data("kendoExcelGrid"); 
            // Define the data to be sent to the server to create the spreadsheet.
 
            data = {
                model: JSON.stringify(that.columns),
                data: JSON.stringify(that.dataSource.data().toJSON()),
                title: that.options.exporting.title
 
            };
 
            // Create the spreadsheet.
            $.post(location.href + that.options.exporting.createUrl, data, function () {
                // Download the spreadsheet.
 
                window.location.replace(kendo.format("{0}?title={1}",
                    location.href + that.options.exporting.downloadUrl,
                   that.options.exporting.title));
 
            });
         
        }
    });
 
    kendo.ui.plugin(ExcelGrid);
})(jQuery);
 
 
var columns1 = [{field: "orderId",format:null, hidden:false, template: null, title: "orderId", type: "number", width:250 },{field: "customerName",format:null, hidden:false, template: null, title: "customerName", type: "string", width:250 } ]
 
var model1 = kendo.data.Model.define({
  id:  "orderId", fields:  {"orderId": { type:"number" }, "customerName": { type:"string" }}
});
 
 
var orders1 = [ { orderId: 10248, customerName: "Paul Smith" }, { orderId: 10249, customerName: "Jane Jones" }];
DataGridDataSource1 = new kendo.data.DataSource({
  data: orders1,
  schema: {
    model: model1
  }
});
 
$("#grid").kendoExcelGrid({
  dataSource: DataGridDataSource1,
  columns: columns1,
  groupable: true,
  reorderable: true,
   filterable: true,
  resizable: true,
  scrollable: {
    virtual: false
  },
  sortable: true,
  selectable: "multiple",
  change: function () {},
  detailTemplate: kendo.template($("#template").html()),
  detailInit: function(){}
   
});
  
var grid = $("#grid").data("kendoExcelGrid");
grid.columns = []; //reset columns
grid.thead.remove(); //reset the header
var $grid = $("#grid");
 
var thisKendoGrid = $grid.data().kendoExcelGrid;
thisKendoGrid.destroy();
$grid.off();
  
 
            
 
 
var columns2 = [{field: "newId",format:null, hidden:false, template: null, title: "newId", type: "number", width:250 },{field: "Job",format:null, hidden:false, template: null, title: "Job", type: "string", width:250 }   ,{field: "Name",format:null, hidden:false, template: null, title: "Name", type: "string", width:250 }   ]
 
 
var model2 = kendo.data.Model.define({
  id:  "newId",  fields:  {"newId": { type:"number" }, "Job": { type:"string" }, "Name": { type:"string" }}
});
 
var orders2 = [ { newId: 10249, Job: "Handyman", Name: "George Smith" }, { newId: 10249, Job: "President", Name: "Jane Jones" }];
 
var DataGridDataSource2 = new kendo.data.DataSource({
  data: orders2,
  schema: {
    model: model2
  }
});
 
 
 
 
 
 
$("#grid").kendoExcelGrid({
  dataSource:DataGridDataSource2,
  columns: columns2,
  groupable: true,
  reorderable: true,
  filterable: true,
  resizable: true,
  //pageable: true,
  scrollable: {
    virtual: true
  },
  sortable: true,
  selectable: "multiple",
  change: function () {},
  detailTemplate: kendo.template($("#template").html()),
  detailInit: function(){}
});
 
 

0
Nikolay Rusev
Telerik team
answered on 01 Apr 2013, 06:52 AM
Hello Kori,

When the grid is initialized from html it will attempt to infer the columns definition. This will result the odd behavior that you observe. In such scenarios I suggest you to clean the html of the grid after destroy. i.e:

thisKendoGrid.destroy();
thisKendoGrid.wrapper.off().empty();


Here is an updated example: http://jsbin.com/ajicux/5/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
Tim
Top achievements
Rank 1
answered on 02 Apr 2013, 04:28 PM
Hi Nikolay,

Testing reveals the following:

with:
jquery-1.7.1.min.js
2012.2.913/kendo.all.min.js
var $grid = $("#DataTable");
        if ($grid.length > 0 && $grid.data().kendoExcelGrid) {
            var thisKendoGrid = $grid.data().kendoExcelGrid;        
            if (thisKendoGrid.dataSource) {
                 
                $grid.removeData('kendoExcelGrid');
                $grid.empty();
                 
            }
        }
Clears the grid and allows for reordering, grouping, sorting etc.

with:
jquery-1.8.2.min.js

Seems to cause unexpected behavior with the grid resizing to its container.
Loss of grouping, reordering with 2012.2.913/kendo.all.min.js

2012.3.1315/kendo.all.min.js loses grouping, reordering, even with
var thisKendoGrid = $grid.data().kendoExcelGrid;
 
            thisKendoGrid.destroy();
            thisKendoGrid.wrapper.off().empty();

I have tried all permutations and their seems to be some issues with the jquery release as well as the newer release of kendo.

I am sticking with 2012.2.913.
















0
Nikolay Rusev
Telerik team
answered on 04 Apr 2013, 07:25 AM
Hello Kori,

Why not update to 2013 Q1 Release? It seems to be working in your scenario

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
Mohan
Top achievements
Rank 1
answered on 19 Jul 2013, 01:07 PM
The Grid extensions work good,, however after we deployed the Excel extension code to production, we found that some of our users were not able to even view the landing page where the grid resided in IE - 8.   I am struggling to get around this issue. 

It complained about "SCRIPT1028: Expected identifier, string or number "  and blank screen at the following line...

Please help...

........... 
           filterable: true
                } 
            ],
            export: {
                cssClass: "k-grid-export-image",
                title:  title  + "-" +  customerno , 
                createUrl: "/ExecutiveDashBoard/Home/ExportToExcel",
                downloadUrl: "/ExecutiveDashBoard/Home/GetExcelFile"
            },
            change: ontrafficMongridChange 
            //dataBound: ontrafficMonGridDatabound
Tags
Grid
Asked by
Tim
Top achievements
Rank 1
Answers by
Petur Subev
Telerik team
Tim
Top achievements
Rank 1
Atanas Korchev
Telerik team
Nikolay Rusev
Telerik team
Mohan
Top achievements
Rank 1
Share this question
or