Questions on Kendo UI for jQuery Forum

4 answers

313 views

Hello,

I'm working with the Kendo UI Drop Down List. I need to create a cascading drop down list where each drop down list supports multi-select. I would like to empower the users to "check" checkboxes associated with each item in the drop down list.

Is this even possible with Kendo UI? If so, how? I can't seem to figure it out. Thank you!

Bill

DropDownList

answered on 05 Dec 2012

5 answers

398 views

useWithBlock explanation

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

196 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

167 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

135 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

171 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

67 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

94 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

261 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

389 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