Questions on Kendo UI for jQuery Forum

5 answers

385 views

I have seen a few blog posts from Todd refer to the speed of templates especially when you set the useWithBlock to false. However without explanation this is set to true by default. Can you show me examples of when I do and do not need this. The docs do not even mention this setting which seems an odd omission due to the speed hype built via the blog posts.

Thanks

Templates

answered on 05 Dec 2012

1 answer

193 views

Fill kendo grid with xml data returned from webservice

I'm trying to create a keno grid and fill it from db with addresses data. When I run the application neither the grid nor data displayed. This is the web service code:

namespace SmartFramework.ControllerWebServices
{
/// <summary>
/// Summary description for SalesWebService
/// </summary>
[WebService(Namespace = "http://localhost:56785/ControllerWebServices/SalesWebService.asmx")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class SalesWebService : System.Web.Services.WebService
{

[WebMethod]
public XmlDocument GetAddresses()
{
XmlDocument myDocument = new XmlDocument();
string temp;
AddressBE myAddress = new AddressBE();

myAddress.LoadAll();
temp = myAddress.ToXml();
myDocument.LoadXml(temp);
return myDocument;
}
}
}

This is the aspx page code that contains the keno grid and datasource:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Address.aspx.cs" Inherits="SmartFramework.UIL.Address" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Address</title>
<link href="Kendo-UI/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="Kendo-UI/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<script src="Kendo-UI/js/jquery.min.js" type="text/javascript"></script>
<script src="Kendo-UI/js/kendo.web.min.js" type="text/javascript"></script>

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

</head>
<body>

<div>
<script>
$(document).ready(function () {
//alert("hii");
$("#grid").kendoGrid({
dataSource: {
//type: "POST",
transport:
{
read:{
type: "POST",
url: "http://localhost:56785/ControllerWebServices/SalesWebService.asmx/GetAddresses",
//contentType: "application/json; charset=utf-8",
dataType: "xml",
processData: false,
data: xmlstring
}
},
schema:
{
data: "//Address",
model:
{
fields:
{
AddressID: { type: "number" },
AddressLine1: { type: "string" },
AddressLine2: { type: "string" },
City: { type: "string" },
StateProvince: { type: "string" },
CountryRegion: { type: "string" },
PostalCode: { type: "string" },
rowguid: { type: "number" },
ModifiedDate: { type: "string" }
}
}
},
pageSize: 10,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
height: 250,
filterable: true,
sortable: true,
pageable: true,
columns:
[
{
field: "AddressID",
title: "ID"
},
{
field: "AddressLine1",
title: "AddressLine1"
},
{
field: "AddressLine2",
title: "AddressLine2"
},
{
field: "City",
title: "City"
},
{
field: "StateProvince",
title: "StateProvince"
},
{
field: "CountryRegion",
title: "CountryRegion"
},
{
field: "PostalCode",
title: "PostalCode"
},
{
field: "rowguid",
title: "rowguid"
},
{
field: "ModifiedDate",
title: "ModifiedDate"
}
]
/*columns: [{
field: "OrderID",
filterable: false
},
"Freight",
{
field: "OrderDate",
title: "Order Date",
width: 100,
format: "{0:MM/dd/yyyy}"
}, {
field: "ShipName",
title: "Ship Name",
width: 200
}, {
field: "ShipCity",
title: "Ship City"
}
]*/
});
});
</script>
</div>

</body>
</html>

Please note that I want the data to be as xml in order to call any webservice that returns data as xml. Anyone can help me to find the problem?

Grid

answered on 05 Dec 2012

3 answers

164 views

Kendo UI/Mobile - Get JSONP and append to listview

I'm just starting out with Kendo mobile (impressed so far - coming from JQM). I'm trying to pass a postcode to a url which returns some json (houses near that area) and then append it to a listview using Datasource. However, it fails an in console I just get:

Error [object Object]

Heres my code:

var app = new kendo.mobile.Application(document.body, 
{
    transition:'slide'
});

function onBodyLoad() {
    //document.addEventListener("deviceready", onDeviceReady, false);
    // Use the following for testing in the browser
    getProperties(onResult);
}

function getProperties(callback) {

    var template = kendo.template($("#propertiesListViewTemplate").html());
    var dataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: 'http://www.someurl.me/getproperties.php?postcode=bd11db',
                dataType: "jsonp"
            }
        },

        schema: {
            //data: "ResultSet.Result"
            data: function(response) {
                return response.listing;
            }
        },


        error: function(e) {
            console.log("Error " + e);
        },
        change: function() {
            $("#propertyResultListView").html(kendo.render(template, this.view()));
        }
    });
    dataSource.read();
    $("#propertyResultListView").kendoMobileListView({dataSource:dataSource,template: $("#propertiesListViewTemplate").html()});

}

function onResult(resultData) {
    console.log("Results " + resultData);
    $("#propertyResultListView").kendoMobileListView({dataSource: kendo.data.DataSource.create({data:resultData}),
        template: $("#propertiesListViewTemplate").html()});
}

I'm sure this is down to the schema part of the Datasource but I'm lost as to what it should be (the docs havent really helped).

The JSON thats returned is:

{"country":"England","result_count":510,"longitude":-1.826866,"area_name":"Caldercroft, Elland HX5","listing":[{"image_caption":"Main Image","status":"for_sale","num_floors":"0","listing_status":"sale","num_bedrooms":"2","agent_name":"Daniel & Hirst","latitude":53.688934,"agent_address":"110 Commercial Street","num_recepts":"0","property_type":"Detached","country":"England","longitude":-1.843375,"first_published_date":"2012-10-11 19:05:42","displayable_address":"Elland HX5","street_name":"EXLEY LANE","num_bathrooms":"0","thumbnail_url":"http://images.zoopla.co.uk/f7f6791d95dadef11b340be2949bd8957079168f_80_60.jpg","description":"Comments","post_town":"Elland","details_url":"http://www.zoopla.co.uk/for-sale/details/26491359","agent_logo":"http://static.zoopla.co.uk/zoopla_static_agent_logo_(120721).png","price_change":[{"date":"2012-10-11 16:45:02","price":"37500"}],"short_description":"We are pleased to offer ...","agent_phone":"01484 954009","outcode":"HX5","image_url":"http://images.zoopla.co.uk/f7f6791d95dadef11b340be2949bd8957079168f_354_255.jpg","last_published_date":"2012-11-21 17:31:46","county":"West Yorkshire","price":"37500","listing_id":"26491359"}

Could someone point me in the right direction? The whole datasource schema is confusing to me. If it helps to describe what I'm trying to do in JQM I'd do something like

$.getJSON(serviceURL + 'getproperties.php?postcode=' + postcode + '&minimum_beds=' + minimumBeds + '&minimum_price=' + minimumPrice + '&maximum_price=' + maximumPrice , function(data) {

    $('#propertyList li').remove();

    // Loop through json data and append to table
    listings = data.listing;
    $.each(listings, function(index, property) {

        console.log(property.image_url);
        console.log(property.price);

        $('#propertyList').append('<li><a href="propertydetails.html?id=' + property.listing_id + '">' +
                '<img src="' + property.thumbnail_url + '"/>' +
                '<h6>' + property.property_type + '</h6>' +
                '<p>' + property.displayable_address + '</p>' +
                '<p><strong>&pound;' + property.price + '</strong></p>');

        $('#propertyList').listview('refresh');
    });

});

Thanks in advance!

Data Source

answered on 04 Dec 2012

1 answer

131 views

Setting checkboxes - "too much recursion" error

Getting a "too much recursion" error when attempting to programmatically uncheck all checkboxes in a treeview. Using this code:

$("#tree-item li span").siblings("span").find(":checkbox").each(function() {

$(this).prop("checked", false);

$(this).change();

});

Nothing fancy, or so I thought.

Thoughts, anyone?

TreeView

answered on 04 Dec 2012

3 answers

163 views

Calendar markup remnants

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

65 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

87 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

243 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

379 views

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

178 views

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