We Keep Coding

Uncaught TypeError: e(...).parents(...).andSelf on Kendo UI Grid

I'm having problem with using Kendo UI Grid whenever I click on add new button it always produce this script error.
This is the code that I'm using:
dataSource = new kendo.data.DataSource({
batch: true,
pageSize: 20,
transport: {
read: {
url: 'SaladEntry/GetSupport2/',
dataType: "json"
},
destroy: {
url: 'SaladEntry/DeleteSupportKendo2/',
type: "POST",
contentType: 'application/json'
},
create: {
url: 'SaladEntry/SaveSupportKendo2/',
type: "POST",
contentType: 'application/json',
complete: function (e) {
SupportGrid();
}
},
update: {
url: 'SaladEntry/EditSupportKendo2/',
type: "POST",
contentType: 'application/json',
complete: function (e) {
SupportGrid();
}
},
parameterMap: function (options, operation) {
if (operation == "read") {
return saladparamObj;
}
else {
options.models[0].CountryNo = $('#Country_No').val();
var SaladParamSerialized = JSON.stringify(options.models);
return SaladParamSerialized;
}
}
},
schema: {
model: {
id: "PK",
fields: {
CountryNo: { editable: true, nullable: true },
EffectiveDate: { type: "date" },
stringEffectiveDate: { type: "string" },
ScaleMin: { validation: { required: true } },
ScaleMax: { validation: { required: true } },
Currency: { type: "string" }
}
}
},
sort: {
field: "stringEffectiveDate",
dir: "desc",
compare: function (a, b, dir) {
return kendo.parseDate(a.EffectiveDate) - kendo.parseDate(b.EffectiveDate);
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 300,
toolbar: ["create"],
columns: [
{
field: "stringEffectiveDate", title: "Date",
template: "#= kendo.toString(kendo.parseDate(EffectiveDate, 'yyyy-MM-dd'), 'yyyy-MM-dd') #", width: "100px",
sortable: {
allowUnsort: false,
compare: function (a, b, dir) {
return kendo.parseDate(a.EffectiveDate) - kendo.parseDate(b.EffectiveDate);
}
}
},
{ field: "EffectiveDate", title: "Effective Date", template: "#= kendo.toString(kendo.parseDate(EffectiveDate, 'yyyy-MM-dd'), 'yyyy-MM-dd') #", width: "100px" },
{ field: "ScaleMin", title: "BG1 Min", width: "100px" },
{ field: "ScaleMax", title: "BG7 Max", width: "100px" },
{ field: "Currency", title: "Currency", width: "100px" },
{ command: ["edit", "destroy"], title: "Commands", width: "160px" }
],
height: 300,
scrollable: true,
sortable: true,
filterable: true,
pageable: true,
resizable: true,
selectable: true,
editable: "popup",
cancel: function (e) {
nEdit();
},
edit: function(e) {
e.container.find(".k-edit-label:first").hide();
e.container.find(".k-edit-field:first").hide();
if (!e.model.isNew()) {
var dt = e.container.find("input[name=EffectiveDate]").data("kendoDatePicker");
dt.enable(false);
}
}
}).css("background-color", "#C7D6A7");
No popup modal shown when I click on Add or Edit button. Below is the screenshot of my view.

.andSelf was removed in jQuery 3.0. You are referencing 3.1.1. You'll have to downgrade jQuery or find an update for Kendo.

Kendo UI JS grid editing cells won't work and gives no error

When I press any of the cells the cell get focused but I can't type anything in the field. I also get no console errors whatsoever. Here is the code:
$(document).ready(function () {
datasource = new kendo.data.DataSource({
transport: {
read: {
url: '/DiscountPromotion/Get',
dataType: "json",
},
update: {
url: '/DiscountPromotion/Update',
dataType: "json",
type: "POST",
contentType: "application/json"
},
destroy: {
url: '/DiscountPromotion/Delete',
dataType: "json",
type: "POST",
contentType: "application/json"
},
create: {
url: '/DiscountPromotion/Add',
dataType: "json",
type: "POST",
contentType: "application/json"
},
parameterMap: function(options, operation) {
if (operation !== "read") {
return JSON.stringify({ discountPromotionDto: options });
}
},
},
pageSize: 10,
schema: {
model: {
id: "Id",
fields: {
Id: { type: "number" },
Code: { type: "string" },
StartDate: { type: "date" },
EndDate: { type: "date" },
MinimumCost: { type: "number" },
MaximumCost: { type: "number" },
Quantity: { type: "number" },
CustomerId: { type: "number" },
CountryCode: { type: "string" },
Discount: { type: "number" },
ModelName: { type: "string" }
}
}
}
});
$("#discountpromotiongrid").kendoGrid({
dataSource: datasource,
batch: true,
toolbar: ["create", "save", "cancel"],
height: 400,
navigatable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [
{
field: "ModelName",
title: "ModelName",
editor: modelNameDropDown,
template: "#=ModelName#",
width: 150
},
{
field: "Code",
title: "PromotionCode",
width: 150
},
{
field: "StartDate",
title: "StartDate",
template: '#= kendo.toString(StartDate,"yyyy-MM-dd") #',
width: 120
},
{
field: "EndDate",
title: "EndDate",
template: '#= kendo.toString(EndDate,"yyyy-MM-dd") #',
format: "{0:yyyy-MM-dd}",
parseFormats: ["yyyy-MM-dd"],
width: 120
},
{
field: "MinimumCost",
title: "MinCost",
width: 100
},
{
field: "MaximumCost",
title: "MaxCost",
width: 100
},
{
field: "Quantity",
title: "Quantity",
width: 80
},
{
field: "CustomerId",
title: "CustomerId",
width: 80
},
{
field: "CountryCode",
title: "CountryCode",
width: 40
},
{
field: "Discount",
title: "Discount",
width: 40
},
{
command: "destroy",
title: " ",
width: 120
}],
editable: true
});
function modelNameDropDown(container, options) {
$('<input required data-text-field="ModelName" data-value-field="ModelName" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
optionLabel: "Select model...",
dataSource: {
serverFiltering: true,
transport: {
read: {
url: '/DiscountPromotion/GetModelNamesByCustomerId',
dataType: "json",
type: "POST",
contentType: "application/json"
}
}
}
});
}
Please help! I have no clue what could be wrong.
Here is an image of my grid and when I have pressed a cell. There marker never shows up in the cell so I can't type anything. And this occurs on all of them!

You need to add an edit command to your columns.
{
command: ["edit", "destroy"],
title: " ",
width: 120
}],
editable: "inline"

KendoUI Grid not working with RequireJS

I have:
require(['jquery', 'kendo'], function($, kendo){
var activeGrid = $('#incomeGrid');
var incomeSource = new kendo.data.DataSource({
sort: {
field: "date",
dir: "desc"
},
batch: true,
transport: {
read: {
url: 'core/income-grid/read',
dataType: 'json',
type: 'get'
},
update: {
url: 'core/income-grid/update',
dataType: 'json',
type: 'post'
},
create: {
url: 'core/income-grid/create/',
dataType: 'json',
type: 'post'
},
destroy: {
url: 'core/income-grid/destroy/',
dataType: 'json',
type: 'post'
}
},
error: function (e) {
alert(e.errorThrown + "\n" + e.status + "\n" + e.xhr.responseText);
},
schema: {
data: "data",
total: 'total',
model: {
id: 'id',
fields: {
typeId: {
type: 'number'
}
}
}
},
change: function (e) {
if (e.action == "itemchange" || e.action == "remove") {
if (!activeGrid.ctrlDown) {
this.sync();
}
}
}
});
activeGrid.kendoGrid({
dataSource: incomeSource,
autoBind: true,
height: 152,
pageable: false,
filterable: false,
toolbar: kendo.template($("#incomeToolBar").html()),
edit: function (e) {
var ddl = e.container.find('[data-role=dropdownlist]').data('kendoDropDownList');
if (ddl) {
ddl.open();
}
},
columns: [
{
title: 'Date added',
field: 'date',
width: '90px',
filterable: false,
template: '<span data-id="#=id#"><abbr title="">#=kendo.toString(date, "dd/MM/yyyy")#</abbr></span>'
}
],
editable: true,
sortable: true,
scrollable: true
}).data("kendoGrid");
})
But on the line that has:
activeGrid.kendoGrid({
I am getting the error:
Uncaught TypeError: undefined is not a function
Any idea how I can fix this? It's been driving me mad for the past four hours...

KendoUI Grid footer extras from returned JSON

I have the following JSON being returned from my PHP script to populate my Kendo grid:
data: [{id:1, sku:-, theName:Two tier wedding veil, basePrice:77.00, dimensions:-, weight:-,…},…]
querytime: "0.0000"
rowcount: 4
Which works great. As you can see I have added an extra parameter called "querytime".
How do I access that on the JS side of things so I can append that to the footer of the grid?
I have tried:
console.log($('#productGrid').data("kendoGrid").dataSource);
To try and find where my extra parameter is located but to no avail.
How can I access my customer parameter?
var columns = [
{
field: 'dateRaw',
title: 'Date added',
width: '90px',
template: '<span class="data" data-menu-id="1" data-item-id="#=id#" data-item-type="products"><abbr title="At #=time#">#=dateFormatted#</abbr></span>'
},
{
field: 'sku',
title: 'SKU',
width: '120px'
},
{
field: 'theName',
title: 'Name'
},
{
field: 'dimensions',
title: 'Dimensions',
//width: '120px'
},
{
field: 'weight',
title: 'Weight',
width: '80px'
},
{
field: 'basePrice',
title: 'Price',
width: '60px',
format: '{0:n}'
}]
$('#productGrid').kendoGrid({
rowTemplate: '',
dataSource: {
transport: {
read: {
type: 'POST',
dataType: 'json',
url: 'Ajax',
data: {
call: 'Product->productGrid'
}
}
},
schema: {
data: 'data',
querytime: 'querytime',
total: 'rowcount',
model: {
id: 'id',
fields: {
dateRaw: {
type: 'date'
},
id: {
type: 'number'
},
sku: {
type: 'string'
},
basePrice: {
type: 'number'
}
}
}
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true,
error: function(e) {
modalError(e.errorThrown + "<br/>" + e.status + "<br/>" + e.xhr.responseText)
}
},
height: 700,
autoBind: false,
filterable: true,
sortable: true,
pageable: true,
columns: columns
})

you are pretty close:
querytime is available inside the options object of your dataSource:
$('#productGrid').data('kendoGrid').dataSource.options.querytime

Using a KendoGrid how to pop-up a "Successfully Saved" Message when doing a Batch Edit?

I'm using a KendoUI Grid to do in line batch editing. I'd like to display to the user a message upon successfully saving the changes. How do I do this?
My Mark-UP:
<div id="employeeGoalsGrid"></div>
My Javascript:
var goalsDataSource = new kendo.data.DataSource({
transport: {
read: {
url: '/MVC/ResearcherPoints/GetEmployeeResearchers',
type: 'POST',
contentType: 'application/json'
},
update: {
url: '/MVC/ResearcherPoints/UpdateEmployeeGoal',
type: 'POST',
contentType: 'application/json'
//dataType: "jsonp"
},
parameterMap: function (options, type) {
debugger;
$.extend(options, { ID: options.id });
return JSON.stringify(options);
}
},
batch: false,
schema: {
model: {
id: 'ID',
fields: {
id: { editable: false, nullable: false },
FirstName: { editable: false, nullable: true },
LastName: { editable: false, nullable: true },
Title: { editable: false, nullable: true },
TeamName: { editable: false, nullable: true },
PointsGoal: { type: "number", nullable: true, validation: { required: false, min: 1 } }
}
}
},
sortable: true,
filterable: true,
columnMenu: true
});
$('#employeeGoalsGrid').kendoGrid({
dataSource: goalsDataSource,
navigatable: true,
sortable: true,
resizable: true,
toolbar: ["save", "cancel"],
columns: [
{ field: "FirstName", title: "First Name", width: 200},
{ field: "LastName", title: "Last Name", width: 200 },
{ field: "Title", title: "Title", width: 200 },
{ field: "TeamName", title: "Team", width: 200 },
{ field: "PointsGoal", title: "Goal", width: 200 }],
editable: true,
filterable: true,
});

Rodney, what about taking advantage of the complete event. It is bit dirty I agree, but I never managed to make Kendo success event work (not sure if anyone ever managed to - kendo ?).
update: {
url: '/MVC/ResearcherPoints/UpdateEmployeeGoal',
type: 'POST',
contentType: 'application/json',
complete: function (jqXhr, textStatus) {
if (textStatus == 'success') {
var result = jQuery.parseJSON(jqXhr.responseText);
// read your result
// open your dialog
}
}
},

You should use the sync event of the dataSource.
var goalsDataSource = new kendo.data.DataSource({
sync: function(e){
alert('Synchronization has completed! Your changes are saved!')
}
//...