Kendo UI jQuery Extended Grid

The grid in Kendo UI for jQuery offers options for editing its data in a popup dialog. The popup dialog should be provided as a widget regardless of the grid in the framework. Thus, the edit dialog could be easily implemented by application developers.

HTML

<!DOCTYPE html>
<html>
  <head>
    <style>
      html {
        font-size: 14px;
        font-family: Arial, Helvetica, sans-serif;
      }
    </style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.2.513/styles/kendo.default-v2.min.css" />
    <script src="https://kendo.cdn.telerik.com/2020.2.513/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2020.2.513/js/kendo.all.min.js"></script>
  </head>
  <body>
    <div id="example">
      <p>Extended Grid</p>
      <div id="info"></div>
      <div id="grid"></div>
    </div>
    <script>
      $(document).ready(function() {
        let $info = $('#info');
        $('#grid').kendoGridEx({
          toolbar: ["info"],
          columns: [{
              selectable: true
            },
            {
              field: "name"
            }
          ],
          dataSource: [{
            id: 1,
            name: "Jane Doe"
          }, {
            id: 2,
            name: "John Doe"
          }],
          change: function(e) {
            $info.html("change");
          },
          dataBound: function(e) {
            $info.html("dataBound");
          }
        });

        var grid = $("#grid").getKendoGridEx();
        //grid.select("tr:eq(0), tr:eq(1)");

        $(".k-grid-info", grid.wrapper).on("click", function() {
          var rows = grid.select();
          var items = [];
          $(rows).each(function() {
            items.push($(this).attr("data-uid"))
          });
          $info.html(JSON.stringify(items));
        });
      });
    </script>
  </body>
</html>

JavaScript

// ReSharper disable All
(function($, kendo) {

  'use strict';

  var ui = kendo.ui,
    Grid = ui.Grid,
    extend = $.extend;
kendo.ui.Grid.fn._checkboxClick =  function(e) {
          var that = this,
              row =  $(e.target).closest("tr"),
              isSelecting = !row.hasClass('k-state-selected');

          if(!that.dataSource.getByUid(row.attr('data-uid'))) {
            return;
          }

          if (isSelecting) {
            that.select(row);
          } else {
            that._deselectCheckRows(row);
          }
        }

        kendo.ui.Grid.fn._headerCheckboxClick  = function(e) {
            var that = this,
                checkBox = $(e.target),
                checked = checkBox.prop("checked");

            if (!that.thead.find(checkBox).length) {
                return;
            }

            if (checked) {
              that.items().each((_,x)=> that.select($(x)))
               // that.select(that.items());
            } else {
                that.clearSelection();
            }
        }
        
  var GridEx = Grid.extend({

    init: function(element, options) {
      var that = this;
      
      Grid.fn.init.call(that, element, options);

      that._toolbarPosition();
    },

    destroy: function() {
      var that = this;
      Grid.fn.destroy.call(that);
    },

    options: {
      name: 'GridEx',
      toolbarPosition: 'bottom' // 'bottom', 'top'
    },

    _toolbarPosition: function() {
    	var that = this;
      if (that.options.toolbarPosition.match(/^bottom$/i)) {
        // place the toolbar under the content of the Grid
        $('.k-grid-toolbar', that.wrapper).insertAfter($('.k-grid-content', that.wrapper));
      }
    }
  });

  ui.plugin(GridEx);

})(jQuery, kendo);