Questions on Kendo UI for jQuery Forum

3 answers

544 views

Drop Zone appears, but does not work, for Edge browser

The Upload component shows the drop zone when using Microsoft's Edge browser, but that browser does not currently support file drag and drop. It seems like kendo.upload.js._supportsDrop should account for that.

Brad

Upload

answered on 11 Oct 2016

1 answer

146 views

[Solved] TypeScript definition file correction

I think columns need correction for GridColumn interface:

interface GridColumn {

aggregates?: any;

attributes?: any;

columns?: any; //I think this should be GridColumn[] not any

command?: GridColumnCommandItem[];

encoded?: boolean;

field?: string;

filterable?: boolean|GridColumnFilterable;

footerAttributes?: any;

footerTemplate?: string|Function;

format?: string;

groupable?: boolean;

groupHeaderTemplate?: string|Function;

groupFooterTemplate?: string|Function;

headerAttributes?: any;

headerTemplate?: string|Function;

hidden?: boolean;

locked?: boolean;

lockable?: boolean;

minScreenWidth?: number;

sortable?: boolean|GridColumnSortable;

template?: string|Function;

title?: string;

width?: string|number;

values?: any;

menu?: boolean;

}

Grid

answered on 11 Oct 2016

3 answers

179 views

Export to PDF icon bug in Default theme

I just found that the non-hovered PDF icon on the Export to PDF button is offset from where it should be. The hover version is correct.

See http://demos.telerik.com/kendo-ui/grid/pdf-export and switch to the Default theme.

Grid

answered on 11 Oct 2016

1 answer

675 views

Incell editing mode saves when "tab" out of cell but not blur/click away from cell

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 setState

11. 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 server

17. options.data.id = moment().unix();

18. ServerActionCreators.addCode(window['encounterId'], options.data);

19. // optimistic

20. options.success();

21. } else {

22. // update

23. ServerActionCreators.updateCode(window['encounterId'], options.data);

24. // optimistic

25. 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. // optimistic

32. options.success();

33. }

34. },

35. schema: {

36. model: {

37. id: 'id',

38. fields: {

39. {

40. "rowNum": {

41. "type": "number",

42. "editable": false

43. },

44. "gf": {

45. "type": "string",

46. "editable": false

47. },

48. "gfd": {

49. "type": "boolean",

50. "editable": false,

51. "defaultValue": null

52. },

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": true

65. },

66. "description": {

67. "type": "string",

68. "editable": true

69. }

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 cell

77. 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": true

035. }, {

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. // events

190. 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

Grid

answered on 11 Oct 2016

2 answers

783 views

How do I intercept the switch's event handlers?

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.

Switch (Mobile)

answered on 11 Oct 2016

5 answers

540 views

Server paging

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?

Grid

answered on 11 Oct 2016

1 answer

203 views

Change the position of the details column [Angular 2]

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.

Grid

answered on 11 Oct 2016

1 answer

931 views

[Solved] Check if item is enabled

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).

Toolbar

answered on 11 Oct 2016

3 answers

11.4K+ views

[Solved] Format of DatePicker value.

If I want to get the value from a DataPicker called startDate, I found an example to get the value like this:

$("#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?

DatePicker

answered on 11 Oct 2016

4 answers

1.4K+ views

Making column as readonly on update and editable on insert in grid

Hi,

I have a username field which should be editable on insert and readonly on update. I have written code marked in bold below to achieve this but it is working only for the first time. Disabled property is not getting set as false. Any ideas on how to resolve the issue??

            editable: "popup",
            edit: function (e) {
                debugger;
                if (isCreating) {
                    var window = e.container.data("kendoWindow");
                    window.title("Add new record");
                    e.container.find("a.k-grid-update").html('<span class="k-icon k-update"></span>Create');
                    //reset the flag
                    isCreating = false;
                }
                else {
                    //e.container.find("k-input k-textbox").html('<input type="text" class="k-input k-textbox" name="Username" disabled="true"/>');
                    document.getElementsByName("Username")[0].disabled = "true";
                }
            }
        });
        $(".k-grid-add").on("click", function (e) {
            debugger;
            isCreating = true;
            document.getElementsByName("Username")[0].disabled = "false";
        });
    });

Grid

answered on 11 Oct 2016