Questions on Kendo UI for jQuery Forum

0 answers

88 views

Hi

I have the charts working perfectly using a standard remote json file. My problem is I now have to use data from a file that has child values attached so for example in the snippet below i want to use the value of "Code", and i'm having trouble doing this any help would be apppreciated

{
   "Providers":[
      {
         "Elements":[
            {
               "Code":"siteSection",
               "Name":"Site Section"
            },

         ],
      }
   ]
}

Regards

Adam

Charts

asked on 11 Jul 2012

2 answers

79 views

Font rendering quality, any way to improve?

See the attached image, left label is IE, right label is Chrome, is there any way to improve the way Chrome renders this text, or is that just the way it's going to be?

Charts

answered on 11 Jul 2012

3 answers

515 views

Label at top

I have the following screen shot of a grid with a popup and cannot figure out how I place the label to the top of the grid rather than at the bottom. See attachment.

My popup has the following editor template:-

var textEditorInitialize = function (container, options) {

$('<textarea style="width:200px;height:100px;" />')

.appendTo(container);

};

Grid

answered on 11 Jul 2012

0 answers

191 views

How to achieve the alert or messagebox

How to achieve the alert or messagebox function of.
Does not seem to find the alert control at kendo UI.
Do use the window to achieve

Window

asked on 11 Jul 2012

2 answers

226 views

Mobile grouped list using nested templates issue

http://jsfiddle.net/dvrvT/2/

In the JsFiddle example provided, when I specify the 'kendo.mobile.ui' parameter in the bind method, I do not see the templated items in my ListView.

ListView (Mobile)

answered on 11 Jul 2012

1 answer

172 views

Calling Remote Datasource with Kendo Mobile

So I'll start by saying I'm brand new to Kendo UI Mobile, and I was walking through the Kendo Mobile UI tutorial and trying to get the datasource to load data from my local RailsApp. I'm running the mobile app on an Android Simulator and the data never returns...I just get a spinning circle at the bottom of the application. I'm not sure where I'm going wrong as I've copied and pasted the code from the Android version of the tutorial and changed it to match my local URLS ( I built it myself originally, but then decided to copy and paste when I ran into issues). Any help is greatly appreciated..Thanks

Here's my code:

<!DOCTYPE HTML>

<html>

<head>

<title>Cordova</title>

<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>

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

<script src="js/jquery.min.js"></script>

<script src="js/kendo.mobile.min.js"></script>

<script type="text/javascript">

// If you want to prevent dragging, uncomment this section

/*

function preventBehavior(e)

{

e.preventDefault();

};

document.addEventListener("touchmove", preventBehavior, false);

*/

/* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch.

see http://iphonedevelopertips.com/cocoa/launching-your-own-application-via-a-custom-url-scheme.html

for more details -jm */

/*

function handleOpenURL(url)

{

// TODO: do something with the url passed in.

}

*/

function onBodyLoad()

{

document.addEventListener("deviceready", onDeviceReady, false);

}

/* When this function is called, PhoneGap has been initialized and is ready to roll */

/* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch.

see http://iphonedevelopertips.com/cocoa/launching-your-own-application-via-a-custom-url-scheme.html

for more details -jm */

function onDeviceReady()

{

// do your thing!

}

</script>

</head>

<body onload= "onBodyLoad()">

<div data-role="view" data-init="getInfo" data-layout="app" data-title="info" id="info">

<div id="news">News Goes Here</div>

</div>

<div data-role="view" data-layout="app" data-init="getSessions" data-title="scheudle" id="scheudle">

Schedule Goes Here

<ul id="sessions"></ul>

</div>

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

<header data-role="header">

<div data-role="navbar">Conference Tracker</div>

</header>

<footer data-role="footer">

<div data-role="tabstrip">

<a href="#info" data-icon="info">Info</a>

<a href="#scheudle" data-icon="recents">Schedule</a>

</div>

</footer>

</div>

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

<div class="left">

<div class="time"> ${formatted_time }</div>

<div class="speaker">${speaker}</div>

</div>

<div class="title">${title}</div>

</script>

<script>

// creates the application UI

var application = new kendo.mobile.Application($(document).body, { transition: "slide" });

var infosUrl = "/infos.json"; //also tried full path here as well.

var sessionsUrl = "/sessions.json";

var getInfo = function() {

// read from the remote data source

$.get(infosUrl, function(data) {

$.each(data, function() {

$("#news").append("<p class='info'>" + this.content + "</p>");

});

}

var getSessions = function() {

$("#sessions").kendoMobileListView({

dataSource: kendo.data.DataSource.create({

transport: {

read: sessionsUrl

},

group: "day"

}),

template: $("#sessionsTemplate").html()

});

}

</script>

</body>

</html>

Application

answered on 11 Jul 2012

3 answers

375 views

Getting loaded window in document .ready

Hello,

I want to pass a RecordID to a child Window and then I want that child window to use this RecordID in the document ready function to load the rest of the form.

This is how I call the child window:

window.kendoWindow({

content: {

url: "order.aspx",

data: {

RecordID: 1234

}

});

On the server side, I'm able to set the RecordID in a Textbox (let's call it tbRecordID). This is where it gets more complicated.

Usually, in order to get the tbRecordID value, you whould just get it directly using it's id in the order.aspx document ready function:

$(document).ready(function

() {

myRecordID =$("#tbRecordID"

).val();

     //load components for myRecordID...

});

However, this won't work if you allow users to open more than one instance of the same window (ex: lets say the the user want to see order 1, 17 and 53 side by side) because this would create an id conflict.

So the only option I can see for now is to add a class to the tbRecordID and the refer to it from the "loaded" window with a jQuery search.

$(document).ready(function () {

var targetWindow = //I need a way to get a reference to the target window

var myRecordID = targetWindow.find(".RecordIDClass").val();

//load with myRecordID

});

So, is there a way to get a reference to the window that is behing loaded?

Or maybe there is an other way to achieve what I'm trying to do in the document .ready function?

Best regards,

Simon

Window

answered on 11 Jul 2012

0 answers

75 views

first mobile app

For someone building their first mobile app from scratch, does anyone have a recommendation on what type of app that is doable but will be a great learning experience? Is Kendo UI the place to do this, or are there other recommendations? Thanks in advance.

General Discussions

asked on 11 Jul 2012

2 answers

74 views

Tutorials

Hi All,

I am new to this tool. Please let me know, Where I will find the tutorials for this tool?

Globalization

answered on 11 Jul 2012

0 answers

130 views

Static HTML Formatting

I am trying to entirely format a grid based on static HTML (i.e. no data binding).

I have found it hard to find info on how to handle this scenario elegantly and how to properly set configuration attributes.

1 - One particular issue I have been struggling with is that I want to enable filtering on the grid, including for a date column, but do not want Kendo to touch the date format in the cells (or at least be able to control it).

So far I have been able to go to the <th> tag and add a data-type="date" attribute, which causes the filtering to behave properly, but have not been able to set the "format" of the data. I was hoping that "data-format" on the th tag would work but did not.

Due to the use case involved, I cannot roll this into defining the schema of the columns in JS/JSON, it needs to have the formatting defined within the HTML itself (i.e. data-format)

2 - I am also having to add dummy data-field attributes to every th to get them to sort and filter...I don't feel I should need to do this since the data rows are already there (perhaps if no data-field attr is specified there should be "dummy" values automatically? that's all I'm doing)

3 - When trying to define paging, there is a gap left between the last row of a page and the footer paging bar. Basically, it appears that the height of the grid without paging is applied (with all rows visible), and then it adds the paging in but does not shrink the grid to fit...

any help?

Grid

asked on 10 Jul 2012