Questions on Kendo UI for jQuery Forum

2 answers

1.1K+ views

I'm trying to disable and enable validation depending on the user selection. On my solution i would like to only validate if the user enters a start or end date. So far if you look at part of my solution code(copied to kendo ui dojo http://dojo.telerik.com/uyOHa ) i have some of the validation working. I will put down a couple of scenario on how i need it to work.

scenario 1(working)

User doesn't enter dates, Validation not needed

scenario 2(working)

User enters a start or end date. This will validate the text boxes.

scenario 3(NOT WORKING)

User enters start and end date. Click Search. Then Clear both date fields and validation is how showing for these two text boxes. I wish to have the validation hidden at this point. The only way i can do this so far is by clearing the text boxes then hitting search again.

Thanks in advance!

Validation

answered on 22 Jan 2015

2 answers

197 views

TreeView and SignalR

Hi!

I would like to use SignalR as data source of a MVVM TreeView, so I took the Grid SignalR example and I tried to modify it but I couldn't get it to work.

Here is what I got so far (app.js):

01.var viewModel;

02.

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

04.

05. var hubUrl = "signalr/hubs";

06. var connection = $.hubConnection(hubUrl, {useDefaultPath: false});

07. var hub = connection.createHubProxy("eventHub");

08. var hubStart = connection.start({jsonp: true});

09.

10. viewModel = kendo.observable({

11. allEvents: new kendo.data.HierarchicalDataSource({

12. type: "signalr",

13. autoSync: true,

14. push: function (e) {

15.

16. },

17. schema: {

18. model: {

19. id: "Id",

20. fields: {

21. "Id": {type: "number"},

22. "Name": {type: "string"},

23. "HasChildren": {type: "boolean"}

24. },

25. hasChildren: "HasChildren",

26. children: "Children"

27. }

28. },

29. transport: {

30. signalr: {

31. promise: hubStart,

32. hub: hub,

33. server: {

34. read: "read",

35. update: "update"

36. }

37. }

38. }

39. })

40. });

41.

42. kendo.bind($("body"), viewModel);

43.

44.

45.});

The HTML is pretty simple:

01.<body>

02.

03.<div id="content">

04.

05. <div data-role="treeview"

06. data-text-field="Name"

07. data-bind="source: allEvents"></div>

08.

09.</div>

10.

11.<script type="text/javascript" src="app.js"></script>

12.

13.</body>

And this is my Hub:

01.public class EventHub : Hub

02. {

03. public IEnumerable<Branch> Read()

04. {

05. return new List<Branch>

06. {

07. new Branch("Test branch 1", 1, new List<Branch> {new Branch("Test event 1", 2)}),

08. new Branch("Test branch 2", 3)

09. };

10. }

11.

12. public void Update(Branch branch)

13. {

14. Clients.Others.update(branch);

15. }

16. }

17.

18. public class Branch

19. {

20. public Branch()

21. {

22. Children = new List<Branch>();

23. }

24.

25. public Branch(string name, long id)

26. : this()

27. {

28. Name = name;

29. Id = id;

30. }

31.

32. public Branch(string name, long id, IEnumerable<Branch> children)

33. : this(name, id)

34. {

35. Children = children;

36. }

37.

38. public IEnumerable<Branch> Children { get; set; }

39. public string Name { get; set; }

40. public long Id { get; set; }

41. public Boolean HasChildren

42. {

43. get { return Children != null && Children.Any(); }

44. }

45. }

The first level ("Test branch 1" and "Test branch 2") is shown, but as soon as I click on the expand arrow, I get a javascript error. I would be happy if you could tell me where the problem is here or - even better - post a full example of a TreeView in combination with SignalR.

Thanks!

TreeView

answered on 22 Jan 2015

2 answers

125 views

how to show appointment resources in kendoTooltip

Hi
I'm using kendo tooltip to display tooltips on events in a scheduler as shown in this thread.

It looks fine, but I can't find a way to display the appointment resources in the tooltip.
is there a way to do that?

thank you in advance

Scheduler

answered on 22 Jan 2015

1 answer

474 views

Kendo.Drawing.drawDOM

Good Afternoon. I am trying to generate a pdf document of raw html. But when i generate the pdf, the special caracters (ñ,á,é,í,ó,ú) appear in wrong symbols. what happening with this?

Thanks for the support.

General Discussions

answered on 22 Jan 2015

3 answers

90 views

Agenda View showing more days than data includes

For this data:

Why does the Schedule show anything on the 16th (see below)? (dataSource.schema.timezone is "America/Los_Angeles")

Thanks,
Brad

Scheduler

answered on 22 Jan 2015

1 answer

141 views

Numeric format rounds to two decimal irrespective of the format

Hi,
I am using the latest version of the Kendo library.
I am using following code to convert a textbox to numeric box,

$("#initial").kendoNumericTextBox({
format: "{0:n5}",
decimal: 5,
spinners: false
});

When i enter 1.23 then output format to 1.23000
But when i enter 1.23456 then output format to 1.23000 instead of 1.23456

Can you please let me know whether is it bug in numeric box or something wrong in the code?

NumericTextBox

answered on 22 Jan 2015

4 answers

118 views

MVC Wrapper ClientTemplate?

I created a column sparkline as such:

@(Html.Kendo().Sparkline()

.Name("Minutes")

.ChartArea(c => c.Height(100))

.DataSource(ds => ds

.Read(read => read.Url(Url.HttpRouteUrl("DefaultApi", new { controller = "UtilizationCall30Day" })).Type(HttpVerbs.Get))

)

.Series(series => series

.Column("SecondCount").Color("#00ADEE")

)

Is there a way I can pass in a javascript function to convert the values from seconds to minutes?

Sparkline

answered on 22 Jan 2015

1 answer

216 views

Custom Edit Template with select box

Hi

I am trying to edit simple Data via edit popup template.

http://jsfiddle.net/g1766k8y/2/

In this template I am trying to read the "city" data and highlight this in a selectbox which contains all available "cities" saved in an array (can hence come from another datasource).

This is important because finally I have a list of clients which have a currency assigned to them, so in the edit template I need to load the complete list of available currencies and then highlight the one which is assigned to the client (so in the select <option selected>USD</selected> for example).

Many thanks

Grid

answered on 22 Jan 2015

14 answers

236 views

Clicking a link to an external view is loaded only once

I have a SplitView with links in the left pane. All links are pointing to one external view, which is called with different parameters at the URL, so the response is always another one.

When you take the HTML code below, you will see, that the external view site is loaded only once, not taking care about the URL parameters given. Can I disable this external view load caching?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>WG4 - Online visualization</title>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<link href="/Content/site.css" rel="stylesheet"/>

<script src="/Scripts/modernizr-2.6.2.js"></script>

</head>
<body>


<div id="home" data-role="splitview" data-layout="default">
<div data-role="pane" data-layout="side-default" data-transition="slide">
<div data-role="view" data-title="WG4 - Online visualization" id="side-root">
<ul data-role="listview" data-style="inset" data-type="group">
<li>Cluster View
<ul>
<li>
<a href="#clusterview">
<table>
<tr>
<td>Coal  </td>
<td>
<div style="background-image: url(/Image/Gauge?gaugeInfos=%7b%22PMax%22%3a15635%2c%22ActualPower%22%3a6257%2c%22GaugeValue%22%3a40.019187719859290054365206268%2c%22Available%22%3a0%7d) !important; width: 40px; height: 10px"></div>
</td>
<td style="font-size:9px;">
6257 MW
</td>
</tr>
</table>
</a>
</li>

<li>
<a href="#clusterview">
<table>
<tr>
<td>Gas BeNeLux  </td>
<td>
<div style="background-image: url(/Image/Gauge?gaugeInfos=%7b%22PMax%22%3a10238%2c%22ActualPower%22%3a5227%2c%22GaugeValue%22%3a51.054893533893338542684117992%2c%22Available%22%3a0%7d) !important; width: 40px; height: 10px"></div>
</td>
<td style="font-size:9px;">
5227 MW
</td>
</tr>
</table>
</a>
</li>

<li>
<a href="#clusterview">
<table>
<tr>
<td>Gas FR & SE  </td>
<td>
<div style="background-image: url(/Image/Gauge?gaugeInfos=%7b%22PMax%22%3a8635%2c%22ActualPower%22%3a5363%2c%22GaugeValue%22%3a62.107701215981470758540822235%2c%22Available%22%3a0%7d) !important; width: 40px; height: 10px"></div>
</td>
<td style="font-size:9px;">
5363 MW
</td>
</tr>
</table>
</a>
</li>

</ul>
</li>
<li>Country View
<ul data-role="listview" data-style="inset">
<li>
<a href="/DeviceScaled/CountryMenu?country=Italy" data-role="button">
<table>
<tr>
<td>Italy  </td>
<td>
<div style="background-image: url(/Image/Gauge?gaugeInfos=%7b%22PMax%22%3a201%2c%22ActualPower%22%3a128%2c%22GaugeValue%22%3a63.681592039800995024875621891%2c%22Available%22%3a0%7d) !important; width: 40px; height: 10px"></div>
</td>
<td style="font-size:9px;">
128 / 201 MW <b>Spot:</b> 45,6€/MWh  <b>Load:</b> 8692 MW
</td>
</tr>
</table>
</a>
</li>

<li>
<a href="/DeviceScaled/CountryMenu?country=BeLux" data-role="button">
<table>
<tr>
<td>BeLux  </td>
<td>
<div style="background-image: url(/Image/Gauge?gaugeInfos=%7b%22PMax%22%3a3308%2c%22ActualPower%22%3a1907%2c%22GaugeValue%22%3a57.648125755743651753325272068%2c%22Available%22%3a0%7d) !important; width: 40px; height: 10px"></div>
</td>
<td style="font-size:9px;">
1907 / 3308 MW <b>Spot:</b> 45,6€/MWh  <b>Load:</b> 8692 MW
</td>
</tr>
</table>
</a>
</li>

<li>
<a href="/DeviceScaled/CountryMenu?country=Netherlands" data-role="button">
<table>
<tr>
<td>Netherlands  </td>
<td>
<div style="background-image: url(/Image/Gauge?gaugeInfos=%7b%22PMax%22%3a351%2c%22ActualPower%22%3a231%2c%22GaugeValue%22%3a65.811965811965811965811965812%2c%22Available%22%3a0%7d) !important; width: 40px; height: 10px"></div>
</td>
<td style="font-size:9px;">
231 / 351 MW <b>Spot:</b> 45,6€/MWh  <b>Load:</b> 8692 MW
</td>
</tr>
</table>
</a>
</li>

<li>
<a href="/DeviceScaled/CountryMenu?country=Germany" data-role="button">
<table>
<tr>
<td>Germany  </td>
<td>
<div style="background-image: url(/Image/Gauge?gaugeInfos=%7b%22PMax%22%3a352%2c%22ActualPower%22%3a263%2c%22GaugeValue%22%3a74.715909090909090909090909091%2c%22Available%22%3a0%7d) !important; width: 40px; height: 10px"></div>
</td>
<td style="font-size:9px;">
263 / 352 MW <b>Spot:</b> 45,6€/MWh  <b>Load:</b> 8692 MW
</td>
</tr>
</table>
</a>
</li>

<li>
<a href="/DeviceScaled/CountryMenu?country=France" data-role="button">
<table>
<tr>
<td>France  </td>
<td>
<div style="background-image: url(/Image/Gauge?gaugeInfos=%7b%22PMax%22%3a146%2c%22ActualPower%22%3a142%2c%22GaugeValue%22%3a97.26027397260273972602739726%2c%22Available%22%3a0%7d) !important; width: 40px; height: 10px"></div>
</td>
<td style="font-size:9px;">
142 / 146 MW <b>Spot:</b> 45,6€/MWh  <b>Load:</b> 8692 MW
</td>
</tr>
</table>
</a>
</li>

<li>
<a href="/DeviceScaled/CountryMenu?country=Poland" data-role="button">
<table>
<tr>
<td>Poland  </td>
<td>
<div style="background-image: url(/Image/Gauge?gaugeInfos=%7b%22PMax%22%3a362%2c%22ActualPower%22%3a309%2c%22GaugeValue%22%3a85.3591160220994475138121547%2c%22Available%22%3a0%7d) !important; width: 40px; height: 10px"></div>
</td>
<td style="font-size:9px;">
309 / 362 MW <b>Spot:</b> 45,6€/MWh  <b>Load:</b> 8692 MW
</td>
</tr>
</table>
</a>
</li>

<li>
<a href="/DeviceScaled/CountryMenu?country=Spain" data-role="button">
<table>
<tr>
<td>Spain  </td>
<td>
<div style="background-image: url(/Image/Gauge?gaugeInfos=%7b%22PMax%22%3a218%2c%22ActualPower%22%3a180%2c%22GaugeValue%22%3a82.56880733944954128440366972%2c%22Available%22%3a0%7d) !important; width: 40px; height: 10px"></div>
</td>
<td style="font-size:9px;">
180 / 218 MW <b>Spot:</b> 45,6€/MWh  <b>Load:</b> 8692 MW
</td>
</tr>
</table>
</a>
</li>

<li>
<a href="/DeviceScaled/CountryMenu?country=Greece" data-role="button">
<table>
<tr>
<td>Greece  </td>
<td>
<div style="background-image: url(/Image/Gauge?gaugeInfos=%7b%22PMax%22%3a100%2c%22ActualPower%22%3a86%2c%22GaugeValue%22%3a86%2c%22Available%22%3a0%7d) !important; width: 40px; height: 10px"></div>
</td>
<td style="font-size:9px;">
86 / 100 MW <b>Spot:</b> 45,6€/MWh  <b>Load:</b> 8692 MW
</td>
</tr>
</table>
</a>
</li>

</ul>
</li>
</ul>
</div>

<div data-role="view" id="side-inbox" data-title="Products" data-show="filterProducts">
<ul data-role="listview">
</ul>
</div>

<div data-role="layout" data-id="side-default" data-show="toggleBackButton">
<div data-role="header">
<div data-role="navbar">
<a class="nav-button" data-align="left" data-role="backbutton">Back</a>
<span data-role="view-title"></span>
</div>
</div>
</div>

</div>

<div data-role="pane" data-layout="main-default" id="main-pane">

<div data-role="view" data-title="Current state">
<div>
<center>
<div class="gauge-container" style="background-image: url(/Image/Gauge?gaugeInfos=%7b%22PMax%22%3a35023%2c%22ActualPower%22%3a8597%2c%22GaugeValue%22%3a24.546726436912885817891100134%2c%22Available%22%3a1%7d); width: 90%; height: 20px; margin: 5px">
<center>
<div style="margin:5px; color: darkgray">8597 / 35023 MW</div>
</center>
</div>
</center>
</div>

</div>

<div data-role="view" data-title="Orders" id="orders" data-show="displayOrder">
<div id="product-details">
</div>
</div>

<div data-role="layout" data-id="main-default">
<div data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</div>
</div>
</div>

</div>

<section data-role="layout" data-id="default">
<header data-role="header">
<div data-role="navbar">WG4 - Online visualization</div>
</header>
</section>

<style>
.infobox
{
background-color: lightgray;
vert-align: middle;
vertical-align: middle;
horiz-align: center;
mso-horizontal-page-align: center;
}

ul li, div, ul li a
{
-moz-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
}

#mainView ul li
{
padding: 0 !important;
}

.small-info {
font-size: 9px;
}

ul li table tr, ul li table tr td, ul li table tr * {
margin: 0;
padding: 0;
border: 0;
border-spacing: 0;
}
</style>

<script src="/Scripts/jquery-1.8.2.js"></script>

<link href="/Content/kendo.common.min.css" rel="stylesheet" />
<link href="/Content/kendo.default.min.css" rel="stylesheet" />
<link href="/Content/kendo.dataviz.min.css" rel="stylesheet" />
<link href="/Content/kendo.dataviz.default.min.css" rel="stylesheet" />
<link href="/Content/kendo.mobile.all.min.css" rel="stylesheet" />
<script src="/Scripts/angular.min.js"></script>
<script src="/Scripts/kendo.all.min.js"></script>

<script>
window.app = new kendo.mobile.Application(document.body,
{
transition: 'fade'
});
</script>

</body>
</html>

SplitView

answered on 22 Jan 2015

3 answers

191 views

hoverDelay setting behavior

Hi Everyone,

The hoverDelay setting does not seem to be consistent - its behavior differs depending on whether the item being selected has sub-items or not.

Lets say in the example below we select 'Item 3' first. This will open the sub menu for Item 3 after 1 sec delay. If we now hover 'Item 2', the sub menu for 'Item 3' will stay open for 1000 ms, and then close. Good! That's what I want.

Now, lets do another test - again, select our 'Item 3' first but instead of going to 'Item 2', go to 'Item 4'. This will immediately close the sub menu for 'item 3', and after 1 sec delay will open sub menu for 'Item 4'. In my opinion this is not correct - it should keep the sub menu for Item 3 open for 1 sec, and then it should close it and display the sub menu for 'Item 4'.

This issue makes it challenging to use the menu control, especially with large menus - you have to be very precise with your mouse movements.

Is there any way to make the control work the way i want? Any suggestion or workaround?

Any help will be appreciated!

<ul id="menu">

<li>

Root

<ul>

<li>Item 1</li>

<li>Item 2</li>

<li>

Item 3

<ul>

<li>Item 31</li>

<li>Item 32</li>

<li>Item 33</li>