Questions on Kendo UI for jQuery Forum

1 answer

457 views

Tooltip using a dataItem which is an array

I'm developing a stacked chart in Kendo UI. The datasource provides objects which have properties and 2 nested objects. 1 of these nested objects provides the data for the chart. The other nested object provides numbers I need to show in the Tooltip. I set the Tooltip Template like this:

.Template("#= value #% - N:#= dataItem.numbers #"))

where value references the first nested object with data (are percentages). This works fine. dataItem.numbers references the second nested object (with corresponding numbers). I would like to show the corresponding numbers. But I always get "undefined" as result.

How can I change this code so the corresponding numbers are shown in the Tooltip?

.Series(series =>
{
foreach (var s in Model.StapeltrendSerie)
{
if (s.type.Equals("column"))
{
series.Column(s.data)
.Name(s.name)
.Axis("Percentage")
.Stack(true)
.Color(s.color)
.Tooltip(tooltip => tooltip
.Visible(true)
.Template("#= value #% - N:#= dataItem.numbers #"))
.Labels(labels => labels.Visible(false))
.GroupNameTemplate("#= group.value # (#= series.name #)");
}else if (s.type.Equals("line") && Model.TrendlijnWeergeven)
{
series.Line(s.data).Markers(m => m.Type(ChartMarkerShape.Circle))
.Name(s.name)
.Axis("Score")
.Stack(false)
.Color("#"+Model.TrendlijnKleur)
.Tooltip(tooltip => tooltip.Visible(false))
.Labels(labels => labels.Visible(true))
.GroupNameTemplate("#= group.value # (#= series.name #)");
}

}
})

This is the object represented by s

public class StapeltrendSerieModel
{
public decimal[] data { get; set; }
public int[] numbers { get; set; }
public string type { get; set; }
public bool stack { get; set; }
public string name { get; set; }
public string color { get; set; }
public string axis { get; set; }
public string category { get; set; }
public int order { get; set; }
}

s.data is an array of decimals. (percentages) s.numbers contains the corresponding numbers (as integers) And I was hoping dataItem.numbers would do the trick. But of course DataItem refers to an entry of the s.data array. How can I address the s.numbers value?

ToolTip

answered on 29 Jul 2014

2 answers

406 views

[Solved] Autosize column widths with scrollable virtual = true

In my grid, I am updating it to use the Virtualization of Remote Data (and removing the discrete paging via next/previous buttons). In the code, I am changing from scrollable: false to scrollable: { virtual: true }.

The side effect of this is that my columns, which were sized according to the content (when scrollable was false) are now all the same width. Note that I do not have any widths set on any of the columns.

What I would like is to be able to transition to virtual paging (virtual scolling or whatever it's called) and retain the auto width of the columns.

Thinking about it, it does make some sense. You don't know the width of the data that has not yet been populated into the grid like you do with discrete pages (via next/previous buttons). But, Kendo must have a method to autosize the columns to the content that I can, at the least, call myself to autosize in the dataBound event when the first page is done fetching data?

Thanks,
--Ed

Grid

answered on 29 Jul 2014

1 answer

347 views

[Solved] Initiate PanelBar Content from DataSource

I am using below code to populate the content of a panel bar. If I hard code source value to a json string, all works well. But, when I read the source value from a service, no luck. Please refer below for the relevant code.
Thanks for your time and help.

<script>
$(document).ready(function() {
var app = new kendo.mobile.Application(document.body);
$("#viewtitle").html("Navi 4");

var viewModel = kendo.observable({
invitations: new kendo.data.DataSource({
transport: {
read: {
dataType: "json",
url: "http://localhost:8080/NavXzy/rest/SecurityService/getNotifications?emailAddress=hd@bc.ca"
}
}
})
});

kendo.bind($("#invitationsDiv"), viewModel);
$("#invitationsPanelBar").kendoPanelBar({});
});
</script>

PanelBar

answered on 29 Jul 2014

1 answer

72 views

Legend Title

Is there a way to create a title for a chart legend.

I have a scatter chart and would like to have a legend title similar to the mockup in the attached image.

This chart is dynamically when the browser is resized so I believe it would be difficult to use a label with absolute positioning.

Charts

answered on 29 Jul 2014

3 answers

546 views

Style help for .k-item or other .k classes

<style >

.k-popup .k-item

{

font: 8px/1.8em bold Arial, Helvetica, sans-serif;

}

</style>

So say I have 2 dropdowns, and I only want 1 of them to use the above for the dropdown list. How would I style it?
The 2 below are kendo dropdown lists

<div id="dd1" class="dd1">

<input id="color1" value="1" />

</div>

<div id="dd2" class="dd2">

<input id="color2" value="1" />

</div>

General Discussions

answered on 28 Jul 2014

1 answer

152 views

DetailGrid DataSource using functions for CRUD ops

I have a master grid which is a list of applications. The detailrow contains a grid to allow for CRUD operations on roles for that application. I have Create, Read, Update, and Delete working for the master grid, but not for the detail grid.

We are using AngularJS, as well as a repository pattern for the CRUD ops, so none of the examples I've seen seem to correlate to this. I'll just paste my code and that should make things more clear.

First, my manageApps.html:

<div class="row">

<div class="col-md-12">

<div class="title">Manage Applications</div>

</div>

<div id="applicationInfoGrid" ng-controller="manageApps as vm">

<div kendo-grid k-options="manageAppsGridOptions"></div>

<script type="text/x-kendo-template" id="rolesGridTemplate">

<span>Roles for {{dataItem.appName}}</span>

<div kendo-grid k-options="detailGridOptions(dataItem)"></div>

</script>

</div>

Next, the manageApps.js file:

001.(function () {

002. 'use strict';

003.

004. var controllerId = 'manageApps';

005. angular.module('app').controller(controllerId, ['$scope', 'applicationInfoRepository', 'roleRepository', manageApps]);

006.

007. function manageApps($scope, applicationInfoRepository, roleRepository) {

008.

009. $scope.custom = {};

010.

011. $scope.custom.error = false;

012.

013. var showError = function () {

014. $scope.custom.error = true;

015. };

016.

017. var openSuccess = function (message, org) {

018. $scope.custom.message = message;

019. $scope.custom.orgVal = org;

020. var instance = $modal.open({

021. templateUrl: "Success.html",

022. scope: $scope,

023. windowClass: 'modal-dialog-center'

024. });

025. return instance;

026. };

027.

028. var openConfirm = function (org) {

029. $scope.custom.orgVal = org;

030. var instance = $modal.open({

031. templateUrl: "Confirm.html",

032. scope: $scope,

033. windowClass: 'modal-dialog-center'

034. });

035. return instance;

036. };

037.

038. var readApps = function (options) {

039. applicationInfoRepository.getApps().then(function (data) {

040. options.success(data);

041. }, showError);

042. };

043.

044. var createApp = function (options) {

045. applicationInfoRepository.addApp(options.data).then(function (data) {

046. options.success(data);

047. openSuccess('added', data.appName);

048. }, showError);

049. };

050.

051. var updateApp = function (options) {

052. applicationInfoRepository.updateApp(options.data).then(function () {

053. options.success(options.data);

054. openSuccess('updated', options.data.appName);

055. }, showError);

056. };

057.

058. var deleteApp = function (options) {

059. applicationInfoRepository.deleteApp(options.data.appName).then(function () {

060. options.success(options.data);

061. openSuccess('deleted', options.data.appName);

062. }, showError);

063. };

064.

065. var appListDataSource = new kendo.data.DataSource({

066. type: 'json',

067. errors: 'errorHandler',

068. transport: {

069. read: readApps,

070. create: createApp,

071. update: updateApp,

072. destroy: deleteApp,

073. parameterMap: function (data, operation) {

074. if (operation !== "read") {

075. return JSON.stringify(data);

076. } else {

077. return kendo.data.transports["odata"].parameterMap(data, operation);

078. }

079. }

080. },

081. schema: {

082. errors: "error",

083. edit: "onEdit",

084. model: {

085. id: 'appName',

086. fields: {

087. appName: {

088. type: 'string',

089. editable: true,

090. validation: { required: { message: "Application Name is required." } },

091. },

092. active: { type: 'boolean', defaultValue: true }

093. }

094. }

095. },

096. error: function (e) {

097. var obj = JSON.parse(e.xhr.responseText);

098. alert(obj.error + ': ' + obj.message);

099. }

100. });

101.

102. $scope.manageAppsGridOptions = {

103. dataSource: appListDataSource,

104. sortable: true,

105. pageable: false,

106. scrollable: false,

107. detailTemplate: kendo.template($("#rolesGridTemplate").html()),

108. editable: {

109. mode: "inline",

110. confirmation: function (e) {

111. return "Are you sure that you want to delete the application '" + e.appName + "' and all associated application roles and role users?";

112. }

113. },

114. toolbar: [{ name: 'create', text: 'Add New Application' }],

115. edit: function (e) {

116. if (!e.model.isNew()) {

117. $('input[name=appName]').parent().html(e.model.appName);

118. }

119. },

120. columns: [

121. {

122. command: ["edit", "destroy"],

123. title: " ",

124. width: "185px"

125. }, {

126. field: "appName",

127. title: "Application Name",

128. required: true

129. }, {

130. field: "active",

131. title: "Active",

132. width: "60px",

133. template: "<input type='checkbox' disabled='disabled' #= active ? 'checked=\"checked\"' : '' # />"

134. }

135. ]

136. };

137.

138. var readRoles = function (options) {

139. roleRepository.getRolesByAppName(options.data.appName).then(function (data) {

140. options.success(data);

141. }, showError);

142. };

143.

144. var createRole = function (options) {

145. roleRepository.addRole(options.data).then(function (data) {

146. options.success(data);

147. openSuccess('added', data.roleName);

148. }, showError);

149. };

150.

151. var updateRole = function (options) {

152. roleRepository.updateRole(options.data).then(function () {

153. options.success(options.data);

154. openSuccess('updated', options.data.roleName);

155. }, showError);

156. };

157.

158. var deleteRole = function (options) {

159. roleRepository.deleteRole(options.data.roleId).then(function () {

160. options.success(options.data);

161. openSuccess('deleted', options.data.roleName);

162. }, showError);

163. };

164.

165. var roleListDataSource = new kendo.data.DataSource({

166. type: 'json',

167. errors: 'errorHandler',

168. transport: {

169. read: readRoles,

170. create: createRole,

171. update: updateRole,

172. destroy: deleteRole,

173. parameterMap: function(data, operation) {

174. if (operation !== "read") {

175. return JSON.stringify(data);

176. } else {

177. return kendo.data.transports["odata"].parameterMap(data, operation);

178. }

179. }

180. },

181. schema: {

182. errors: "error",

183. edit: "onEdit",

184. model: {

185. id: 'roleId',

186. fields: {

187. roleId: {

188. type: 'int',

189. editable: false,

190. validation: { required: { message: "Role Id is required." } },

191. },

192. roleName: {

193. type: 'string',

194. validation: { required: { message: "Role Name is required." } },

195. },

196. roleDescription: {

197. type: 'string',

198. }

199. }

200. }

201. },

202. error: function (e) {

203. var obj = JSON.parse(e.xhr.responseText);

204. alert(obj.error + ': ' + obj.message);

205. }

206. });

207.

208. $scope.detailGridOptions = function (dataItem) {

209. return {

210. dataSource: roleListDataSource,

211. sortable: true,

212. pageable: false,

213. scrollable: false,

214. editable: {

215. mode: "inline",

216. confirmation: function (e) {

217. return "Are you sure that you want to delete the role '" + e.roleName + "' and all associated role users?";

218. }

219. },

220. toolbar: [{ name: 'create', text: 'Add New Role' }],

221. columns: [

222. {

223. command: ["edit", "destroy"],

224. title: " ",

225. width: "185px"

226. }, {

227. field: "roleName",

228. title: "Role Name",

229. required: true

230. }, {

231. field: "roleDescription",

232. title: "Role Description",

233. width: "500px",

234. }

235. ]

236. };

237. }

238. }

239.})();

I know that's a lot, and I'd like to eventually refactor all this into separate directives, but I think that would complicate things even further. I'd like to get it working first.

The biggest issue right now is that the "data" property inside the "readRoles" function doesn't contain any data. I don't even know what is supposed to populate this; I copied the code from somewhere else, and it worked fine for the CRUD functions for the master grid ("readApps", "createApp", "updateApp", and "deleteApp"), but there is no data in the "data" property when "readRoles" is called. I can only assume the "createRole", "updateRole", and "deleteRole" functions will have the same problem, but I can't test those yet.

I have a feeling I need to use the "dataItem" parameter in the "detailGridOptions", something like "dataSource: roleListDataSource(dataItem)" but I can't figure out how to make the kendo.data.DataSource declaration take a parameter, or even if that would work here.

Also, is it the case that the "parameterMap" properties are ignored for these DataSources, since I'm using CRUD functions? I think I read that somewhere. If so, I'll just delete them.

Then, once I get this all working, how would I split these into directives without messing everything up? Or is this something I should even do? I'm new to AngularJS and Kendo, but learning by "trial by fire". I understand most tutorials and examples, but they all do things the "simple" way, and our team is trying to do things by separating concerns, etc. so using repositories, etc.

Thanks in advance for any help!
Chris

Grid

answered on 28 Jul 2014

1 answer

169 views

DatePicker against DateTime data

data field looks like this
DateOfBirth=1969-09-30T00:00:00

and
         schema: {
            model: {
                fields: {
                    DateOfBirth: {
                        type: "date"
                    }
                }
            }

filterable: {
                    ui: function datetimepicker(control) {
                        control.kendoDatePicker({
                            format: "MM-dd-yyyy hh:mm tt",
                            parseFormats: ["MM-dd-yyyy", "MM/dd/yyyy", "HH:mm"]
                        });
                    }
                }

when i filter with kendoDatePicker with an entry of 9/30/1969 i get no results back

i have formatted the display to only show the date part

how can i filter by typing a date of 9/30/1969 and get results back?

DatePicker

answered on 28 Jul 2014

5 answers

1.1K+ views

[Solved] Popup Data Editing with row selection and Add/Edit/Delete buttons outside grid

I would like to have almost the same behavior as the demo on "popup data editing" except this is going into a responsive (with bootstrap) environment where we don't have any room for columns to contain the edit/delete buttons.
http://demos.telerik.com/kendo-ui/grid/editing-popup

What I would like to change is to have the grid be selectable (row) and the edit/delete buttons, which will be above the grid, will enable/disable based on the count of rows selected (edit enabled when 1 row selected; delete enabled with 1..n rows selected). The add new record button will also need to be outside the grid (unsure whether it will be above or below the grid).

My question is: can I hook into the same functionality that is available in this example while having row selection enabled and the buttons outside the grid?

jsFiddle/jsBin would be great if you can generate one.

Thanks,
--Ed

Grid

answered on 28 Jul 2014

3 answers

132 views

Radar chart features and functionality

Hi Team,

Glad to see the information in the roadmap, that Radarchart is going to be released in Q2. Just I am curious to know what are the features and functionality provided for this chart in the First release. This will help us in plan our activities and help us in requesting any missing functionality .

I appreciate if you could provide the Radar chart features details and if possible basic/development version of the Radarchart to explore more.

Thanks in advance.

Regards
Mohan Naidu

Charts

answered on 28 Jul 2014

1 answer

346 views

Implementing access control for Kendo Widgets

Hi,
I use Kendo UI widgets for my front end with Spring MVC in the back-end. I need to implement access control for my widgets and I'm looking into various ways in which this can be done.

For example, I would like to enable edit operations for the Kendo Grid only is the user has the required authorization. Or I do not want to display a widget on my web page, if the user is not authorized for it.

What are the different ways in which Kendo UI users implement access control? Are there any recommended approaches to do this or any other libraries that might help with the implementation.

Thanks,

General Discussions

answered on 28 Jul 2014