Develop Reference

Kendo Datasource / Grid - Expecting a Itemchange event but only receive sync event

I have a kendo grid where the is a Start Date field. When the Start Date field is changed for a row, I need to set the value of another field in the same row to null.
I am having trouble detecting when a field is edited
I have read the Kendo UI documentation on datasource, specifically the change event section. It's clear the a change event of type "itemchange" is what I need. What I find strange is that when I change the Start Date field the only event that fires is a sync action. It may be worth noting that I have have autoSync : true set in my Datasource.
For context, here is a snip of what some of the grid looks like and the data source code. Any suggestions would be much appreciated.
var componentsDataSource = new kendo.data.DataSource({
autoSync: true,
transport: {
read: function (e) {
if ($scope.Booking.Components.length != 0) {
e.success($scope.Booking.Components);
}
else {
e.success([]);
}
},
update: function (e) {
e.success(e.data);
},
destroy: function (e) {
$scope.loadNotesForBooking();
e.success(e.data);
}
},
change: function (e) {
if (e.action === "itemchange") {
console.log("A itemchange happened");
console.log(e);
}
},
error: function (e) {
$log.error("ComponentsDataSource error:");
$log.error(e);
messageService.setError(e.xhr, "componentsDataSource.transport.error", e);
},
schema: {
model: {
id: "Id",
fields: {
Id: { editable: false, nullable: false },
ProductCode: { editable: false, nullable: false },
Name: { editable: false, nullable: false },
Status: { editable: false, nullable: false },
Description: { editable: false, nullable: false },
UnitDescription: { editable: false, nullable: false },
StartDate: { type: "date", editable: true, nullable: false },
NumberOfAdults: { type: "number", editable: true, nullable: false, validation: { min: 0, required: true } },
NumberOfChildren: { type: "number", editable: true, nullable: false, validation: { min: 0, required: true } },
NumberOfInfants: { type: "number", editable: true, nullable: false, validation: { min: 0, required: true } },
Price: { editable: false, nullable: false },
PickupLocation: { editable: true, nullable: true },
DropoffLocation: { editable: true, nullable: true }
}
},
parse: function (response) {
if (response != null) {
$.each(response, function (i, item) {
if (item != null) {
//parse the data and convert the StartDate field (which comes through as a string) to a date so it can be formatted nicely by the grid
if (item.StartDate && typeof item.StartDate === "string") {
item.StartDate = kendo.parseDate(item.StartDate);
}
//build the description of the bus stops. This is done by the busStopData source for the dropdown lists but needs to be built here for any bookings being loaded
if (item.PickupLocation) {
if (item.PickupLocation.Code != "") {
item.PickupLocation.Description = item.PickupLocation.Name + " - " + item.PickupLocation.Time;
}
else {
item.PickupLocation.Description = "";
}
}
if (item.DropoffLocation) {
if (item.DropoffLocation.Code != "") {
item.DropoffLocation.Description = item.DropoffLocation.Name + " - " + item.DropoffLocation.Time;
}
else {
item.DropoffLocation.Description = "";
}
}
//add GUID style Ids to notes. This faciliates editing/deleting them from the grid as each can be uniquely identified
if (item.Remarks) {
if (item.Remarks.length > 0) {
$.each(item.Remarks, function (i, remark) {
if (!remark.Id) {
remark.Id = guid();
}
});
}
}
}
});
}
return response;
}
}
});

jqGrid inline-edit POST without editurl?

I am trying to find the information about editurl. Currently, i am working on the framework which does not permit editurl. The calls must go through javascript function which in-turn invokes the component on serverside.
Question is it possible to POST the data to javascript function instead of editurl?
I am experimenting with following:
$(document).ready(function () {
console.log(">>>1");
//--
action.setCallback(this, function(a) {
if (a.getState() === "SUCCESS") {
result = a.getReturnValue();
console.log(result);
//---=
var editActionOptions = {
keys: true,
url:null,
oneditfunc: function (rowid) {
console.log("row with rowid=" + rowid + " is editing.");
},
aftersavefunc: function (rowid, response, options) {
console.log("row with rowid=" + rowid + " is successfuly modified.");
}
};
//-------------------------------------------------------------------------------------------------------
$("#jqGrid").jqGrid({
editurl: 'clientArray',
datatype: "local",
data:result,
colModel: [
{
label: "Edit Actions",
name: "actions",
width: 100,
formatter: "actions",
formatoptions: {
keys: true,
editOptions: {},
addOptions: {},
delOptions: {}
}
},
{
labe: 'ID',
name: 'empid',
width: 75
},
{
label : 'Name',
name: 'Name',
width: 140,
editable: true // must set editable to true if you want to make the field editable
},
{
label: 'dob',
name: 'dob',
width: 100,
editable: true
},
{
label: 'dln',
name: 'dln',
width: 120,
editable: true
}
],
sortname: 'empid',
loadonce: true,
onSelectRow: editRow,
onSave:onSaveRow,
editParams: editActionOptions,
width: 780,
height: 400,
rowNum: 150,
pager: "#jqGridPager"
});
//------------------------------------------------------------------------------------------------------
} else if (a.getState() === "ERROR") {
$A.log("Errors", a.getError());
}
});
$A.enqueueAction(action);
var lastSelection;
function editRow(id) {
console.log(id);
if (id && id !== lastSelection) {
var grid = $("#jqGrid");
grid.jqGrid('restoreRow',lastSelection);
grid.jqGrid('editRow',id, {keys: true} );
lastSelection = id;
}
};
function onSaveRow(id){
console.log(id);
}

Getting a string on an update request in KendoUI datasource

I have a pretty simple grid with data source that retrieves data correctly
For that cause I have a schema.parse function defined
The problem is that when I try to update/create new row the schema.parse() called again and the parameter that is passed to it is a string that contains the HTML of my page. cannot really get what the hell is going on there.
thanks
var _dataSource = new kendo.data.DataSource({
transport: {
read: {
dataType: "json",
url: layerDefProvider.getLayerUrlById("surveys") + "/query",
data: {
f: "json",
//token: token,
outFields: "*",
//outSR: 3857,
where: "1=1"
},
type: "POST"
},
create: function (options) {
console.debug("called");//never gets called
},
update: function (options) {
console.debug("called");//never gets called
},
destroy: function (options) {
console.debug("called");//never gets called
}
},
filter: {
field: "OBJECTID", operator: "eq", value: 0
},
schema: {
data:function(response) {
},
parse: function (data) {//on loading it is fine, on updating the data param is a string of my HTML of the page
var rows = [];
var features = data.features;
if (!features) {
return [];
}
for (var i = 0; i < features.length; i++) {
var dataRow = {};
dataRow.OBJECTID = features[i].attributes.OBJECTID;
dataRow.Name = features[i].attributes.Name;
dataRow.Date = features[i].attributes.Date;
dataRow.Comment = features[i].attributes.Comment;
rows.push(dataRow);
}
return rows;
},
model: {
id: "OBJECTID",
fields: {
OBJECTID: { type: "number", editable: false },
Name: { type: "string" },
Date: { type: "string" },
Comment: { type: "string" }
}
}
}
});
var _surveysPicker = $(config.table).kendoGrid({
toolbar: ["create","save"],
editable: true,
dataSource: _dataSource,
height: 300,
sortable: true,
selectable: "multiple",
columnMenu: true,
resizable: true,
columns: [{
field: "OBJECTID",
width: 40
}, {
field: "Name",
width: 40
}, {
field: "Date",
width: 40
}, {
field: "Comment",
width: 100
}]
});

You need to move your parse function inside read event if you need to parse data only on read action.

How to create Grid with with nested DropDownList in C# / Razor / KendoUI?

I retype the grid attached below from JavaScript to Razor, but for example column "ActorInvoicingParamsFreePeriod" contains DropDownList . I can't attach it to the grid. I found only examples in JavaScript or without Kendo UI. I can code grid witout DropDownList. Can You help me?
function populateGridWithInvoicingMethod() {
$("#grid").show();
$("#grid").html("");
$("#grid").kendoGrid({
columns: [
{
field: "Name",
title: "#CTA.DealerName",
width: 100,
},
{
field: "InvoicingPeriod",
title: "#CTA.InvoicingMethod",
values: InvoicingMethodEnumArray,
editor: invoicingMethodDropDownEditor,
width: 50
},
{
field: "ActorInvoicingParamsNumberOfMonths",
title: "#CTA.NumberOfMonths",
format: "{0:d}",
width: 30
},
{
field: "ActorInvoicingParamsFreePeriod",
title: "#CTA.StandardPackageFreeInvoicingPeriod",
values: FreeInvoicingPeriodArray,
editor: freeinvoicePeriodDropDownEditor,
template: "#= ActorInvoicingParamsFreePeriod != -1 ? ActorInvoicingParamsFreePeriod : 'Not set' #",
width: 30
},
{
field: "ParentActorActorId",
title: "#CTA.InvoicingRegion",
values: InvoicingRegionArray,
width: 30
},
{
field: "ExportToGlif",
title: "#CTA.ExportToGlif",
template: '<input class="checkbox" type="checkbox" #= ExportToGlif ? checked="checked" : "" # disabled="disabled"/>',
width: 20
}
],
dataSource: {
transport: {
read: {
url: baseUrl + "api/PriceListApi/GetInvoicingMethodList",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8"
},
update: {
url: baseUrl + "api/PriceListApi/UpdateInvoicingMethodList",
dataType: "json",
async: false,
type: "POST",
contentType: "application/json; charset=utf-8"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options) {
return kendo.stringify(options);
} else {
return kendo.stringify(createInvoicingMethodRequest());
}
}
},
schema: {
model: {
id: "ActorId",
fields: {
Name: { editable: false },
ExportToGlif: { editable: false },
InvoicingPeriod: { editable: false },
ActorInvoicingParamsNumberOfMonths: { editable: false, type: "number" },
ActorInvoicingParamsFreePeriod: { editable: false, type: "number" },
ParentActorActorId: { editable: false, type: "number" }
}
},
data: function (response) {
var dataForDataSource = [];
var len = response.length;
for (var i = 0; i < len; i++) {
var obj = response[i];
obj.ParentActorActorId = obj.ParentActorActorId != null ? obj.ParentActorActorId : -1;
obj.ActorInvoicingParamsFreePeriod = obj.ActorInvoicingParamsFreePeriod != null ? obj.ActorInvoicingParamsFreePeriod : -1;
dataForDataSource.push(obj);
}
return dataForDataSource;
},
},
error: onGridDataSourceError
},
onError: onGridError,
editable: true,
selectable: true,
scrollable: false,
pageable: {
refresh: true,
pageSize: 10
}
});
}

You can achieve this by adding a foreign key column.
See http://demos.telerik.com/aspnet-mvc/grid/foreignkeycolumn for an example.

Kendo UI Grid Refesh on Dropdown Selection

I have a grid where each row has a select drop down box in with values.
When an item is selected, how can I make the grid reload to reflect the change?
The reason I want to do this is because the item selected from the drop down effects an amount in another column.
Here is the code for my dropdown:
function shippingModelSelect(container, options)
{
$('<input required data-text-field="modelName" data-value-field="modelId" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataSource: [
{
"modelName": "Individual shipping cost",
"modelId": 1
},
{
"modelName": "Based on weight",
"modelId": 2
},
{
"modelName": "Based on value",
"modelId": 3
}
],
close: function()
{
handleChange();
}
});
}
My handle change function:
var gridAlert = $('#gridAlert');
var handleChange = function(input, value) {
if(input && value)
{
detail = 'Product <b>'+input[0].name+'</b> changed to <b>'+value+'</b>';
gridAlert.html('<b>Changes saved!</b><p>'+detail+'</p>');
gridAlert.fadeIn('slow', function(){
setTimeout(function(){
gridAlert.fadeOut();
}, 2000)
});
}
dataSource.sync();
}
And finally my grid setup:
dataSource = new kendo.data.DataSource({
serverPaging: true,
serverSorting: true,
serverFiltering: true,
serverGrouping: true,
serverAggregates: true,
transport: {
read: {
url: ROOT+'products/manage'
},
update: {
url: ROOT+'products/set-product',
type: "POST",
data: function(data)
{
data.dateAdded = kendo.toString(data.dateAdded, 'yyyy-MM-dd hh:ii:ss')
return data;
}
}
},
pageSize: 20,
sort: {
field: 'id',
dir: 'desc'
},
error: function(e) {
alert(e.errorThrown+"\n"+e.status+"\n"+e.xhr.responseText) ;
},
schema: {
data: "data",
total: "rowcount",
model: {
id: "id",
fields: {
id: {
type: 'number',
editable: false
},
SKU: {
type: "string"
},
name: {
type: "string"
},
dateAdded: {
type: "date",
format: "{0:yyyy/MM/dd hh:mm}",
editable: false
},
shippingModel: {
type: "string"
},
shippingModelId: {
type: "number"
},
price: {
type: "number"
}
}
}
}
})
$('#productGrid').kendoGrid({
dataSource: dataSource,
autoBind: true,
columns: [
{
field: "image",
title: "Image",
width: 30,
template: "#= '<img title=\"'+alt+'\" src=\"images/'+image+'\"/>' #"
},
{
field: "SKU",
title: "SKU",
width: 50,
headerTemplate: "<abbr title=\"Stock Keeping Unit - A unique identifier for this product\">SKU</abbr>"
},
{
field: "stockQuantity",
title: "Quantity",
width: 30
},
{
field: "name",
title: "Name",
width: 200
},
{
field: "dateAdded",
title: "Date Added",
width: 80,
template: "#= niceDate #"
},
{
field: "shippingModelId",
title: "Shipping Model",
width: 50,
editor: shippingModelSelect,
template: "#= shippingModel #"
},
{
field: "price",
title: "Price",
width: 80,
//format: "{0:c}",
template: "#= '£'+price.toFixed(2)+'<br /><span class=\"grey\">+£'+shipping+' shipping</span>' #"
}
],
sortable: true,
editable: true,
pageable: {
refresh: true,
pageSizes: [10, 20, 50]
},
scrollable: false,
reorderable: true,
edit: function(e) {
var value;
var numericInput = e.container.find("[data-type='number']");
// Handle numeric
if (numericInput.length > 0)
{
var numeric = numericInput.data("kendoNumericTextBox");
numeric.bind("change", function(e) {
value = this.value();
handleChange(numericInput, value);
});
return;
}
var input = e.container.find(":input");
// Handle checkbox
if (input.is(":checkbox"))
{
value = input.is(":checked");
input.change(function(){
value = input.is(":checked");
handleChange(input, value);
});
}
else
{
// Handle text
value = input.val();
input.keyup(function(){
value = input.val();
});
input.change(function(){
value = input.val();
});
input.blur(function(){
handleChange(input, value);
});
}
}
}
)

You will need to do two things.
Wait for changes to finish syncing
Tell the grid to re-read the datasource
This should do both for you
dataSource.bind("sync", function(e) {
$('#productGrid').data("kendoGrid").dataSource.read();
});
For more info see the datasource sync event and datasource read method on their docs site.