Questions on Kendo UI for jQuery Forum

2 answers

119 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

468 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

89 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

136 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

115 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

209 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

232 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

184 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>

</ul>

</li>

<li>

Item 4

<ul>

<li>Item 41</li>

<li>Item 42</li>

<li>Item 43</li>

</ul>

</li>

</ul>

</li>

</ul>

<script>

$(document).ready(function () {

$("#menu").kendoMenu({

hoverDelay: 1000

});

</script>

Menu

answered on 22 Jan 2015

8 answers

883 views

Multiple windows with charts on one page

Hi KendoUI Team

I really do love the KendoUI framework but I have some problems with it. Why isn't it possible to load 2 different windows with 2 different charts? If I generate a second window and put my KendoUI chart in it'll just load one of the tow charts so I have to click on the refresh button at the top of the window to make it work and display both charts.

Any help?

Thanks,

Jonas

Window

answered on 22 Jan 2015

3 answers

176 views

Theme-Roller - does not include all styles

Hi,

I'm finding the Theme-roller impractical and buggy in use.

All I want to do is use the metro theme but replace the green colours with some custom blue ones.

Worryingly, I noticed that even though I changed all instances of the green to my blue in the Theme-Roller, the resulting style-sheet still contains instances of the green (#8ebc00) e.g:

.k-state-focused,
.k-grouping-row .k-state-focused {
border-color: #8ebc00;
}

.k-calendar .k-nav-fast.k-state-hover {
text-decoration: none;
background-color: #8ebc00;
color: #ffffff;
}

Also, the process of editing the generated CSS file to change all the image references from the CDN back to local is too time-consuming and prone to error.
It's unrealistic to expect someone to do that each time they generate a theme.
It would also be better if the generator also produced a minimised version of the css as minimising adds yet another step to the process.

The thought of having to repeat this process every time a new update comes out is too daunting to consider as a realistic option.

Have you any tips? Or will the theme-roller be fixed / updated?

The only practical way to do what I want at the moment is to perform a find and replace on all the green colours in kendo.metro.min.css

General Discussions

answered on 22 Jan 2015