Questions on Kendo UI for jQuery Forum

2 answers

86 views

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

571 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

70 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

191 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

234 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

394 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

503 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

1 answer

355 views

when Change event fires and when it doesn't

I'm using an autocomplete control in a grid, which works well.
When the user types in the field the list is populated from an ajax call, works no problem.
When one of the list options are selected it updates the grid values in the same row.

Scenario: If the user clears the autocomplete control by highlighting the text, pressing delete and then tabbing out of the field we need to clear the current grid row values.
ALSO, when the user selects a valid value we're adding a new row below the current one for the user to use. (I.e. dynamically growing the grid).

So, we bind to the select event and on a valid selection we add the new row. This works.
We added a change event to the autocomplete control and it fires in the above mentioned scenario, but if the user selects a valid option, then highlights the text, types in something else and then selects an option from the resulting list, the select event fires, but not the change event.

Why would that be?

AutoComplete

answered on 10 Jan 2014

1 answer

257 views

How To Remove and Restore Template Event Binding

Hi:

I'm using the event binding to bind a viewmodel function to a div in a template, like this:

<ul id="myList" data-role="listview" data-template="myTemplate" data-bind="source: detail.states"></ul>

<script type="text/x-kendo-template" id="myTemplate">
        <div data-role="touch" data-bind="events: { tap: open}">
            <div class="response-container">
                <div id="text">
                    ${text}
                 </div>
                <div id="controls" class="hidden" style="height: 100px">
                                <textarea id="response-textarea" maxlength="8000"></textarea>
.
.
.

The "open" function that fires for the tap event changes the class of the inner "controls" div to "unhidden", which just makes a textarea and some other bound buttons visible. In that function, I want to remove the event binding established in the data-bind of the template. In other words, I want to be able to interact with the newly exposed widgets without firing the tap event over and over. One of the exposed buttons sets the class back to hidden, and then I would like to re-enable the tap event binding. This would be trivial, if there wasn't a template involved, but I don't understand how the templating code adds the binding, so removing it is even more obscure.

So the general question is, how do you remove and restore an event binding for a listview item that is added via a template?

Thank you,

Kelly

General Discussions

answered on 10 Jan 2014

1 answer

228 views

Kendo grid cell with dropdownlist using .Template

Hello!

I'm evaluating Kendo for use in an asp.net mvc4 web application using razor based views.
I want implement a dropdown list in a grid cell.
I saw this example
http://demos.kendoui.com/web/grid/editing-custom.html
and I have implemented it successfully but the problem is that I don’t want to create an EditorTemplate for each dropdownlist in my application. I would like to implement kendo dropdown list in a grid cell using .Template:

columns.Bound(m => m.Names).Template(@...);

Is there some documentation for use kendo dropdown list in a grid cell using .Template? Can I get an MVC razor example of this?

Thanks

Grid

answered on 10 Jan 2014