Questions on Kendo UI for jQuery Forum

4 answers

350 views

Tooltip, Zoom and Drag features are not working on Kendo Grid using VS2010

I'm working on ASP.NET MVC 4 project developed in C# under Visual Studio 2010 and I'm trying to add tooltips, zoom and drag features to my Kendo Chart using the "Kendo UI v2014.3.1119" version. Below the JavaScript code and DataSource i'm currently using:

JavaScript:

001.createChart: function () {

002. var $this = this;

003. $("." + $this.chartContainerID).kendoChart({

004. //renderAs: "canvas",

005. dataSource: {

006. data: barData,

007. value: "#={0}!=null"

008. },

009. panes: [{

010. title: "Future / Cash",

011. height: 300

012. }, {

013. name: "premiumPane",

014. title: "Premium",

015. padding: "3",

016. height: 120

017. }],

018. categoryAxis: {

019. pane: "premiumPane"

020. },

021. valueAxis: [{

022. // Default axis

023. line: {

024. visible: false

025. },

026. labels: {

027. format: "${0}"

028. }

029. }, {

030. // Premium Axis

031. name: "premiumAxis",

032. pane: "premiumPane",

033. visible: true,

034. narrowRange: true,

035. labels: {

036. step: 3

037. }

038. }],

039. series: [{

040. // Candlestick serie

041. type: "candlestick",

042. openField: "open",

043. highField: "high",

044. lowField: "low",

045. closeField: "close",

046. color: "green",

047. downColor: "red",

048. opacity: 0.3,

049. line: {

050. opacity: 0.8,

051. color: "black"

052. },

053. tooltip: {

054. visible: true,

055. format: "{4}<br />Open: {0:C}<br />High: {1:C}<br />Low: {2:C}<br />Close: {3:C}"

056. }

057. }, {

058. // Cash price serie

059. type: "line",

060. name: "Cash Price",

061. missingValues: "interpolate",

062. field: "cash",

063. color: "rgb(70, 80, 140)",

064. opacity: 1,

065. tooltip: {

066. visible: true,

067. template: "#= kendo.format('{0:dd/MM/yyyy}', category) # <br /> Cash Prix: #= kendo.format('{0:C}',value) #"

068. }

069. }, {

070. // Premium serie

071. type: "line",

072. field: "prim",

073. axis: "premiumAxis",

074. tooltip: {

075. visible: true,

076. template: "#= kendo.format('{0:dd/MM/yyyy}', category) # <br /> Premium Prix: #= kendo.format('{0:C}',value) #"

077.

078. }

079. }

080. ],

081. categoryAxis: {

082. categoryField: "date",

083. field: "date",

084. baseUnitStep: "auto",

085.

086. missingValues: "interpolate",

087.

088. labels: {

089. step: 20 // Render every second label

090. }

091. },

092. legend: {

093. position: "top"

094. },

095. transitions: false,

096. drag: $this.onDrag,

097. dragEnd: $this.onDragEnd,

098. zoom: $this.onZoom

099. });

100.},

101.// Drag handler

102.onDrag: function (e) {

103. debugger;

104. var chart = e.sender;

105. var ds = chart.dataSource;

106. var delta = Math.round(e.originalEvent.x.initialDelta / DRAG_THR);

107.

108. if (delta != 0) {

109. newStart = Math.max(0, viewStart - delta);

110. newStart = Math.min(barData.length - viewSize, newStart);

111. ds.query({

112. skip: newStart,

113. page: 0,

114. pageSize: viewSize,

115. sort: SORT

116. });

117. }

118.},

119.onDragEnd: function () {

120. debugger;

121. viewStart = newStart;

122.},

123.// Zoom handler

124.onZoom: function (e) {

125. debugger;

126. var chart = e.sender;

127. var ds = chart.dataSource;

128. viewSize = Math.min(Math.max(viewSize + e.delta, MIN_SIZE), MAX_SIZE);

129. ds.query({

130. skip: viewStart,

131. page: 0,

132. pageSize: viewSize,

133. sort: SORT

134. });

135.

136. // Prevent document scrolling

137. e.originalEvent.preventDefault();

138.}

DataSource:

01.var barData = [

02. { day: 1, date: "2015/05/01", open: 13, high: 19, low: 9, close: 16, cash: 18, prim: 2 },

03. { day: 2, date: "2015/05/02", open: 14, high: 16, low: 11, close: 16, cash: 18, prim: 2 },

04. { day: 3, date: "2015/05/03", open: 16, high: 21, low: 12, close: 18, cash: 16, prim: -2 },

05. { day: 4, date: "2015/05/04", open: 18, high: 40, low: 11, close: 30, cash: 33, prim: 3 },

06. { day: 5, date: "2015/05/07", open: 30, high: 45, low: 26, close: 40, cash: 42, prim: 2 },

07. { day: 6, date: "2015/05/08", open: 40, high: 80, low: 30, close: 70, cash: 66, prim: -4 },

08. { day: 7, date: "2015/05/09", open: 70, high: 80, low: 40, close: 55, cash: 57, prim: 2 },

09. { day: 8, date: "2015/05/10", open: 55, high: 65, low: 11, close: 30, cash: 35, prim: 5 },

10. { day: 9, date: "2015/05/11", open: 30, high: 45, low: 16, close: 20, cash: 18, prim: -2 },

11. { day: 10, date: "2015/05/12", open: 30, high: 45, low: 16, close: 20, cash: 18, prim: -2 },

12. { day: 11, date: "2015/05/13", open: 40, high: 80, low: 30, close: 70, cash: 66, prim: -4 },

13. {day: 14, date: "2015/05/16", open: 30, high: 45, low: 23, close: 40, cash: 43, prim: 4 },

14. { day: 15, date: "2015/05/17", open: 40, high: 80, low: 30, close: 70, cash: 73, prim: 3 },

15. { day: 16, date: "2015/05/18", open: 70, high: 80, low: 40, close: 55, cash: 56, prim: 1 },

16. { day: 17, date: "2015/05/19", open: 55, high: 65, low: 11, close: 30, cash: 33, prim: 3 },

17. { day: 18, date: "2015/05/20", open: 30, high: 45, low: 26, close: 40, cash: 42, prim: 2 },

18. { day: 19, date: "2015/05/21", open: 40, high: 80, low: 30, close: 70, cash: 72, prim: 2 },

19. { day: 20, date: "2015/05/22", open: 70, high: 80, low: 40, close: 55, cash: 57, prim: 2 },

20. { day: 21, date: "2015/05/23", open: 70, high: 80, low: 40, close: 55, cash: 56, prim: 1 },

21. { day: 22, date: "2015/05/24", open: 55, high: 65, low: 11, close: 30, cash: 33, prim: 3 },

22. { day: 23, date: "2015/05/25", open: 30, high: 45, low: 26, close: 40, cash: 42, prim: 2 },

23. { day: 24, date: "2015/05/26", open: 40, high: 80, low: 30, close: 70, cash: 72, prim: 2 },

24. { day: 25, date: "2015/05/27", open: 70, high: 80, low: 40, close: 55, cash: 57, prim: 2 },

25. { day: 26, date: "2015/05/28", open: 55, high: 65, low: 11, close: 30, cash: 33, prim: 3 },

26. { day: 27, date: "2015/05/29", open: 30, high: 45, low: 26, close: 40, cash: 42, prim: 2 },

27. { day: 28, date: "2015/05/30", open: 40, high: 80, low: 30, close: 70, cash: 72, prim: 2 },

28. { day: 29, date: "2015/05/31", open: 70, high: 80, low: 40, close: 55, cash: 57, prim: 2 }

29.];

My issue is that tooltips, zoom and drag features are not displayed / working but my kendo chart is well displayed.

Could anyone help me, please?

Thanks.

Regards,

Charts

answered on 15 Jun 2015

1 answer

95 views

Cancel edit doesnt really cancel

Working with a grid that I've made, that has a popup edit. We have a custom method for edit, add and cancel that does a little extra logic (nothing fancy). We've been finding that if you edit a record, change some of the data, but then click cancel, the data in the grid remains editted. I was able to reproduce it on one of the demo's from the API documentation.

Here's the link:

http://dojo.telerik.com/iQEte

Literally the only thing I changed from the original API documentation example was I added e.sender.refresh() before the e.preventDefault().

If you change Jane Doe to John Doe then click cancel, the grid will now say John Doe, even though you clicked cancel.

Whats going on?

Grid

answered on 15 Jun 2015

3 answers

170 views

[Solved] Line chart with category type. Smooth baseUnit swith while zoom out.

Hi.

Here is my code sample.

Now I can show maximum 30 points with 15 min. interval. But I want to be able to switch to hours smoothly when user continues zooming out.

Basically, I have to scenarios:

1) user select some time interval based on datepickers and I decide appropriate baseUnit;

2) user uses zoom out to get to appropriate baseUnit.

Lets handle second scenario. My situation is very similiar to this demo -- http://demos.telerik.com/kendo-ui/line-charts/date-axis

But I'm using category type of categoryAxis. When I start to play with date type I can't understand how it works... For example on my local data when I select days(and I have more then two weeks of one 15 min data) it always show to category (two points) and scrolling and zooming logic works very very strange.My ideal soultion for provided sample is following -- when there is already thirty 15min intervals (or 30 points) and user continues zoom out he smoothly gets to hours with the same scrolling and zooming functionality (lets consider no gaps). When he reaches say 24 hour intervals (24 points) and continue zooming he gets 'days' baseUnit and so on.

Is it achievable?

Thanks in advance.

Charts

answered on 15 Jun 2015

1 answer

179 views

Only apply filter if column visible

Hi, I am supporting a grid which dynamically hides/shows a filterable column. When the user filters on that column, it's fine. However, when the column is hidden, the filter still remains. Is there anyway to only filter on visible columns without resetting the filter value?

Grid

answered on 15 Jun 2015

6 answers

1.1K+ views

Treeview Model with Custom JSON - ASP.NET

So my company is looking into purchasing Kendo UI but first we wish to get something that actually show up. We are using the trial and the min files.

The JSON data is from multiple sql table that give a flat json, I have created a function that modifies the json using the ParentId and the Id of the entities.

asp.cs file below

public string Results = string.Empty;

public string JsonData = string.Empty;

protected void Page_Load(object sender, EventArgs e) {

var h = new EntityHiearchy(1);

if (h.Load(2)) {

Dictionary<int, Customer> dict = h.Customers.ToDictionary(cust => cust.Id);

foreach (Customer cust in dict.Values) {

if (cust.EntityParentId != 0) {

Customer parent = dict[cust.ParentId];

parent.items.Add(cust);

}

Customer root = dict.Values.First(cust => cust.ParentId == 0);

Results = JsonConvert.SerializeObject(root, new EntityJsonSettings());

JsonData = string.Format("[{0}]", Results);

}

This Dictionary converts the children items to be a list and then the list is serialized with all of the objects associated with Customer class.

the JSON min: [{"Id":1,"Address":"123 Sample Ave. ","Company":"SameComp","PostalCode":"p2k4w2","ProvinceID":2,"CityID":116,"CountryID":1,"Status":true,"ParentId":0},{"Id":2,"Address":"321 Elpmas Street","Company":"SameComp2","PostalCode":"y2n3k4","ProvinceID":8,"CityID":2,"CountryID":1,"Status":true,"ParentId":1},{"Id":3,"Address":"999 Bob Street","Company":"River Corp","PostalCode":"n2g 6m9","ProvinceID":1,"CityID":4,"CountryID":1,"Status":true,"ParentId":1}]

Once run through the aspx.cs file:

[{"Id":1,"Address":"123 Sample Ave.","Company":"SameComp","PostalCode":"p2k4w2","ProvinceID":2,"CityID":116,"CountryID":1,"Status":true,"ParentId":0,"items":[{"Id":2,"Address":"321 Elpmas Street","Company":"SameComp2","PostalCode":"y2n3k4","ProvinceID":8,"CityID":2,"CountryID":1,"Status":true,"ParentId":1},{"Id":3,"Address":"999 Bob Street","Company":"River Corp","PostalCode":"n2g 6m9","ProvinceID":1,"CityID":4,"CountryID":1,"Status":true,"ParentId":1}]}]

Notice that I have set the Sub items identifier to 'items'. You are all probabbly wondering why so much data, well when you click on a node the other side of the page loads the other data in an editable fashion Now comes my problem, I have a website that only show blank for this info and the treeview set up oh the aspx page.

ASPX Page below.

DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<link href="CSS/MenuStyles.css" type="text/css" rel="stylesheet" />

<script src="Scripts/Kendo/jquery.min.js"></script>

<script src="Scripts/Kendo/kendo.all.min.js"></script>

<script src="Scripts/Kendo/angular.min.js"></script>

<link href="Scripts/Kendo/styles/kendo.common.min.css" rel="stylesheet" />

<link href="Scripts/Kendo/styles/kendo.dataviz.black.min.css" rel="stylesheet" />

<link href="Scripts/Kendo/styles/kendo.default.min.css" rel="stylesheet" />

</head>

<body>

<form id="form1" runat="server">

<div>

<%="<script type='text/javascript' language='javascript'>var dumb_global_data = " + JsonData + ";</script>" %>

<div id="example">

<div class="demo-section">

<div id="treeview"></div>

<script>

$(document).ready(function() {

var node = kendo.data.Node.define({

hasChildren: "items",

id: "Id",

children: "items",

});

var data = new kendo.data.HierarchicalDataSource({

datasource: {

transport: {

read: dumb_global_data,

dataType: "json"

},

schema: {

model: node

}

});

$("#treeview").kendoTreeView({

dataSource: data,

dataTextField: "Company",

}).data("kendoTreeView");

});

</script>

</div>

<div class="console"></div>

<style type="text/css">

#treeview {

float: left;

width: 220px;

overflow: visible;

}

</style>

</div>

</form>

</body>

</html>

And the blank page keeps showing up. With Kendo's API references being lacking for custom JSON from SQL its very hard to figure this out.

Any suggestions, any help is appreciated? I really would like my company to stay with Kendo.

html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<link href="CSS/MenuStyles.css" type="text/css" rel="stylesheet" />

<script src="Scripts/Kendo/jquery.min.js"></script>

<script src="Scripts/Kendo/kendo.all.min.js"></script>

<script src="Scripts/Kendo/angular.min.js"></script>

<link href="Scripts/Kendo/styles/kendo.common.min.css" rel="stylesheet" />

<link href="Scripts/Kendo/styles/kendo.dataviz.black.min.css" rel="stylesheet" />

<link href="Scripts/Kendo/styles/kendo.default.min.css" rel="stylesheet" />

</head>

<body>

<form id="form1" runat="server">

<div>

<%="<script type='text/javascript' language='javascript'>var dumb_global_data = " + JsonData + ";</script>" %>

<div id="example">

<div class="demo-section">

<div id="treeview"></div>

<script>

$(document).ready(function() {

var node = kendo.data.Node.define({

hasChildren: "items",

id: "Id",

children: "items",

});

var data = new kendo.data.HierarchicalDataSource({

datasource: {

transport: {

read: dumb_global_data,

dataType: "json"

},

schema: {

model: node

}

});

$("#treeview").kendoTreeView({

dataSource: data,

dataTextField: "Company",

}).data("kendoTreeView");

});

</script>

</div>

<div class="console"></div>

<style type="text/css">

#treeview {

float: left;

width: 220px;

overflow: visible;

}

</style>

</div>

</form>

</body>

</html>

html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<link href="CSS/MenuStyles.css" type="text/css" rel="stylesheet" />

<script src="Scripts/Kendo/jquery.min.js"></script>

<script src="Scripts/Kendo/kendo.all.min.js"></script>

<script src="Scripts/Kendo/angular.min.js"></script>

<link href="Scripts/Kendo/styles/kendo.common.min.css" rel="stylesheet" />

<link href="Scripts/Kendo/styles/kendo.dataviz.black.min.css" rel="stylesheet" />

<link href="Scripts/Kendo/styles/kendo.default.min.css" rel="stylesheet" />

</head>

<body>

<form id="form1" runat="server">

<div>

<%="<script type='text/javascript' language='javascript'>var dumb_global_data = " + JsonData + ";</script>" %>

<div id="example">

<div class="demo-section">

<div id="treeview"></div>

<script>

$(document).ready(function() {

var node = kendo.data.Node.define({

hasChildren: "items",

id: "Id",

children: "items",

});

var data = new kendo.data.HierarchicalDataSource({

datasource: {

transport: {

read: dumb_global_data,

dataType: "json"

},

schema: {

model: node

}

});

$("#treeview").kendoTreeView({

dataSource: data,

dataTextField: "Company",

}).data("kendoTreeView");

});

</script>

</div>

<div class="console"></div>

<style type="text/css">

#treeview {

float: left;

width: 220px;

overflow: visible;

}

</style>

</div>

</form>

</body>

</html>

html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<link href="CSS/MenuStyles.css" type="text/css" rel="stylesheet" />

<script src="Scripts/Kendo/jquery.min.js"></script>

<script src="Scripts/Kendo/kendo.all.min.js"></script>

<script src="Scripts/Kendo/angular.min.js"></script>

<link href="Scripts/Kendo/styles/kendo.common.min.css" rel="stylesheet" />

<link href="Scripts/Kendo/styles/kendo.dataviz.black.min.css" rel="stylesheet" />

<link href="Scripts/Kendo/styles/kendo.default.min.css" rel="stylesheet" />

</head>

<body>

<form id="form1" runat="server">

<div>

<%="<script type='text/javascript' language='javascript'>var dumb_global_data = " + JsonData + ";</script>" %>

<div id="example">

<div class="demo-section">

<div id="treeview"></div>

<script>

$(document).ready(function() {

var node = kendo.data.Node.define({

hasChildren: "items",

id: "Id",

children: "items",

});

var data = new kendo.data.HierarchicalDataSource({

datasource: {

transport: {

read: dumb_global_data,

dataType: "json"

},

schema: {

model: node

}

});

$("#treeview").kendoTreeView({

dataSource: data,

dataTextField: "Company",

}).data("kendoTreeView");

});

</script>

</div>

<div class="console"></div>

<style type="text/css">

#treeview {

float: left;

width: 220px;

overflow: visible;

}

</style>

</div>

</form>

</body>

</html>

html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<link href="CSS/MenuStyles.css" type="text/css" rel="stylesheet" />

<script src="Scripts/Kendo/jquery.min.js"></script>

<script src="Scripts/Kendo/kendo.all.min.js"></script>

<script src="Scripts/Kendo/angular.min.js"></script>

<link href="Scripts/Kendo/styles/kendo.common.min.css" rel="stylesheet" />

<link href="Scripts/Kendo/styles/kendo.dataviz.black.min.css" rel="stylesheet" />

<link href="Scripts/Kendo/styles/kendo.default.min.css" rel="stylesheet" />

</head>

<body>

<form id="form1" runat="server">

<div>

<%="<script type='text/javascript' language='javascript'>var dumb_global_data = " + JsonData + ";</script>" %>

<div id="example">

<div class="demo-section">

<div id="treeview"></div>

<script>

$(document).ready(function() {

var node = kendo.data.Node.define({

hasChildren: "items",

id: "Id",

children: "items",

});

var data = new kendo.data.HierarchicalDataSource({

datasource: {

transport: {

read: dumb_global_data,

dataType: "json"

},

schema: {

model: node

}

});

$("#treeview").kendoTreeView({

dataSource: data,

dataTextField: "Company",

}).data("kendoTreeView");

});

</script>

</div>

<div class="console"></div>

<style type="text/css">

#treeview {

float: left;

width: 220px;

overflow: visible;

}

</style>

</div>

</form>

</body>

</html>

TreeView

answered on 15 Jun 2015

1 answer

226 views

c[t].isNew is not a function

Hi All,

I got the following error when I clicked on the 'Update' button from the 'template' popup window. Is there a fix for this?

Uncaught TypeError: c[t].isNew is not a function

ht.extend.sync @ kendo.all.min.js:11

pt.ui.DataBoundWidget.extend.saveRow @ kendo.all.min.js:29

pt.ui.DataBoundWidget.extend._editUpdateClick @ kendo.all.min.js:29

b.extend.proxy.b.isFunction.i @ jquery.min.js:3

b.event.dispatch @ jquery.min.js:3

$event.dispatch @ jquery.event.drag-2.2.js:374

b.event.add.v.handle @ jquery.min.js:3

Please let me know if you need more info.

TIA

Window

answered on 15 Jun 2015

1 answer

102 views

ng-valid Issue

I implemented the functionality from here to clear text when it doesnt match an item from the datasource however the input is marked valid even though it is marked required. How do I correct this?

ComboBox

answered on 15 Jun 2015

1 answer

136 views

Kendo Grid and Angular

What is the recommended way to bind data to the Kendo Grid when using the Kendo Angular directives? I have seen code that uses the Kendo DataSource. I have seen code that uses the Kendo Observable Array. What is the right method?

Also, here is some background on the functionality of the grid that I will be needing on my project in case this influences the binding method. The grid will have a large number of columns (could be up to 200 columns) and the row size could reach about 10,000 rows. The rows will need to be able to be edited inline.
Some of the columns will be calculated columns off of columns with data. Some of the columns will be calculations off of other calculated columns. Also, all of the calculations will need to update when a value in the calculation changes. These calculations can be complex, so I had thought that I would use an Angular formula service that could be called to make the calculation and return the value.

I am experiencing extreme slowness in the grid because of these requirements or at least how I currently have them implemented. I am not sure if sure if it is because Angular is watching the values and updating too many spots or something else.

Thanks.

Grid

answered on 15 Jun 2015

3 answers

224 views

Recurring event with timezone shown incorrect after remove an exception

I try to use the scheduler with timezone.

For example, I ajdusted "Africa/Nairobi" (GMT+03:00 Nairobi) timezone for the scheduler.
I'm creating a daily recurring event with timezone "America/Sao_Paulo" (GMT-03:00 Brasilia) at 1:00 PM. And create an exception for this series, just changing description.
The series and exception shown correctly on the scheduler at 7:00 PM.
After I removed the exception, the series moved and shown at 1:00 PM on the scheduler.

I tried to use setting "timezone" of datasource to set "Africa/Nairobi" and tried adjust currentTimeMarker property but it is not help.

I can to reproduce it on the http://dojo.telerik.com. Just open http://demos.telerik.com/kendo-ui/scheduler/index and click on "Edit This Example" and just change timezone to "Africa/Nairobi" in the code.

Scheduler

answered on 15 Jun 2015

6 answers

240 views

[Solved] template for alternating row in mvvm

How does one bind the alternating row template in mvvm.
Can't seem to find a declarative way to do it
Its not data-alt-row-template and its not data-row-alt-template
What am I overlooking.

<script id="AlertViewTemplate" type="x-kendo-template">

<div data-role="grid" id="gridAlerts"

data-scrollable="true"

data-row-template="AlertRowTemplate"

data-alt-row-template="AlertAltRowTemplate"

data-columns="[

{ field: 'idradio', title: 'Radio ID' },

{ field: 'idthing', title: 'FCI Serial#' },

{ field: 'typealertdescription', title: 'Alert' },

{ field: 'clearactiondescription', title: 'Status' },

{ field: 'datecreated', title: 'Date Logged' },

{ field: 'datecleared', title: 'Date Cleared' }