I have grid with X number of rows. Whenever i the grid is bound with a dataset, i need to make sure that the records present in Grid should be removed and add only records from data set
For eg: if ID 102 is already present in grid as well as it is present in new result set, while adding additional details, grid should remove 102 and add it from the new result set.
I wrote the below code to do this . but this is very performance inefficient, when i have 100 records in the grid and new result set adds another 100 records, this is hanging the page.
Please help.
var gridExistingData = datasource.data();
$.grep(gridExistingData, function (d) {
if (resultData.length > 0) {
if (d != null && d.AssetID == resultData[i].AssetID) {
gridExistingData.remove(d);
}
}
});
Please suggest if there is any alternative process to achieve this
Users that use inline Kendo Editor in Chrome on Surface Pro cannot insert a new table. It can be reproduced by using latest version of Chrome (with enabled #touch-events flag) on Surface Pro. When #touch-events flag is disabled through "chrome://flags" everything works fine. The results can be seen online:
http://demos.telerik.com/kendo-ui/editor/inline-editing
Try adding a table using the tool from the toolbar. If you use Chrome on Surface Pro with enabled touch events choosing the size of the table will not add the table to the editable area. Again, disabling touch events in Chrome solves the problem but it's not an acceptable solution.

I want to populate the current month with dates which are retrieved from a web endpoint, however the value of the dates field is not rendered unless they're set at the time of construction.
How do I make the calendar recognize the change to the dates field?
http://dojo.telerik.com/@DGOBRIEN/EkIze
01.<!DOCTYPE html>02.<html>03.<head>04. <meta charset="utf-8"/>05. <title>Kendo UI Snippet</title>06. 07. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.504/styles/kendo.common.min.css"/>08. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.504/styles/kendo.rtl.min.css"/>09. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.504/styles/kendo.silver.min.css"/>10. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.504/styles/kendo.mobile.all.min.css"/>11. 12. <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>13. <script src="http://kendo.cdn.telerik.com/2016.2.504/js/kendo.all.min.js"></script>14.</head>15.<body>16. 17.<input id="datepicker">18.<script>19.$("#datepicker").kendoDatePicker({20. value: new Date(2015,9,3),21. disableDates: [new Date(2015,9,12), new Date(2015,9,22), "sa" , "su" ]22.});23.</script>24.</body>25.</html>
How to combine date based and day based disabled dates?
Hi,
I am creating a kendo grid and trying to get paging working. I have updated the dataSource schema so that total is set and I can see from the console.log output that it returns a value but I still get the message "No items to display" and the paging doesnt work. Below is the the kendo grid code and a sample of the json returned. Can anyone see what I am doing wrong?
$("#requestBreakdown").kendoGrid({
dataSource: {
type: "json",
transport: {
read: "/home/Grid_DataSource?startDate=01/05/2016&endDate=12/05/2016",
dataType: "json"
},
pageSize: 2,
serverPaging: false,
schema: {
data: "Data",
total: function (data) {
console.log(data.Total);
return data.Total;
},
}
},
groupable: false,
sortable: true,
pageable: true,
columns: [
{ field: "TITLE", title: "Title" },
]
});
JSON response
{"Data":[
{"WORKORDERID":1,"TITLE":"First"},
{"WORKORDERID":2,"TITLE":"Second"},
{"WORKORDERID":3,"TITLE":"Third"}
//ADDITIONAL ITEMS REMOVED
],"Total":124}
We actually test Kendo UI with angular.
We have an error when we want to update or destroy line in the grid (inline edition mode).
it's certainly an error in the "transport" code block, but i don't find it.
the error is "Cannot read property 'call' of undefined"
the hml part is simplistic :
<div kendo-grid k-options="mainGridOptions2" style="height: 600px; width: 900px">
this is our Controller code :
'use strict';/** * @ngdoc function * @name kendoTestApp.controller:PersonsPersonslistCtrl * @description * # PersonsPersonslistCtrl * Controller of the kendoTestApp */angular.module('kendoTestApp') .controller('PersonsPersonslistCtrl', function ($resource, $scope, $rootScope) { $scope.mainGridOptions2 = { editable:"inline", dataSource: { transport: { read: function(e){ var testData = [ { "FirstName": "Ken", "Id": 1, "LastName": "Ruffort", "ModifiedDateString": "2016-03-15T11:44:33.1370000", "Title": null, "TypeString": "SC" }, { "FirstName": "Gigi", "Id": 2, "LastName": "Lopez", "ModifiedDateString": "2002-02-23T00:00:00.0000000", "Title": null, "TypeString": "VC" }, { "FirstName": "Robert1", "Id": 3, "LastName": "Tamburello", "ModifiedDateString": "2015-07-18T00:00:00.0000000", "Title": null, "TypeString": "EM" }]; e.success(testData); }, update: function(e){ console.log("update"); }, destroy: function (e) { console.log("destroy"); }, parameterMap: function(options, operation) { if (operation !== "read" && options.models) { console.log("parameterMap"); return {models: kendo.stringify(options.models)}; } } }, schema: { model: { fields: { FirstName: {type: "string"}, Id: {type: "number"}, LastName: {type: "string"}, ModifiedDateString: {type: "date"}, Title: {type: "string"}, TypeString: {type: "string"} } }, parse: function (data) { $.each(data, function (i, val) { val.ModifiedDateString = new Date(val.ModifiedDateString); val.ModifiedDateString.setHours(0, 0, 0, 0); // console.log(val.ModifiedDateString); }); return data; } }, pageSize: 20, batch:false, serverPaging: false, serverFiltering: false, serverSorting: false }, columns: [ { field:'Id', title: 'Id', width:'70px' }, { field:'FirstName', title: 'firstname' , width:'120px', template:'{{dataItem.Title}} {{dataItem.FirstName}}' , type:'string', filterable:{ cell:{operator:"contains"} } }, {field:'TypeString',title: 'Type' , width:'120px' , type:'string',filterable:{multi:true}}, {field:'LastName',title: 'LastName' , width:'120px' , type:'string'}, { field:'ModifiedDateString', title: 'ModifiedDateString' , width:'120px', format: "{0:MMM dd, yyyy}", parseFormats: "{0:MM/dd/yyyy}", headerTemplate: '<label for="check-all"><b>Start Date</b></label>', headerAttributes: { style: "text-align: center;" }, attributes: { style: "text-align:center !important;padding-right: 25px;" }, filterable: { ui: function (element) { element.kendoDatePicker({ format: "MMM dd, yyyy" }); } } }, {command:[{name:"edit",text:""},{name:"destroy",text:""}],title:" ", width:"200px"}], sortable: true, pageable:{ pageSizes:[10,20,100,500], buttonCount:5 }, scrollable:true, toolbar:["create"], filterable:true }; });