Questions on Kendo UI for jQuery Forum

7 answers

1.2K+ views

Hierarchy grid bind on button click

Dear admin,
I need to bind Hierarchy grid on main grid by button click. Following is my example code.

001.var people = new kendo.data.DataSource({

002. data: {!Output},

003. batch: true,

004. schema: {

005. model: {

006. fields: {

007. carId: { type: "string" },

008. vehicleId: { type: "string", editable:false },

009. Percentage: { type: "number", editable:false },

010. Price: { type: "string", editable:false},

011. CarType: { type: "string", editable:false},

012. CarSize: { type: "string", editable:false},

013. CarPerCase: { type: "number", editable:false },

014. Family: { type: "string", editable:false},

015. ModelType: { type: "string", editable:false},

016. EPId: { type: "string" },

017. Tax: { type: "string" }

018. }

019. }

020. },

021. pageSize: 20,

022. sort: { field: "vehicleId", dir: "asc" }

023. });

024.var element = $("#grid").kendoGrid({

025. dataSource: people,

026. navigatable: true,

027. pageable: true,

028. toolbar: [

029. "save",

030. "cancel",

031. {

032. name: "Add",

033. text: "Show Car Price",

034. click: function(e) {

035. return false;

036. }

037. },

038. {

039. name: "Delete",

040. text: "Hide Car Price",

041. click: function(e) {

042. return false;

043. }

044. }

045. ],

046. columns:[

047. {

048. field: "carId",

049. title: "Car ID",

050. width: 150,

051. hidden:true

052. },

053. {

054. field: "vehicleId",

055. title: "Vehicle ID",

056. width: 100

057. },

058. {

059. field: "Percentage",

060. title: "Percentage",

061. width: 70

062. },

063. {

064. field: "Price",

065. title: "Price",

066. width: 250

067. },

068. {

069. field: "CarType",

070. title: "Car Type"

071. },

072. {

073. field: "CarSize",

074. title: "Car Size"

075. },

076. {

077. field: "CarPerCase",

078. title: "Car Per Case"

079. },

080. {

081. field: "Family",

082. title: "Family"

083. },

084. {

085. field: "ModelType",

086. title: "Model Type",

087. width: 100

088. },

089. {

090. field: "EPId",

091. title: "EP Id",

092. hidden: false

093. },

094. {

095. field: "Tax",

096. title: "Tax",

097. format: "{0:c}",

098. width: 100

099. }

100. ],

101. editable:true

102. groupable: true,

103. filterable: true,

104. sortable: true,

105. reorderable: true,

106. resizable: true,

107. columnMenu: true,

108. pageable: {

109. refresh: true,

110. pageSizes: [10, 20, 50],

111. buttonCount: 5

112. },

113. editable: "incell",

114. detailInit: detailInit

115. });

116.// hierarchy grid

117. function detailInit(e) {

118. var detailRow = e.detailRow;

119. codeDetailData = e.data;

120.

121. $("<div/>").appendTo(e.detailCell).kendoGrid({

122. dataSource: e.data.ItemPrices.toJSON(),

123. editable:true,

124. navigatable: true,

125. scrollable: false,

126. sortable: true,

127. pageable: true,

128. columns: [

129. {

130. field: "Engine",

131. width: "200px",

132. editor: serviceItemAutoCompleteEditor

133. },

134. {

135. field: "TN",

136. title:"TN",

137. width: "110px"

138. },

139. {

140. field: "TaxApplied",

141. title:"Tax Applied"

142. },

143. {

144. field: "TaxChange",

145. title: "Tax Change",

146. width: "300px"

147. },

148. {

149. field: "StartDate",

150. title: "Start Date",

151. format:"{0:dd-MM-yyyy}",

152. editor: dateTimeEditor

153. },

154. {

155. field: "EndDate",

156. title: "End Date",

157. format:"{0:dd-MM-yyyy}",

158. editor: dateTimeEditor

159. }

160. ]

161. });

162.

163. }

My requirement is that the line 114 detailInit: detailInit (responsible for hierarchy grid), should not be there at the time of load of grid. There should be a button, that bind/attach hierarchy grid to main grid on click.
Hiding columns of arrows is not an option.

Hierarchical Data Source

answered on 23 Mar 2016

1 answer

127 views

Image as dropzone for instant upload

Hello,

is it possible to use an <img> a target for a file upload, so that when I drop files on the image they get uploaded?

Upload

answered on 23 Mar 2016

3 answers

132 views

Dynamic Columns Issue

I have a problem with the grid in that when columns are being added dynamically if the column that is being added is beyond the right side of the view-able right edge of the grid the column does not appear added when scrolled to the right.It takes a refresh to do this. This behavior should not exist ideally. When the column is added I want it view-able. As I recall, you have to add another column so the column that was not view-able is pushed to the left now in the view-able area. How do we solve this problem?

Grid

answered on 23 Mar 2016

4 answers

460 views

Spreadsheet problem with loading large JSON

angular.js:11358 RangeError: Maximum call stack size exceeded

at kendo.all.min.js:78

at Object.a [as compile] (kendo.all.min.js:78)

at e.support.browser.msie.e.support.browser.version.e.Observable.extend._compileFormula (kendo.all.min.js:77)

at .<anonymous> (kendo.all.min.js:77)

at e.support.browser.msie.e.support.browser.version.e.Observable.extend.batch (kendo.all.min.js:77)

at e.support.browser.msie.e.support.browser.version.e.Observable.extend.fromJSON (kendo.all.min.js:77)

at e.support.browser.msie.e.support.browser.version.e.Observable.extend.fromJSON (kendo.all.min.js:78)

at new e.support.browser.msie.e.support.browser.version.e.Observable.extend.init (kendo.all.min.js:78)

at new e.support.browser.msie.e.support.browser.version.e.ui.Widget.extend.init (kendo.all.min.js:85)

at HTMLDivElement.<anonymous> (kendo.all.min.js:26)

I am trying to load about 29 thousand rows of data into the kendo spreadsheet and I get the above error. What I am doing is converting data from a ExcelPackage to a Telerik.Web.Spreadsheet workbook on the back-end. Then I convert the workbook via the ToJson method, send that data to the front-end, parse the received string data to a JSON and then load that JSON into the spreadsheet directly as a object or via the spreadsheet.fromJSON(data) method.
It works for less data, but doesn't for this. Also I can have hundreds of thousands of rows with no problems but with data it's another story. Can you tell me if there is some better way to do this, or how to work around this error.
Thank you in advance.

Spreadsheet

answered on 23 Mar 2016

4 answers

177 views

DropDownList

using asp.net 5 clr and have Kendo version 2016.1.112. When I try to add DropDownList to a view it isn't in the intellisense and If I manually cut/paste sample code into my view I get error message "No Overload for method 'DropDownList' takes () arguments'. I have purchased UI for ASP.NET MVC and Kendo UI professional but I'm not sure it is recognizing that I have it installed or there maybe an issue with Kendo with my solution setup. I also have been unable to get things like grid to show with data but simpler components such as datepicker and color picker are working just fine.

DropDownList

answered on 23 Mar 2016

1 answer

165 views

Gantt Chart With Salesforce

I working on gantt chart for task,milestone in Force.com Platform(Salesforce) using Kendo UI. Problem is that '+Add' button doesn't work and I can't able to do dependency(s kind of arrow) and I want to update or add record to salesforce org from Gantt Chart.So its my humble request that If you provide the solution and give some example how to integrate kendo UI gantt Chart with salesforce. It will be great help for me and others.

Gantt

answered on 23 Mar 2016

15 answers

255 views

[Solved] Multiple Axes Charts

Hello,

I have a situation where i am clicking on a list of names and building chart series with some options on the fly like:

for (var i = 0; i < data.Data.length; i++) {

chartOptions.valueAxis.push({

name: data.Data[i].name + '-' + i,

min: data.Data[i].data.min(),

max: data.Data[i].data.max(),

title: {

text: data.Data[i].name + '-' + i,

visible: false

},

visible: true

});

}

// Draw Series Axes

for (var i = 0; i < data.Data.length; i++) {

chartOptions.series.push({

axis: data.Data[i].name + '-' + i,

data: data.Data[i].data,

color: seriesOptions[i].color,

highlight: {

markers: {

visible: true

}

},

name: data.Data[i].name + '-' + i,

markers: {

visible: true

},

style: seriesOptions[i].style,

type: seriesOptions[i].type,

});

}

// Draw Categories Axes

chartOptions.categoryAxis.categories = [];

for (var i = 0; i < data.Categories.length; i++) {

chartOptions.categoryAxis.categories.push(data.Categories[i]);

}

Now what is happening is for each series that i add, one new value axis is added too. My question is:

Is it possible to keep all this functionality but somehow default to have just a single value axis shown all the time while also keep the value axis array in match with the series array ?

I have attached a picture in case i am not being clear with what i am trying to achieve.

Charts

answered on 22 Mar 2016

2 answers

281 views

Forcing Waterfall Chart NOT drawn to scale

Is there a way to draw bars in a waterfall chart NOT to scale?

I have a Waterfall chart that has a large starting value (thousands) and then 5 bars that are small numbers (hundreds or less), and then finally a summary bar (which is large).

How can I draw it so the middle bars are large, and the outer bars are "not to scale".

I have created a jsfiddle to illustrate the problem:

https://jsfiddle.net/fcg9scma/

The ideal solution would be to have the middle bars be larger, and yet maintain the size of the outside bars. I tried just dividing the large numbers by 10, but it seems to be a band-aid solution that does not work for a large variety of numbers. Is there a solution that doesn't involve trying to derive a percentage to reduce the data values for the large numbers (while re-adjusting the text in the labels) ? I

Thanks

Charts

answered on 22 Mar 2016

2 answers

143 views

[Solved] KendoUI 2016 and SystemJS

SystemJS is not finding the dependent Kendo libraries with the 2016 versions of Kendo. It *does* load libraries that are loaded directly by my code. But when those libraries try to load *their* dependent libraries, SystemJS cannot find them.

I've setup two repositories to demonstrate the issue at:

https://github.com/brownieboy/kendo-systemjs-2016
https://github.com/brownieboy/kendo-systemjs-2015

The source code and config files for the two repositories should be the same. The only difference should be that they are using that one is using a 2016 version of Kendo and other is using a 2015 version. The 2015 version works and the 2016 doesn't.

Possible Related Issues
==================
http://www.telerik.com/forums/new-amd-definitions-in-v2016-1-112-are-incompatible-with-webpack
http://www.telerik.com/forums/issues-loading-latest-kendo-version-using-requirejs

General Discussions

answered on 22 Mar 2016

1 answer

110 views

[Solved] Adjusting label.step starting point

Is there any way do n+1 with step? With the dataset on one of my charts, the units are getting set to .5 When I set the step equal to 2 I’m getting 1.5, 2.5, 3.5… as my values. I’d really prefer the labels to be whole numbers.

Here’s a hardcoded example of my chart:
http://dojo.telerik.com/@kmcdaniel/OTEZO

Charts

answered on 22 Mar 2016