Questions on Kendo UI for jQuery Forum

3 answers

108 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

426 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

140 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

89 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

579 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

78 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

194 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

241 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

1 answer

408 views

k-state-disabled in grid toolbar less distinctive

I'm using a kendo grid with a toolbar with buttons that might be disabled (and using the class k-state-disabled). After updating version of kendo the disabled buttons got less distinctive and - possible worst of all - started to react to hover.

After looking further into this I noticed that the k-secondary class that kendo adds to the grid wrapper is mainly responsible for this behavior as shown in this jsfiddle:
http://jsfiddle.net/DLezC/

What is the reason for using the k-secondary on the grid and why does it affect the disabled buttons. Is this to be considered as a bug? Is there a better way to accomplice the disabled effect?

Grid

answered on 10 Jan 2014

2 answers

517 views

Provide saveUrl data via data attribute on input element. How?

We have a lot of similar file uploads, but they all upload to different urls with different parameters. And I'm trying to minimise amount of random javascript in our MVC4 application. So I would like to provide a save url into kendo upload element via data- parameter in html:

<input name="file" type="file" class="single-file-upload" data-saveurl="/some/path?entryId=2&productId=33" />

Url will be different in every instance. Sometimes we even have upload in a table and url will differ by a parameter (i.e. productId will be different).

Then in javascript I'm trying this:

<script>

$(document).ready(function () {

$(".single-file-upload").kendoUpload({

multiple: false,

async: {

saveUrl: $(this).data('saveurl'),

autoupload: false

}

});

</script>

But this does not seem to work: $(this).data('saveurl')
Data parameter is not picked up.. or rather $(this) is not what I would like it to be, hence the data attribute is empty, giving blank saveUrl property.

Andy idea how to access the object on which the kendoUpload is applied? Or some other method of specifying generic url on html element?

Thanks!

p.s. just noticed what I need can be done with MVVM (http://demos.kendoui.com/web/upload/mvvm.html), but it has too much black magic, and would this work with many (50-100) uploads on the same page?

Upload

answered on 10 Jan 2014