Questions on Kendo UI for jQuery Forum

28,693 questions

3 answers

176 views

Hide Grid Row if Grid in DetailTemplate has no data

Is there any way to Hide a specific Grid Row when its DetailTemplate grid contains no data. hope that makes sense...appreciate it

Grid

answered on 20 Dec 2016

5 answers

634 views

Validation not working

I have an upload object I am trying to use in an Angular app. I have used the samples on the demo page and can not seem to get these items to work. Below are both my HTML and the validation section from my javascript.

<input name="files" ng-model="vm.file" kendo-upload k-options="vm.uploadOpts" type="file" />

vm.uploadOpts = {

async: {

saveUrl: "{0}FileManagement/Save".format(GMT.Config.baseApiUrl),

autoUpload: true

},

validation: {

maxFileSize: 304,

allowedExtensions: ["upd", "txt", "xls", "doc", "docx", "xml", "xlsx", "csv", "xlsm"]

},

error: this.onError,

success: this.onSuccess

};

Why is it not utilizing this information?

Upload

answered on 20 Dec 2016

1 answer

333 views

How to copy checked nodes from one treeview to another treeview?

I have a treeview with three hierarchy which has checkboxes along with them. I need to move only those data for which checkbox is checked to another treeview.

refer the dojo here;

http://dojo.telerik.com/eGINo/2

Can anybody let me know any idea to achieve this?

TreeView

answered on 20 Dec 2016

1 answer

751 views

check box filter in grid : show check boxes default checked

Hi Team,

We are trying to use Kendo UI Grid with angular directive in our angular project.

We are able to load the grid and also have filter menu checkboxes enabled. we want mark the check boxes checked on load. we tried to do that in the below example. it doesn't work. can you please give us some clues to make way forward in this.

http://dojo.telerik.com/AHIvu

Thanks,

Narendra

Grid

answered on 20 Dec 2016

1 answer

149 views

Can the Date Picker default to the browser's own date selector?

For the modern mobile browsers now supports the <input type="date"> very well with it's own calendar date selector control.

Is there a way to have the KendoUI DatePicker use the browser calendar selector if available? Or is this something we need to code around to make this scenario work?

Yes, the KendoUI does work on mobile, but the users are asking to use their built in picker instead for ease of use and it makes the web page fell more like an phone app.

Thank you

DatePicker

answered on 20 Dec 2016

3 answers

297 views

Radar chart formatting

I am trying to make the chart attached, and there are two main problems.

1. Is it possible to position the labels? The defaults have them overlapping (this is also clear on the demo chart at http://demos.telerik.com/jsp-ui/radar-charts/index)

2. Is it possible to add background colours per the attached? These are basically for grouping. I tried adding another series, but as a radarArea it doesn't apply the colours except to the tooltips (and overlaps the blue area of the first series), and as a radarColumn chart is conceals everything else (even if that is the first series).

Can you help me?

Note: I have no idea why the percentages are backwards in the screenshot - please disregard that.

Charts

answered on 20 Dec 2016

2 answers

1.6K+ views

[Solved] Hide Paging when is no needed

I'm trying to hide the paging control when is not needed but I'm missing something, here is my code, hope you can help me to solve this, thanks in advance! Line 261

001.var NoFoundMessage = $("#NoFoundMessage");

002.var Kendogrid = $("#grid");

003.var isOrderById = false;

004.

005.kendo.pdf.defineFont({

006. "DejaVu Sans": "//kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans.ttf",

007. "DejaVu Sans|Bold": "//kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans-Bold.ttf",

008. "DejaVu Sans|Bold|Italic": "//kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf",

009. "DejaVu Sans|Italic": "//kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf"

010.});

011.

012.(function (myOrders, $) {

013.

014. myOrders.OrderHistory = (function () {

015.

016. var Order = $("#Order").text();

017. var PSQ = $("#PSQ").text();

018. var Date = $("#Date").text();

019. var Status = $("#Status").text();

020. var OrderPurpose = $("#OrderPurpose").text();

021. var Purchaser = $("#Purchaser").text();

022. var ShipTo = $("#ShipTo").text();

023. var Volume = $("#Volume").text();

024. var OrderAgain = $("#OrderAgain").text();

025. var ViewReceipt = $("#ViewReceipt").text();

026.

027. var getUrlWithLocale = function (url) {

028. var pathArray = window.location.pathname.split('/');

029. var segment = pathArray[1];

030. var regex = /^([a-zA-Z]{2}-[a-zA-Z]{2})$/;

031.

032. if (regex.test(segment)) {

033. return "/" + segment + url;

034. }

035. return url;

036. }

037.

038. var load = function () {

039. if (typeof localStorage.searchByOrderId !== "undefined" && JSON.parse(localStorage.searchByOrderId) === true) {

040. localStorage.searchByOrderId = false;

041. isOrderById = true;

042. orderIdCtrl.val(localStorage.OrderID);

043. }

044. showGrid();

045. kendo.ui.progress(Kendogrid, true);

046. Kendogrid.kendoGrid({

047. excel: {

048. fileName: "OrdersHistory.xlsx",

049. allPages: true,

050. proxyURL: "/Account/OrderInquiry/Save/"

051. },

052. pdf: {

053. allPages: true,

054. avoidLinks: true,

055. paperSize: "A4",

056. margin: { top: "2cm", left: "1cm", right: "1cm", bottom: "1cm" },

057. landscape: true,

058. repeatHeaders: true,

059. template: $("#page-template").html(),

060. scale: 0.8

061. },

062. noRecords: true,

063. dataSource: {

064. type: "POST",

065. transport: {

066. read: function (options) {

067. if (isOrderById === false) {

068. getOrdersDataSource(myOrders.SearchControl.pagingSearch(), options);

069. } else {

070. getOrderByIdDataSource(localStorage.OrderID, options);

071. isOrderById = false;

072. }

073. }

074. },

075. batch: true,

076. schema: {

077. type: 'json',

078. model: {

079. id: "OrderID",

080. fields: {

081. OrderID: { type: "string" },

082. PurchasedBy: { type: "string" },

083. LocalizedDate: { type: "string" },

084. OrderStatusDesc: { type: "string" },

085. LocalizedHapOrderStatus: { type: "string" },

086. OrderPurpose: { type: "string" },

087. PurchaserName: { type: "string" },

088. Recipient: { type: "string" },

089. VolumePoints: { type: "string" },

090. OrderAgain: { type: "string" },

091. ViewReceipt: { type: "string" }

092. }

093. }

094. },

095. pageSize: 10

096. },

097. groupable: false,

098. sortable: true,

099. pageable: {

100. refresh: false,

101. pageSizes: [10, 20, 30]

102. },

103. columns: [

104. {

105. field: "OrderID",

106. title: Order,

107. template: function (data) {

108. var url = getUrlWithLocale("/Account/OrderHistory/GetOrderDetails/");

109. return "<a id='btnViewDetails' data-orderID='" +

110. data.OrderID +

111. "' href='" +

112. url +

113. data.OrderID +

114. "/Ds' target='_self'>" +

115. data.OrderID +

116. "</a>";

117. }

118. },

119. {

120. field: "PurchasedBy",

121. title: PSQ

122. },

123. {

124. field: "LocalizedDate",

125. title: Date

126. },

127. {

128. field: "OrderStatusDesc",

129. title: Status,

130. template: function (data) {

131. if (data.OrderStatus === '03') {

132. return "" + data.OrderStatusDesc + "";

133. } else if (data.OrderStatus === "90") {

134. return "" + data.OrderStatusDesc + "";

135. } else if (data.OrderStatus === "01") {

136. return "" + data.OrderStatusDesc + "";

137. }

138. else {

139. return "" + data.OrderStatusDesc + "";

140. }

141. }

142. },

143. {

144. field: "LocalizedHapOrderStatus",

145. title: Status,

146. hidden: true,

147. template: function (data) {

148. if (data.HapOrderStatus === "ACTIVE") {

149. return "" + data.LocalizedHapOrderStatus + "";

150. } else if (data.HapOrderStatus === "CANCELLED") {

151. return "" + data.LocalizedHapOrderStatus + "";

152. } else {

153. return "" + data.LocalizedHapOrderStatus + "";

154. }

155. }

156. },

157. {

158. field: "OrderPurpose",

159. title: OrderPurpose,

160. template: function (data) {

161. return data.LocalizedOrderPurpose;

162. }

163. },

164. {

165. field: "PurchaserInfo.PurchaserName",

166. title: Purchaser,

167. attributes: {

168. "class": "tablet"

169. },

170. template: function (data) {

171. return data.PurchaserInfo.PurchaserName

172. }

173. },

174. {

175. field: "Shipment.Recipient",

176. title: ShipTo,

177. template: "#:kendo.toString(Shipment.Recipient)#"

178. },

179. {

180. field: "Pricing.VolumePoints",

181. title: Volume,

182. template: function (data) {

183. return data.Pricing.VolumePoints;

184. }

185.

186. },

187. {

188. field: "OrderAgain",

189. title: OrderAgain,

190. sortable: false,

191. template: (function () {

192. var url = getUrlWithLocale("/Shop/Cart/Copy/Index/Ds/");

193. if (myOrders.SearchControl.pagingSearch().IsHapOrder === false) {

194. return "<a class='icon-files-ln-3' href='" + url + "#:OrderID#'> </a>";

195. }

196. return "";

197. }())

198. },

199. {

200. field: "ViewReceipt",

201. title: ViewReceipt,

202. sortable: false,

203. template: (function (data) {

204. var url = getUrlWithLocale("/Shop/Receipts/Invoice/Display/" + data.ReceiptNumber);

205. if (data.OrderPurpose !== null && data.OrderPurpose.toLocaleLowerCase() == "cd") {

206. return "<a href='" + url + "'></a>";

207. }

208. return "";

209. })

210. }

211. ]

212. });

213. }

214.

215. var searchByOrderId = function (orderId) {

216. localStorage.searchByOrderId = true;

217. isOrderById = true;

218. localStorage.OrderID = orderId;

219. load(false);

220. }

221.

222. function getOrdersDataSource(data, options) {

223. $.ajax({

224. url: getUrlWithLocale("/Account/OrderInquiry/GetOrders"),

225. data: data,

226. dataType: "json",

227. success: function (result) {

228. if (result == null) {

229. noFound();

230. } else {

231. formatColumns(myOrders.SearchControl.pagingSearch().IsHapOrder);

232. showGrid();

233. }

234. kendo.ui.progress(Kendogrid, false);

235. options.success(result);

236. }

237. });

238. }

239.

240. function getOrderByIdDataSource(orderId, options) {

241. $.ajax({

242. url: getUrlWithLocale("/Account/OrderInquiry/GetOrderById"),

243. data: { orderId: orderId },

244. dataType: "json",

245. success: function (result) {

246. if (result == null) {

247. noFound();

248. } else {

249. if (result[0].IsStandingHapOrder === true) {

250. formatColumns(true);

251. $(".k-grid-header-wrap > table").addClass("hap-table");

252. $(".k-grid-content > table").addClass("hap-table");

253. }

254. showGrid();

255. }

256. kendo.ui.progress(Kendogrid, false);

257. options.success(result);

258. }

259. });

260. }

261.

262. function onGridDataBound(e) {

263. if (this.dataSource.view().length == 0) {

264. $('.k-pager-info').hide();

265. } else {

266. $('.k-pager-info').show();

267. }

268.

269. if (this.dataSource.totalPages() == 1) {

270. this.pager.element.hide();

271. $(".k-grid-pager").hide();

272. }

273. }

274.

275. function noFound() {

276. Kendogrid.hide();

277. NoFoundMessage.show();

278. }

279.

280. function showGrid() {

281. NoFoundMessage.hide();

282. Kendogrid.css("display", "block");

283. };

284.

285. function formatColumns(isHapOrder) {

286.

287. var grid = Kendogrid.data("kendoGrid");

288.

289.

290. if (isHapOrder === true) {

291. grid.hideColumn("Recipient");

292. grid.hideColumn("OrderAgain");

293. grid.hideColumn("ViewReceipt");

294. grid.hideColumn("OrderStatusDesc");

295. grid.hideColumn("PurchasedBy");

296. grid.hideColumn("PurchaserName");

297. grid.showColumn("LocalizedHapOrderStatus");

298.

299. $("#grid thead [data-field=LocalizedDate] .k-link").html("Start Date");

300.

301. } else {

302. //CSS

303. grid.showColumn("Recipient");

304. //$("th[data-field='Recipient']").show();

305. grid.showColumn("OrderAgain");

306. //$("th[data-field='Order Again']").show();

307. grid.showColumn("ViewReceipt");

308. //$("th[data-field='ViewReceipt']").show();

309. grid.showColumn("OrderStatusDesc");

310. //$("th[data-field='OrderStatusDesc']").show();

311. grid.showColumn("PurchasedBy");

312. //$("th[data-field='PurchasedBy']").show();

313. grid.showColumn("PurchaserName");

314. //$("th[data-field='PurchaserName']").show();

315. grid.hideColumn("LocalizedHapOrderStatus");

316. //$("th[data-field='HapOrderStatus']").hide();

317. $("#grid thead [data-field=LocalizedDate] .k-link").html("Date");

318. }

319. }

320.

321. return {

322. load: load,

323. gerUrlWithLocale: getUrlWithLocale,

324. searchByOrderId: searchByOrderId

325. };

326.

327. }());

328.

329. return false;

330.

331.})(window.myOrders = window.myOrders || {}, jQuery);

332.

333.$(document).ready(function () {

334.

335. myOrders.OrderHistory.load();

336.

337. $("#show-form").click(function (e) {

338. $("#search-form").slideToggle();

339. $(this).find("i").toggleClass("icon-arrow-circle-ln-29 icon-arrow-circle-ln-30");

340. e.preventDefault();

341. });

342.

343. $("#export").click(function () {

344. var grid = Kendogrid.data("kendoGrid");

345. grid.saveAsExcel();

346. return false;

347. });

348.

349. $("#modal-cancel").click(function () {

350. $("#modal-download").data("kendoWindow").close();

351. return false;

352. });

353.

354. $("#modal-ok").click(function () {

355.

356. if ($('#radio-excel').is(':checked')) {

357. var grid = Kendogrid.data("kendoGrid");

358. grid.hideColumn("OrderAgain");

359. grid.hideColumn("ViewReceipt");

360. grid.saveAsExcel();

361. grid.showColumn("OrderAgain");

362. grid.showColumn("ViewReceipt");

363. $("#modal-download").data("kendoWindow").close();

364. } else if ($('#radio-pdf').is(':checked')) {

365. var grid = Kendogrid.data("kendoGrid");

366. grid.saveAsPDF();

367. $("#modal-download").data("kendoWindow").close();

368. } else {

369. return false;

370. }

371. return false;

372. });

373.});

Grid

answered on 19 Dec 2016

4 answers

6.6K+ views

How to make grid not load data when first time go to the page?

How to make grid not load data when first time go to the page? Because I have some filter condition before load data,Now when I first go to the page,It load all data to me without filter because my filter condition is null as user have not set the filtercondition

Grid

answered on 19 Dec 2016

3 answers

182 views

Avoid hyperlink creation in internet explorer

It is found that all browsers except IE do not auto convert text into hyperlink. eg. abc@xyz.com is auto created to a link - <a href="mailto:abc@xyz.com">abc@xyz.com</a> in IE

I want to know what is the way to avoid hyperlink creation in IE.

Editor

answered on 19 Dec 2016

2 answers

90 views

Angular 2 - Unexpected Model

I'm trying to get the latest kendo angular 2 drop to work in my angular 2 + web pack project. I followed the startup docs and installed the buttons and default styles using npm.

Webpack version: 1.14.0

Angular 2.3

Kendo buttons ^0.14.2

kendo-theme-default: ^1.32.1

Webpack builds the app fine

When i startup my web app I see this in the console

Error: Unexpected module 'ButtonsModule' declared by the module 'AppModule'
_reportError — compiler.umd.js:672
(anonymous function) — compiler.umd.js:17758
forEach
getNgModuleMetadata — compiler.umd.js:17740
_loadModules — compiler.umd.js:26465
_compileModuleAndComponents — compiler.umd.js:26425
compileModuleAsync — compiler.umd.js:26402
_bootstrapModuleWithZone — core.umd.js:8417
(anonymous function) — main.ts:7
Eval Code — main.ts:7
eval
(anonymous function) — app.js:15
__webpack_require__ — polyfills.js:51
(anonymous function) — app.js:7
__webpack_require__ — polyfills.js:51
webpackJsonpCallback — polyfills.js:22
Global Code — app.js:1

General Discussions

answered on 19 Dec 2016

Top users last month