Questions on Kendo UI for jQuery Forum

1 answer

618 views

Dynamically change business hours?

Is it possible to update business hours without destroying and reinitializing widget?

Scheduler

answered on 13 Jan 2014

1 answer

297 views

Dynamically select tab after creation

I use this HTML:

<div id='test'>

<ul>

<li>Tab1</li>

<li>Tab2</li>

<li>Tab3</li>

</ul>

<div>

Content 1

</div>

<div>

Content 2

</div>

<div>

Content 3

</div>

Then convert it to TabStrip:

$('test').kendoTabStrip({

animation: {

open: {

effects: effet

}

});

var tabs = $elem.data("kendoTabStrip"); //Get Kendo element

tabs .select("li:contains('Tab1')");

The tab is selected, but containt not visible. If I trig the same code with a button click, all is working good.
If I use the class="k-state-active" in the HTML the tab is selected and the containt is visible.
Thanks

TabStrip

answered on 13 Jan 2014

3 answers

99 views

TabStrip fall out parent <div> when using k-block

Hi,
When I put the Tabstrip into a <Div> with a class set to k-block, the tabstrip fall out is container. (see attached picture)

<section class="k-block">

<div data-acteur="TAB" data-acteurparam="defaut=Onglet1;effet=fadeIn">

<ul>

<li class="k-state-active">Tab1</li>

<li>Tab2</li>

<li>Tab3</li>

</ul>

<div>

<div data-acteur="STATUT" data-acteurparam="prop=Statut;titre=Work Cell State">

<img data-val="0" alt="Running" src="stateG.png" />

<img data-val="1" alt="Assist" src="stateY.png" />

<img data-val="2" alt="Down" src="stateR.png" />

<img data-val="3" alt="Engineering" src="stateB.png" />

</div>

<div data-acteur="STATUT" data-acteurparam="prop=Statut2;titre=Work Cell State">

<img data-val="0" alt="Running" src="stateG.png" />

<img data-val="1" alt="Assist" src="stateY.png" />

<img data-val="2" alt="Down" src="stateR.png" />

<img data-val="3" alt="Engineering" src="stateB.png" />

</div>

<div>

Hello2

</div>

<div>

Hello3

</div>

</section>

And the I just do a simple:

$elem.kendoTabStrip({

});

Any suggestion?

TabStrip

answered on 13 Jan 2014

5 answers

413 views

Filter column by hour or DateTime

Hello,

I wonder whether it's possible to filter the grid with DateTime value?

If I use DateTime I can only make the search by Date. (example below)

columns.Bound(p => p.someDateTime).Title("").Width(170).Format("{0:dd-MM-yyyy H:mm:ss}").HtmlAttributes(new { style = "text-align:center" });

The other solution would be to make two columns with Date and Time separately but then I can't filter by anything in Time. I only get blank fields. (example below)

columns.Bound(p => p.someTimeSpan).Title("").Width(170).HtmlAttributes(new { style = "text-align:center" }).ClientTemplate("<#= Hours #> : <#= Minutes #>"); ;

Grid

answered on 13 Jan 2014

1 answer

130 views

The rows in a listView are not updating using Kendo MVVM

Hi - I just posted a question regarding this on stackoverflow:

http://stackoverflow.com/questions/14092516/the-rows-in-a-listview-are-not-updating-using-kendo-mvvm

Basically I have problems with updating my observable source and seeing the changes reflected in a listView.

I can add items to my javascript array which are directly shown in the listView (table with kendo-templates) but when I change properties of a single item in the array it does NOT get updated in this list.

I tried creating observable objects of each item I put in the array but it still does not work. (full code and details on stackoverflow..)

How do I get this to work?

Thanks

MVVM

answered on 11 Jan 2014

2 answers

85 views

customizable stock chart

hello -
i love the stock chart
but want to use it for something other than just stocks

is the dateField closed off?
ie, i want to use textual categories and not dates

Charts

answered on 10 Jan 2014

1 answer

562 views

tool tip is not showing on the mouse-hover on the custom icon-image on google map marker.

I am developing an application, where i have requirement of plotting markers on the google map, and I need to use my Own Marker image. On this marker image, i have placed dynamic data to be displayed. But the problem is that, kendo tooltip doesn't work until the mouse arrow doesn't touch the dynamic content ((shown on the center of "circular" image, which is a marker on the google map).

Source code is:
var imagePath1 = //dynamic path
var markers = new MarkerWithLabel({
            position: point,
            icon: imagePath1,
            map: map,
            draggable: false,
            labelContent: image_count,
            labelAnchor: new google.maps.Point(10, 30),
            labelClass: "labels", // the CSS class for the label
            labelInBackground: false,
            title : contentVal,
            });

var tooltip = $("#map_canvas").kendoTooltip({
                        filter: ".labels", // this is CSS class, which causes the tool tip to be shown on the mouse-hover of dynamic numeric content.
                        width: 250,
                        position: "top",
          animation:false,
                    }).data("kendoTooltip");

ToolTip

answered on 10 Jan 2014

4 answers

69 views

Problem with Android Quick Launch menu

With Android 4.1.2 There is a quick launch menu at the bottom of the device that will open to display a bunch of icons. Well in my Mobile App when I click on the tabstrip to navigate... it's causing this menu to popup as if I clicked on the little button to bring it up.

Does anyone know whats going on here or how to prevent the quick launch menu from popping up when using the tabstrip?

TabStrip (Mobile)

answered on 10 Jan 2014

1 answer

189 views

help with remote datasource

Please

i am new to the Kendo UI. I am trying to follow a couple of the example and have tried to combine 2 of them: Chart (pie) and mobile (button).

The problem is that when i try to use a remote datasource the chart is empty. I works with a local source. The json file has been validated.

the code and json data follow.

Thank you,
Gus

\\\\\code

<!DOCTYPE html>
<html>
<head>
<title>Basic usage</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<script src="../../../js/jquery.min.js"></script>
<script src="../../../js/kendo.all.min.js"></script>

<link href="../../../styles/kendo.common.min.css" rel="stylesheet" />
<link href="../../../styles/kendo.default.min.css" rel="stylesheet" />
<link href="../../../styles/kendo.dataviz.min.css" rel="stylesheet">
<link href="../../../styles/kendo.mobile.all.min.css" rel="stylesheet" />

<style scoped>
.button {
margin: 0 0 0 .5em;
text-align: center;
}
.button:first-of-type {
margin: 0 0 0 1em;
}
.home {
background: url(../../content/mobile/shared/sports-home.jpg) no-repeat center center;
}
.facility {
background: url(../../content/mobile/shared/sports-facility.jpg) no-repeat center center;
}
.sports {
background: url(../../content/mobile/shared/sports.jpg) no-repeat center center;
}
#button-home .head,
#facility .head,
#sports .head {
display: block;
margin: 1em;
height: 120px;
-webkit-background-size: 100% auto;
background-size: 100% auto;
}
.km-ios .head,
.km-blackberry .head {
-webkit-border-radius: 10px;
border-radius: 10px;
}

.chart-wrapper {
margin: 0 0 0 20px;
width: 466px;
height: 434px;
background: url("../../content/shared/styles/chart-wrapper-small.png") transparent no-repeat 0 0;
}

.chart-wrapper .k-chart {
height: 280px;
padding: 37px;
width: 390px;
}

</style>

</head>

<body>
<a href="../index.html">Back</a>
<div data-role="view" id="button-home" data-title="Sports Academy">
<div class="home head"> </div>
<a class="button" data-role="button" href="#button-home" style="background-color: #f60">Home</a><a class="button" data-role="button" href="#facility">Facility</a><a class="button" data-role="button" href="#sports">Sports</a>
<ul data-role="listview" data-style="inset">
<li>
<p>Our Sports Academy provides a venue for outdoor and indoor sports and activities for children and adults of all ages.</p>
</li>
</ul>

<div id="example" class="k-content">
<div class="chart-wrapper">
<div id="chart"></div>
</div>
<script>

var myDataSource = new kendo.data.DataSource({
transport: {
read: {
// the remote service url
url: "http://174.129.38.117/ui/example/mobile/button/sales.json",

// JSONP is required for cross-domain AJAX
dataType: "json",

}
},

});

function createChart() {
$("#chart").kendoChart({
theme: $(document).data("kendoSkin") || "default",
title: {
text: "Sales 2008"
},
legend: {
position: "bottom"
},

dataSource: myDataSource,

series: [{
type: "pie",
field: "percentage",
categoryField: "category",
explodeField: "explode"

}],

tooltip: {
visible: true,
template: "${ category } - ${ value }%"
}
});
}

$(document).ready(function() {
setTimeout(function() {
// Initialize the chart with a delay to make sure
// the initial animation is visible
createChart();

$("#example").bind("kendo:skinChange", function(e) {
createChart();
});
}, 200);
});
</script>
</div>

</div>

<div data-role="view" id="facility" data-title="Facility">
<div class="facility head"> </div>
<a class="button" data-role="button" href="#button-home">Home</a><a class="button" data-role="button" href="#facility" style="background-color: #f60">Facility</a><a class="button" data-role="button" href="#sports">Sports</a>
<ul data-role="listview" data-style="inset">
<li>
<p>The facility has two indoor basketball fields, olympic size swimming pool, outdoor soccer field, baseball field, golf club and more.</p>
</li>
</ul>


</div>

<div data-role="view" id="sports" data-title="Sports">
<div class="sports head"> </div>
<a class="button" data-role="button" href="#button-home">Home</a><a class="button" data-role="button" href="#facility">Facility</a><a class="button" data-role="button" href="#sports" style="background-color: #f60">Sports</a>
<ul data-role="listview" data-style="inset">
<li>American Football</li>
<li>Baseball</li>
<li>Basketball</li>
<li>Football</li>
<li>Dallas</li>
<li>Golf</li>
<li>Swimming</li>
</ul>
</div>

<script>
$("#home-link").kendoMobileButton();
</script>

<script>
window.kendoMobileApplication = new kendo.mobile.Application(document.body);
</script>
</body>
</html>

\\\json

{
"data": [
{
"category": "2005",
"value": "67"
},
{
"category": "2006",
"value": "69"
},
{
"category": "2007",
"value": "75"
},
{
"category": "2008",
"value": "74"
},
{
"category": "2009",
"value": "78"
}
]
}

Data Source

answered on 10 Jan 2014

5 answers

231 views

Is there a list select widget for Kendo UI Mobile (not Web)?

While working on our first Kendo UI app I was surprised that here seems to be no list select widget for Kendo UI Mobile.

The only examples I could find are related to DropDownList inside Kendo UI Web, for which I don't have a license (I purchased Kendo UI Mobile only).

Am I missing something here?
If not, is there a common approach to this through widgets? Presenting a HTML select box inside a mobile app would be a bit awkward, to be honest.

Thanks in advance for any feedback on this!

Roman

General Discussions

answered on 10 Jan 2014