Questions on Kendo UI for jQuery Forum

3 answers

195 views

I have a Kendo UI Window which is dynamically added to the DOM and its content contains a Kendo UI Calendar control. Now, I do call the destroy() method of the Window when it is closed, so, I expect all dependent events and markup to be removed from the document. However, when viewing the HTML elements within the Chrome developer tools, I see this markup being added each time the Window is dynamically added.

<div class="k-calendar-container k-popup k-group k-reset" data-role="popup" style="display: none; position: absolute;"></div>

Then, when I close the Window (and destroy() being subsequently called), this markup is not being removed from the DOM as I would expect. Is this behavior a bug or working as intended?

Calendar

answered on 04 Dec 2012

1 answer

96 views

Hyperlinks issue (application need to be reinitialized after hitting the back button)

If the user clicks/taps on a hyperlink that navigates on a new page after hitting the back button, the kendo mobile application is no longer functional. You can reproduce it by just checking an example in kendoui demos, like

http://demos.kendoui.com/mobile/listview/pull-to-refresh.html

click on a link, navigate away, press back and the application needs to be reinitialized to work again. reproducable on chrome.

General Discussions

answered on 04 Dec 2012

1 answer

115 views

altTemplate Layout ist gone after item Update

Hello,
we use an alternative layout and editing of the list item.

$("#listView").kendoListView({

pageable: true,

selectable: 'single',

navigatable: false,

editable: true,

dataSource: viewModel.dataSource,

template: $("#customListViewTemplate").html(),

altTemplate: $("#customListViewTemplateAlt").html(),

editTemplate: $("#editTemplate").html()

});

After editing or canceling the row with alt layout, the alternative layout disappears and is replaced with the default layout.

How can this be fixed?

ListView

answered on 04 Dec 2012

1 answer

304 views

how to integrate chart with mobile ui

Hi we are trying to develop an mobile app using kendo ui. we need to integrate the chart controls in project.
The below code does the same but in chrome (on desktop) and opera(on android device). we need an .apk file so we tried to run this code in icenium simulator for android it doesn't work.

Plz help us with a solution.

<!DOCTYPE html >

<html >

<head>

<title></title>

<script src="js/jquery.min.js" type="text/javascript"></script>

<script src="js/kendo.all.min.js" type="text/javascript"></script>

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

<style>

html,body

{

width:100%;

}

</style>

</head>

<body>

<div data-role="view" id="main" data-layout="mobile-view" data-stretch="true">

<div style="background-image:url('images/Green Stripy Wallpapers.jpg');">

<a data-role="button" style="width:100%;">Button</a>

<div id="example" class="k-content" style="width:100%; background:white;">

<div>

<div id="chart" style="width:100%;"></div>

</div>

<script type="text/javascript">

function createChart() {

$("#chart").kendoChart({

theme: $(document).data("kendoSkin") || "default",

title: {

text: "Internet Users"

},

legend: {

position: "bottom"

},

chartArea: {

background: ""

},

seriesDefaults: {

type: "bar"

},

series: [{

name: "World",

data: [15.7, 16.7, 20, 23.5, 26.6]

}, {

name: "United States",

data: [67.96, 68.93, 75, 74, 78]

}],

valueAxis: {

labels: {

format: "{0}%"

}

},

categoryAxis: {

categories: [2005, 2006, 2007, 2008, 2009]

},

tooltip: {

visible: true,

format: "{0}%"

}

});

}

$(document).ready(function() {

var app = new kendo.mobile.Application();

setTimeout(function() {

// Initialize the chart with a delay to make sure

// the initial animation is visible

createChart();

$("#example").bind("kendo:skinChange", function(e) {

createChart();

});

}, 400);

});

</script>

</body>

</html>

Charts

answered on 04 Dec 2012

2 answers

427 views

[Solved] DropDownList in Window issue

This bug - about dropdownlist popup being opened under the window popup - I've seen before and it was fixed in the later release.
Still - it's not fixed completely.
The bug reproduced when window is initialized with "appendTo" property set to form.
You can see it here: http://jsfiddle.net/ZM34e/

I don't think, you will fix it soon, as the new release is just came, but can you provide a workaround?

DropDownList

answered on 04 Dec 2012

1 answer

250 views

[Solved] MVVM or MVC for Kendo UI with ASP.NET

Hi, I hope I use the correct terminology here but I went through the 5 part Kendo tutorial (Hello JQuery, Hello HTML5, Hello Kendo UI etc.) and IIUC this was centered around creating a Web API project which was used to create an MVVM patterned project which used regular WebForms and the Kendo scripts.
Now, if I choose 'New asp.net mvc 3 project' in VS I will obviously have a very different architecture to the MVVM described above.

Let's say I have no reason to use any specific pattern, which approach would you suggest to be the easiest and/or most suitable for Kendo UI?

General Discussions

answered on 04 Dec 2012

1 answer

145 views

[Solved] Filtering Dates with KendoUI grid -Querystring missing expected values.

With the Telerik KendoUI web Grid control, what are the requirements for us to get a value for filtering dates when using serverside filtering?

What we see when we filter on other columns - which is great, as we can easily parse this (strings for example) is:

filter[filters][0][field]

filter[filters][0][operator]

filter[filters][0][value]

filter[logic]

What we see when we filter on date columns is - there is no value to parse out here: (note: the value is missing for this date filter, but it was not missing in the string filter).

filter[filters][0][field]

filter[filters][0][operator]

filter[logic]

Additional information about how we are using the date column in our grid:

Initialized with this column as a date:

field: "LastUpdated", title: "Updated", format: "{0:MM/dd/yyyy}"

Datasource for this grid has this column as a date:

LastUpdated: { type: "date", nullable: true }

Thank you,

Chris

Grid

answered on 04 Dec 2012

3 answers

166 views

JSON - ASP.NET Web Service Connection using Twitter Example

Here's my code,

<div id="example" class="k-content">

<div id="tweets-container" class="k-header k-menu-vertical">

<h3>

Twitter feed</h3>

<div id="search-box">

<label>

Search for:

<input type="text" value="html5" id="searchfor" class="k-textbox" />

</label>

<button class="k-button" id="search">

search</button>

</div>

<div id="tweets">

<div>

Loading ...

</div>

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

<div class="tweet k-header">

<img width="48" height="48" src="#= profile_image_url #" alt="#= from_user #" />

#= FirstVal #

</div>

</script>

<script>

$(document).ready(function () {

// create a template using the above definition

var template = kendo.template($("#template").html());

var Product = kendo.data.Model.define({

id: "FirstID",

fields: {

"FirstVal": {

type: "string"

},

"SecondVal": {

type: "string"

}

});

var dataSource = new kendo.data.DataSource({

transport: {

read: {

url: "/ws/getservice.asmx/GetAllTestimonials", // the remove service url

data: "{}",

contentType: "application/json; charset=utf-8",

dataType: "json", // JSONP (JSON with padding) is required for cross-domain AJAX

complete: function(data,xhr){

result = JSON.parse(data.d.resposeText);

}

},

change: function () { // subscribe to the CHANGE event of the data source

$("#tweets").html(kendo.render(template, dataSource.view()));

}

});

// read data from the remote service

dataSource.read();

$("#search").click(function () {

dataSource.read();

});

$("#searchfor").keydown(function (e) {

if (e.keyCode === kendo.keys.ENTER) {

dataSource.read();

}

});

</script>

Here's my JSON

[{"FirstID":1,"FirstVal":"Test","SecondVal":"TestOne"},{"FirstID":2,"FirstVal":"Test","SecondVal":"TestTwo"}]

I'm not sure what I am doing wrong here, any help would be appreciated.

Data Source

answered on 04 Dec 2012

7 answers

925 views

How to bind combobox to both 'value' and 'text' properties

Combobox supports viewmodel binding to the "value" property as follows:

<input id="gradeCombo" data-role="combobox" data-bind="value: source.gradeValue"/>

Is there anyway to also bind to the "text" property, such as:

<input id="gradeCombo" data-role="combobox" data-bind="value: source.gradeValue, text: source.gradeText"/>

Trying to bind to the "text" property above fails. So is there some other way to do this? And where is the complete list of supported binding properties documented?

Binding to the text is especially needed when using a remote datasource for the list of selections because:
1) you don't want to query the remote datasource (to find the text) unless the user interacts with the control
2) remote datasource is designed to query based on what user types in (i.e. text property) not the underlying value

ComboBox

answered on 04 Dec 2012

1 answer

304 views

how to set row background color in Grid and hide row values

Hi,
I have grid with 21 rows.my requirement is to set some of rows background color is Light Green(like 1,5,13 rows) and at the same time hide row values i.e i wanted to display rows with color and no data(plain row)..here is the code snifet...is this possible to achieve.please help out me

$("#gridSellIn").kendoGrid({
width: 1500,
dataSource: data.d,
resizable: true,
selectable: true,
rowTemplate: kendo.template($("#SellInrowTemplate").html()),
height: 500,
columns: [
{ title: 'RevProduct Name', field: 'ProductName', width: '22%', sortable: true },
{ title: 'Actuals MTD', field: 'MTDActual', width: '8%', sortable: true },

]
});

Thanks,
parsanamoni

Grid

answered on 04 Dec 2012