Questions on Kendo UI for jQuery Forum

0 answers

101 views

hi,
i am new to kendo ui..
i want to set up an kendo data source for a remote server..
as per the kendo ui datasource documention..

var dataSource = new kendo.data.DataSource({ 
transport: {
 // make JSONP request to http://demos.kendoui.com/service/products/create 
create: {
 url: "http://demos.kendoui.com/service/products/create",
 dataType: "jsonp" // "jsonp" is required for cross-domain requests; use "json" for same-domain requests },
});
here url="http://demos.kendoui.com/service/products/create", is a remote end point.

how do we create the remote endpoint for the server??
plz give the step by step instruction to create it..

General Discussions

asked on 18 Oct 2013

1 answer

116 views

I struggle with getting distinct string values on the categoryAxis Kendo Chart

Hi,

I am wondering how to get distinct string values from data source on the categoryAxis in Kendo Chart? It seems to work fine with numeric values but it is not the case with string values. Is there a bug or is something that I am missing...?
Can somebody help me, please?

Here, attached are the sample charts.

Thank you,
Mimi

Charts

answered on 18 Oct 2013

4 answers

1.6K+ views

[Solved] How to hide the ClientFooterTemplate,I already have ClientGroupFooterTemplate and want to make ClientFooterTemplate hide?

How to hide the ClientFooterTemplate,I already have ClientGroupFooterTemplate and want to make ClientFooterTemplate hide? Although I set nothing about ClientFooterTemplate,It still have a lot of blank in the footer of the grid!

Grid

answered on 18 Oct 2013

8 answers

214 views

[Solved] Ajax navigation with ability to link directly to the url of any page. Possible?

Hi there,

I am looking into feasibility to create mobile(phone) version of high traffic site with Kendo UI Mobile.

Following this article http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/mobileapplication/overview I was able to create an example navigating pages with ajax. Since the controller is returning PartialView for the page, when you reload the url for the second page, that page seems broken as it doesn't load layout.

I was able to workaround that with this code
            if (Request.IsAjaxRequest())
                            return PartialView();
             return View();

But when I load that second page directly, link to the third page got messed up (showing the route data and appending relative url)
Everything works well though when I set PushState to false, but in that case # is added to the url.

Is my approach wrong, or there is different setup for ajax navigation with ability to load inside pages by typing the url?

Any help would be appreciated.

Thanks.

Application

answered on 17 Oct 2013

0 answers

418 views

[Solved] Custom tooltip.template date format based on categoryAxis baseUnit

If anybody else is wondering, because this code took me forever to figure out, here's how I change the tooltip template date format. Only works with dates, not times. Probably won't be perfect if your time zones are too far apart, but Daylight Saving Time won't screw it up.

$('#DateChart').kendoChart({

...

categoryAxis: {

baseUnit: "fit",

autoBaseUnitSteps: {

seconds: [],

minutes: [],

hours: [],

days: [1],

weeks: [1],

months: [1,3],

years: [1]

},

maxDateGroups: MaxBars,

},

tooltip: {

visible: true,

template: $('#DateChartTemplate').html()

}

});

<script id="DateChartTemplate" type="text/x-kendo-template">

# var BaseUnit = $('\#DateChart').data("kendoChart").options.categoryAxis.baseUnit;

var FirstDate = array[0].Date;

var LastDate = array[array.length - 1].Date;

if (BaseUnit == "days" || (BaseUnit == "fit" &&

Math.round((LastDate - FirstDate) / 86400000) < MaxBars)) { #

#:value#<br />

#=kendo.format("{0:ddd MMM d}", category)#

# } else if (BaseUnit == "weeks" || (BaseUnit == "fit" &&

(Math.round((LastDate - FirstDate) / 86400000)

+ FirstDate.getDay() - LastDate.getDay()) / 7 < MaxBars)) { #

#:value#<br />

#=kendo.format("{0:'Week of' MMM d}", category)#

# } else if (BaseUnit == "months" || (BaseUnit == "fit" &&

(LastDate.getFullYear() - FirstDate.getFullYear()) * 12

+ LastDate.getMonth() - FirstDate.getMonth() < 3 * MaxBars)) { #

#:value#<br />

#=kendo.format("{0:MMMM yyyy}", category)#

# } else { #

#:value#<br />

#=kendo.format("{0:yyyy}", category)#

# } #

</script>

Charts

asked on 17 Oct 2013

1 answer

126 views

[Solved] postpone view initializations?

lets say you have something like:

<div id="tabstrip-location"
data-role="view"
data-init="app.locationService.initLocation"...

does that initialization function get called right after the app loads? as opposed to when the view is actually displayed?

is there a simple way to call initialization functions after another event has first occurred? say, after the user logs in?

General Discussions

answered on 17 Oct 2013

2 answers

547 views

Controlling styles of charts - Bevel vs. Flat

Hey guys,

I'm looking at the Kendo.All.js file to try and figure out how your Flat theme stops the charts from showing a bevel. Your theme builder is quite rudimentary in terms of what it allows you to theme unless I'm missing something. It doesn't for example allow you to specify something like bevels or no bevels.

So right now I'm going through the JS file step for step, which is time consuming and costly. How can we register a proper, complete, theme and control things like the bevels, as well as EVERYTHING else the chart may make use of? Right now the bevel is the most annoying part, but the rest would be nice too.

Thanks,
Jacques

General Discussions

answered on 17 Oct 2013

1 answer

174 views

HTML Select element bound with MVVM not behaving as expected

I have attached a sample project with a single index.html page (and supporting kendo resources). The source of that page is included below for those that don't want to download the attached .zip.

<!DOCTYPE html>

<html>

<head>

<title></title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta name="msapplication-tap-highlight" content="no" />

<link href="styles/kendo.common.min.css" rel="stylesheet" />

<link href="styles/kendo.default.min.css" rel="stylesheet" />

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

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>

<script src="js/kendo.all.js"></script>

</head>

<body id="body">

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

<div data-role="header">

<div data-role="navbar">

<span data-role="view-title"></span>

</div>

<div data-role="view" data-title="Select Test" data-model="myViewModel" data-layout="default" id="roster">

<table>

<tr>

<td>Selected Person: <span data-bind="text: selectedPerson"></span>

</tr>

<tr>

<!--<td><label> DataSource Select <select data-value-field="id" data-text-field="name" data-bind="source: dsPeople, value: selectedPerson"></select></label></td>-->

<td>

<label> Array Select

<select data-bound="onBind" data-option-label="Select an item" data-value-field="id" data-text-field="name" data-bind="source: arrPeople, value: selectedPerson, events: { bound: onBind}" data-value-primitive="true">

<option value="-1">Select an item</option>

</select>

</label>

</td>

</tr>

</table>

</div>

<script>

var myViewModel = kendo.observable({

dsPeople: new kendo.data.DataSource({

data: [],

schema: {

model: {

id: "id"

}

}),

arrPeople: [],

init: function()

{

for (var i = 0; i < 5; i++) {

var person = {

name: "Person " + i,

id: i

};

this.dsPeople.add(person);

this.arrPeople.push(person);

}

},

onBind: function(e)

{

alert('onBind called');

},

selectedPerson: null

});

$.ready(myViewModel.init());

// Initialize a new Kendo Mobile Application

var kidcheck = new kendo.mobile.Application($(document.body), {

skin: "flat"

});

</script>

</body>

</html>

Now, I have some questions.
1: If I un-comment the Select with the "DataSource Select" label I get an error (Uncaught ReferenceError: id is not defined). Is binding a Select element to a kendo datasource not supported?
2: Neither the "Array Select"s data-option-label, nor the initial option are honored. When the viewModel's selectedPerson attribute is null, there is no way to 'prompt' the user for input. Can the select be configured to either; use a default option to prompt for input OR select the first item in the list?
3: I expected I could implement the behavior in question #2 myself, however the "bound" method is never fired so I don't have an event upon which I can act and evaluate the state of the select. The Select is configured with both the data-bound="onBind" and data-bind="... events{ bound: onBind}" and neither invokes the onBind method.
4: Is there a location where the level of support for controlling an HTML Select is documented? Most of my questions are based on the assumption that since a dropdownlist widget and an HTML Select element derive from the same thing that there would be common behavior.

Environment:
Chrome: 30.0.1599.69
Kendo: 2013.2.918 commercial
Jquery: 1.10.2

Thanks

General Discussions

answered on 17 Oct 2013

3 answers

148 views

Network connection Android Kendo UI

Hi *,

I'm writting an application with Kendo UI, which schould build a https connection to a server. The application runs pretty well in the simulator, but after the installation on a mobile device (Android 4.1.2), the application is not able to build an Internet connection, namely a connection to the target server.

I use the following code to build the connection:

var check = new XMLHttpRequest();

check.open("GET", "https://IP:PORT/test" ,false);

check.setRequestHeader("Authorization", utils.getServerAuthString());

check.onreadystatechange = function () {

if (check.readyState == 4) {

if (check.status == 200) {

utils.saveServerData();

} else {

utils.showError("status:" + check.status);

}

check.send(null);

From the mobile device, I always receive a value "0" as Status, namely "Status: 0" (See line 9).

By the ways, I also use the kendoui remote datasource to get data; however, it is not working too on the mobile device; see the following code.

viewModel: kendo.observable({

datasource: new kendo.data.DataSource({

transport: {

read: {

cache: false,

url: URL,

dataType: "json",

beforeSend: function(req) {

req.setRequestHeader('Authorization', utils.getServerAuthString());

}

})

I hope you can help me.

Best regards,

General Discussions

answered on 17 Oct 2013

1 answer

176 views

Drag & Drop Scoping issue.

I am running into a strange issue with using Kendo Drag & Drop with a JQuery UI widget made through the Jquery UI widget factory.

I am creating two kendoDropTargetAreas with the the same filter on two different containers. Each one is scoped to its own context - yet no matter what I do it always executes the functions bound to the events on the first context created.

For example:

I have two widgets - Widgets A & B. Both have their own draggables and dropTargetAreas.

Yet whenever I drag and drop something on Widget B - it triggers Widget A dropTargetArea events.

No other widget behaves this way - the other kendo widgets work and are scoped correctly..

Drag and Drop

answered on 17 Oct 2013