Questions on Kendo UI for jQuery Forum

28,704 questions

4 answers

274 views

Here's example: http://dojo.telerik.com/EhijI
When I open column menu, hover filter, and then hover input, filter menu is closing. Is this a bug? Why this happens? Is there any way to escape this strange behavior?

Grid

answered on 20 Dec 2016

5 answers

219 views

Supported Properties for Menu

I have been looking at the example for creating a menu from a JSON object and haven't found a list of supported properties.

http://docs.telerik.com/KENDO-UI/web/menu/overview#initialize-the-menu-using-json-data-object

They list several in the example, but is that a complete list? On the URL for example is there a way of having it open in a new window (target="_blank") vs. a redirect?

I would also like to be able to assign a javascript function to a click even, and have seen on click used in different examples, but is it supported for JSON.

Overall I have found a lot of examples and information of item manipulation, but very little on getting it to do what you want when you click it. I don't really want to have a nightmare of a switch statement in the on select event.

Thanks

Randy

answered on 20 Dec 2016

3 answers

198 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

663 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

350 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

765 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

163 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

314 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.8K+ 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

Top users last month