Grid Extension - Causing loss of groupable and reordable functionality

14 posts, 0 answers
  1. Tim
    Tim avatar
    16 posts
    Member since:
    Jul 2012

    Posted 08 Mar 2013 Link to this post


    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

  2. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 12 Mar 2013 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Tim
    Tim avatar
    16 posts
    Member since:
    Jul 2012

    Posted 18 Mar 2013 Link to this post

    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()

  5. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 19 Mar 2013 Link to this post

    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!
  6. Tim
    Tim avatar
    16 posts
    Member since:
    Jul 2012

    Posted 25 Mar 2013 Link to this post

    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,

  7. Tim
    Tim avatar
    16 posts
    Member since:
    Jul 2012

    Posted 25 Mar 2013 Link to this post



    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
    });



  8. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 26 Mar 2013 Link to this post

    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!
  9. Tim
    Tim avatar
    16 posts
    Member since:
    Jul 2012

    Posted 26 Mar 2013 Link to this post

    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,


  10. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2285 posts

    Posted 27 Mar 2013 Link to this post

    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!
  11. Tim
    Tim avatar
    16 posts
    Member since:
    Jul 2012

    Posted 28 Mar 2013 Link to this post

    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(){}
    });
     
     

  12. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2285 posts

    Posted 01 Apr 2013 Link to this post

    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!
  13. Tim
    Tim avatar
    16 posts
    Member since:
    Jul 2012

    Posted 02 Apr 2013 Link to this post

    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.
















  14. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2285 posts

    Posted 04 Apr 2013 Link to this post

    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!
  15. Mohan
    Mohan avatar
    15 posts
    Member since:
    Apr 2011

    Posted 19 Jul 2013 Link to this post

    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
Back to Top
Kendo UI is VS 2017 Ready