I've researched some similar questions about this problem but without any success. The demo examples of the grid don't seem to have this problem but they use odata if that matters. Here's my grid and datasource configs:
01.var ds = new kendo.data.DataSource({02. autoSync: true,03. transport: {04. create: function(options) => {05. console.warn('kendo: data: transport: create');06. options.success(that.getEmptyRow());07. },08. read: function(options) {09. console.warn('kendo: data: transport: read');10. // Save for resolution via setState11. that.gridDataUpdateHandler = options;12. },13. update: function(options) {14. console.warn('kendo: data: transport: update');15. if (utils.isGuid(options.data.id)) {16. // create, get new ID from server17. options.data.id = moment().unix();18. ServerActionCreators.addCode(window['encounterId'], options.data);19. // optimistic20. options.success();21. } else {22. // update23. ServerActionCreators.updateCode(window['encounterId'], options.data);24. // optimistic25. options.success();26. }27. },28. destroy: function(options: kendo.data.DataSourceTransportOptions) {29. console.warn('kendo: data: transport: destroy');30. ServerActionCreators.destroyCode(window['encounterId'], options.data);31. // optimistic32. options.success();33. }34. },35. schema: {36. model: {37. id: 'id',38. fields: {39. {40. "rowNum": {41. "type": "number",42. "editable": false43. },44. "gf": {45. "type": "string",46. "editable": false47. },48. "gfd": {49. "type": "boolean",50. "editable": false,51. "defaultValue": null52. },53. "code": {54. "type": "string",55. "validation": {}56. },57. "codeType": {58. "type": "string",59. "editable": true,60. "defaultValue": "typeX"61. },62. "pa": {63. "type": "string",64. "editable": true65. },66. "description": {67. "type": "string",68. "editable": true69. }70. }71. }72. }73. },74. change: function(e) {75. console.warn('kendo: data: change: ' + e.action);76. // this is never called, even when user tabs out of cell77. if (e.action === 'itemchange') this.sync();78. },79. sync: function(e) {80. console.warn('kendo: data: sync');81. },82. requestStart: function(e) {83. if (this.grid && e.type === 'update') {84. this.lastCellPosition = this.getCurrentCellPositionInfo();85. this.isUpdating = true;86. } else {87. this.isUpdating = false;88. }89. console.warn('kendo: data: request start');90. },91. requestEnd: function(e) {92. console.warn('kendo: data: request end');93. },94.});and
001.var gridConfig = {002. dataSource: ds,003. sortable: false,004. editable: {005. createAt: 'bottom'006. },007. columns: [{008. "field": "rowNum",009. "headerAttributes": {010. "class": "col-row-num"011. },012. "attributes": {013. "class": "col-row-num"014. },015. "title": "#"016. }, {017. "field": "code",018. "title": "Code",019. "headerAttributes": {020. "class": "col-code"021. },022. "attributes": {023. "class": "col-code"024. }025. }, {026. "field": "codeType",027. "title": "Code Type",028. "headerAttributes": {029. "class": "col-code-type"030. },031. "attributes": {032. "class": "col-code-type"033. },034. "hidden": true035. }, {036. "field": "description",037. "title": "Description",038. "headerAttributes": {039. "class": "col-description cpt4-col-description"040. },041. "attributes": {042. "class": "col-description"043. }044. }, {045. "field": "modifiers",046. "title": "Modifiers",047. "headerAttributes": {048. "class": "col-modifiers"049. },050. "attributes": {051. "class": "col-modifiers"052. }053. }, {054. "field": "units",055. "title": "Units",056. "headerAttributes": {057. "class": "col-units"058. },059. "attributes": {060. "class": "col-units"061. }062. }, {063. "field": "revenueCode",064. "title": "RC",065. "headerAttributes": {066. "class": "col-revenue-code"067. },068. "attributes": {069. "class": "col-revenue-code"070. }071. }, {072. "field": "episode",073. "title": "Episode",074. "headerAttributes": {075. "class": "col-episode"076. },077. "attributes": {078. "class": "col-episode"079. }080. }, {081. "field": "provider",082. "title": "Provider",083. "headerAttributes": {084. "class": "col-provider col-ddl"085. },086. "attributes": {087. "class": "col-provider col-ddl",088. "data-item-key": "provider",089. "data-value-key": "id"090. }091. }, {092. "field": "date",093. "title": "Date",094. "headerAttributes": {095. "class": "col-date"096. },097. "attributes": {098. "class": "col-date"099. },100. "format": "{0:d}"101. }, {102. "field": "charges",103. "title": "Charges",104. "headerAttributes": {105. "class": "col-charges"106. },107. "attributes": {108. "class": "col-charges"109. },110. "format": "{0:c}"111. }, {112. "title": "APC",113. "headerAttributes": {114. "class": "col-apc"115. },116. "attributes": {117. "class": "col-apc"118. }119. }, {120. "title": "APC Wt",121. "headerAttributes": {122. "class": "col-apc-weight"123. },124. "attributes": {125. "class": "col-apc-weight"126. }127. }, {128. "title": "SI",129. "headerAttributes": {130. "class": "col-si"131. },132. "attributes": {133. "class": "col-si"134. }135. }, {136. "title": "CA Flag",137. "headerAttributes": {138. "class": "col-ca-flag"139. },140. "attributes": {141. "class": "col-ca-flag"142. }143. }, {144. "title": "Percent",145. "headerAttributes": {146. "class": "col-percent"147. },148. "attributes": {149. "class": "col-percent"150. }151. }, {152. "title": "MCare Amt",153. "headerAttributes": {154. "class": "col-medicare-amount"155. },156. "attributes": {157. "class": "col-medicare-amount"158. },159. "format": "{0:c}"160. }, {161. "title": "Adj Coin",162. "headerAttributes": {163. "class": "col-adjusted-coin"164. },165. "attributes": {166. "class": "col-adjusted-coin"167. }168. }, {169. "title": "Out Amount",170. "headerAttributes": {171. "class": "col-out-amount"172. },173. "attributes": {174. "class": "col-out-amount"175. }176. }, {177. "title": "APC Pymt",178. "headerAttributes": {179. "class": "col-apc-payment"180. },181. "attributes": {182. "class": "col-apc-payment"183. }184. }],185. resizable: true,186. scrollable: true,187. navigatable: false,188. //selectable: 'cell',189. // events190. cancel: function() {191. console.warn('kendo: grid: cancel');192. },193. change: function(e) {194. console.warn('kendo: grid: change');195. var cellPos = _this.getCurrentCellPositionInfo();196. },197. columnHide: function() {198. console.warn('kendo: grid: columnHide');199. },200. columnMenuInit: function() {201. console.warn('kendo: grid: columnMenuInit');202. },203. columnReorder: function() {204. console.warn('kendo: grid: columnReorder');205. },206. columnResize: function() {207. console.warn('kendo: grid: columnResize');208. },209. columnShow: function() {210. console.warn('kendo: grid: columnShow');211. },212. edit: function(e) {213. console.warn('kendo: grid: edit');214. e.container.find('.k-dropdown-wrap').removeClass('k-state-disabled').addClass('k-state-default');215. },216. excelExport: function() {217. console.warn('kendo: grid: excelExport');218. },219. pdfExport: function() {220. console.warn('kendo: grid: pdfExport');221. },222. filterMenuInit: function() {223. console.warn('kendo: grid: filterMenuInit');224. },225. remove: function() {226. console.warn('kendo: grid: remove');227. },228. save: function(e) {229. console.warn('kendo: grid: save');230. },231. saveChanges: function() {232. console.warn('kendo: grid: saveChanges');233. },234. columnLock: function() {235. console.warn('kendo: grid: columnLock');236. },237. columnUnlock: function() {238. console.warn('kendo: grid: columnUnlock');239. },240. dataBinding: function(e) {241. console.warn('kendo: grid: dataBinding');242. var start = 0;243. if (e.sender.dataSource.page() !== undefined && e.sender.dataSource.pageSize() !== undefined) {244. start = (e.sender.dataSource.page() - 1) * e.sender.dataSource.pageSize();245. }246. _.each(e.items, function(item) {247. item['rowNum'] = ++start;248. });249. },250. dataBound: function(e) {251. console.warn('kendo: grid: dataBound');252. _this.setupKeyListeners();253. }254.};255.this.grid = $('#grid').attr('id', this.id).kendoGrid(gridConfig).data('kendoGrid');256.window['grid' + this.id] = this.grid;257.};Help is appreciated
Hi,
What is the recommended way to intercept the switch's event handlers?
I'd like a confirmation dialog to appear whenever the user clicks the switch, and change the switch value only after the user confirms 'yes'. So the first step is for me to intercept the default click behavior for the switch.
Here's what I tried:
<div id='switch-section'> <input type='checkbox' /></div>
$('#switch-section input').kendoMobileSwitch();var switch = $('#switch-section .km-switch');switch.on('click', function (e) { console.log('click'); e.preventDefault(); return false;}When I click the switch, this prints the expected message to the console. However, I also expected this to prevent the switch from changing value, but that is not the case.

I'm using the MVC wrappers and entity framework and SQL server. Is server paging supported at the SQL level with the Kendo DataSourceRequest/ToDataSourceResult?
It seems like I always get a full table scan into memory from the database prior to any paging taking place (Iqueryable object). Do I need to write custom paging and sorting logic to limit results coming back from the database?
Hi Forum,
So I want to move the button for expanding collapsing the details row.
I know it wasn't supported out of the box in the UI for JQuery. Hence we had to handle that problem in the dataBound event
like this oldie - http://jsbin.com/exawot/1/edit;
I suppose it still isn't supported, could you provide us with a way/example how to do this in the new Kendo UI for Angular 2:
http://www.telerik.com/kendo-angular-ui/components/grid/#detail-template
Thanks in advance.
Cheers.

How can I check if item is enabled? I use function enable:
this.toolbar.enable(`#${id}`, false);Usually(select, value, data ...) I would check with second element empty(undefined).
$("#startDate").data("kendoDatePicker").value()
The result is in this format:
Mon Nov 28 00:00:00 EST 2011
How can I format the value as displayed in the box, ie. MM/dd/yyy, or a standard DateTime format?

In the custom themebuilder, what configuration items do I change to modify the grid header colors and font?
If I were to override the CSS myself, which items would I need to change?
Specifically, I want to use the bootstrap theme, but change the grid header background color to blue (typical bootstrap blue) and the text to white.
Thanks,
--Ed
I need exactly similar grid to this : http://demos.telerik.com/kendo-ui/grid/editing-custom
I am working on a grid with combobox for edit. i have a functionality to add row on button click. On button click i get data from database and add to grid like below. Edit combo box template does not work from the second row. When user adds the first row, combo box works, but from the second row edit templates does not work.
function AddNewROwToGrid()
{
var grid = $("#MyGrid").data("kendoGrid");
var datasource = grid.dataSource;
$.ajax({
type: 'GET',
contentType: 'application/json',
url: MYURL,
success: function (resultData) {
if (resultData.length > 0) {
var gridExistingData = datasource.data();
var mergedData = $.merge(gridExistingData, resultData);
datasource.data(resultData);
}
}
});
}
Below is the configuration of Grid.
editable: true,
{
field: "MyField", title: "New Field", width: "180px", template: "#=MyField#",
editor: function(container, options) {
$('<input data-text-field="MyField" data-value-field="MyField" data-bind="value:' + options.field + '"/>').appendTo(container).kendoComboBox({
dataSource: {
data: autoFillData
},
dataValueField: "MyField",
dataTextField: "MyField",
autobind: true
});
}
},
Please help. it is urgent
Is there a way to display other datasource fields in a custom groupTemplate?
If i use the below code, i get a undefined error.
groupTemplate: "#: data.aDifferentField#"The reason i want to do this is because i want to have grouped options in my select list but grouping the data source by the real field doesn't return the order i want.
So i basically use a different field to group the data source and want to display the name of my original grouping field instead.