Kendo grid with context menu

<!DOCTYPE html>
<html>

<head>
  <link data-require="kendo" data-semver="2013.3.716" rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css" />
  <link data-require="kendo" data-semver="2013.3.716" rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.rtl.min.css" />
  <link data-require="kendo" data-semver="2013.3.716" rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css" />
  <link data-require="kendo" data-semver="2013.3.716" rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.dataviz.min.css" />
  <link data-require="kendo" data-semver="2013.3.716" rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.dataviz.default.min.css" />
  <link data-require="kendo" data-semver="2013.3.716" rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.mobile.all.min.css" />
  <script data-require="jquery@1.9.x" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
  <script data-require="kendo" data-semver="2013.3.716" src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
  <link rel="stylesheet" href="style.css" type="text/css" />
  <script src="people.js"></script>
  <script src="script.js"></script>
  <script src="context-menu.js"></script>
  <meta charset="utf-8" />
  <title>KendoUI Template</title>
</head>

<body>
  <div id="example" class="k-content">
    <div id="grid"></div>
  </div>
  <div id="contextMenu" style="display:none">
    <ul>
      <li><a href="javascript:alert('click-1');">click-1</a></li>
      <li><a href="javascript:alert('click-2');">click-2</a></li>
    </ul>
  </div>
</body>

</html>

$(document).ready(function() {
  $("#grid").kendoGrid({
    dataSource: {
      data: createRandomData(50),
      pageSize: 10
    },
    groupable: true,
    sortable: true,
    pageable: {
      refresh: true,
      pageSizes: true
    },
    selectable: "multiple, row",
    change: function(e) {
      //createContextMenu(this.select());
      /*var selectedRows = this.select();
      var selectedDataItems = [];
      for (var i = 0; i < selectedRows.length; i++) {
        var dataItem = this.dataItem(selectedRows[i]);
        selectedDataItems.push(dataItem);
      }
      // selectedDataItems contains all selected data items
      */
      
    },
    columns: [{
      field: "FirstName",
      width: 90,
      title: "First Name"
    }, {
      field: "LastName",
      width: 90,
      title: "Last Name"
    }, {
      width: 100,
      field: "City"
    }, {
      field: "Title"
    }, {
      field: "BirthDate",
      title: "Birth Date",
      template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #'
    }, {
      width: 50,
      field: "Age"
    }]
  });
});

#contextMenu {
  width: 100px;
  height: 150px;
  background: green;
  position: absolute;
}

var firstNames = ["Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert", "Laura", "Anne", "Nige"],
    lastNames = ["Davolio", "Fuller", "Leverling", "Peacock", "Buchanan", "Suyama", "King", "Callahan", "Dodsworth", "White"],
    cities = ["Seattle", "Tacoma", "Kirkland", "Redmond", "London", "Philadelphia", "New York", "Seattle", "London", "Boston"],
    titles = ["Accountant", "Vice President, Sales", "Sales Representative", "Technical Support", "Sales Manager", "Web Designer",
    "Software Developer", "Inside Sales Coordinator", "Chief Techical Officer", "Chief Execute Officer"],
    birthDates = [new Date("1948/12/08"), new Date("1952/02/19"), new Date("1963/08/30"), new Date("1937/09/19"), new Date("1955/03/04"), new Date("1963/07/02"), new Date("1960/05/29"), new Date("1958/01/09"), new Date("1966/01/27"), new Date("1966/03/27")];

function createRandomData(count) {
    var data = [],
        now = new Date();
    for (var i = 0; i < count; i++) {
        var firstName = firstNames[Math.floor(Math.random() * firstNames.length)],
            lastName = lastNames[Math.floor(Math.random() * lastNames.length)],
            city = cities[Math.floor(Math.random() * cities.length)],
            title = titles[Math.floor(Math.random() * titles.length)],
            birthDate = birthDates[Math.floor(Math.random() * birthDates.length)],
            age = now.getFullYear() - birthDate.getFullYear();

        data.push({
            Id: i + 1,
            FirstName: firstName,
            LastName: lastName,
            City: city,
            Title: title,
            BirthDate: birthDate,
            Age: age
        });
    }
    return data;
}

function generatePeople(itemCount, callback) {
    var data = [],
        delay = 25,
        interval = 500,
        starttime;

    var now = new Date();
    setTimeout(function() {
        starttime = +new Date();
        do {
            var firstName = firstNames[Math.floor(Math.random() * firstNames.length)],
                lastName = lastNames[Math.floor(Math.random() * lastNames.length)],
                city = cities[Math.floor(Math.random() * cities.length)],
                title = titles[Math.floor(Math.random() * titles.length)],
                birthDate = birthDates[Math.floor(Math.random() * birthDates.length)],
                age = now.getFullYear() - birthDate.getFullYear();

            data.push({
                Id: data.length + 1,
                FirstName: firstName,
                LastName: lastName,
                City: city,
                Title: title,
                BirthDate: birthDate,
                Age: age
            });
        } while(data.length < itemCount && +new Date() - starttime < interval);

        if (data.length < itemCount) {
            setTimeout(arguments.callee, delay);
        } else {
            callback(data);
        }
    }, delay);
}

$(document).ready(function() {
  var grid = $("#grid").data("kendoGrid"),
    close = function() {
      $('#contextMenu').hide();
      $(document).off("mousedown");
      $('#contextMenu').off("click");
    };

  $(grid.tbody).on("contextmenu", '>tr:not(.k-grouping-row)', function(e) {
    selectRow(e);
    showContextMenu(e);
    stopPropagation(e);
  });

  function selectRow(e) {
    if ($(e.currentTarget).hasClass('k-state-selected')) return;
    else {
      grid.clearSelection();
      grid.select(e.currentTarget);
    }
  }

  function showContextMenu(e) {
    var offset = {
      top: e.pageY,
      left: e.pageX
    },
      bottom = $(window).scrollTop() + $(window).height(),
      right = $(window).scrollLeft() + $(window).width(),
      height = $('#contextMenu').height(),
      width = $('#contextMenu').width();

    if (offset.top + height > bottom) {
      offset.top -= height;
    }

    if (offset.left + width > right) {
      offset.left -= width;
    }
    $("#contextMenu").css(offset).show();
    e.preventDefault();
  }

  function stopPropagation(e) {
    $(document).on("mousedown", close);
    $('#contextMenu').on("click", close);
  }

  $('#contextMenu').on('contextmenu', function(e) {
    e.preventDefault();
  });

  $("#contextMenu").on('mousedown', function(e) {
    e.stopPropagation();
  });
})