Questions on Kendo UI for jQuery Forum

5 answers

185 views

In prior versions the JQery click() method worked, but in 1114 it doesn't work at all on touch devices. It works just fine with mice.

Here's a page that demonstrates the issue:

http://Dashboard.Sentegy.com/Test.html

if you are on a mouse device clicking on the button generates the alert. On a touch device (iOS) it doesn't pop up. This causes all kinds of problems because Kendo UI Web is also broken. For example selection of an item in a tree view doesn't work on touch devices. I assume its all the same underlying root cause.

The source follows:

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js" type="text/javascript"></script>
    <link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
    <link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
    <link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.silver.min.css" rel="stylesheet" type="text/css" />
    <link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />

    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
</head>
<body>
    <div data-role="view">
      <a id="Button" data-align="left" data-role="button" >Press me</a>
    </div>
    <script>
      app = new kendo.mobile.Application(document.body);
      $("#Button").click(function () {
        alert("Clicked");
      });
    </script>
</body>
</html>

General Discussions

answered on 05 Dec 2012

1 answer

180 views

Grid with Nested model

Here is my model structure:

Header -> Details -> Tags

I have no problem on displaying the Details on the grid. My problem is I want to include the Tags associated into that particular Detail record but all I can see when mapping my model the List<Tags>. This is the part that I have difficulty to implement.

Templates

answered on 05 Dec 2012

2 answers

100 views

Grid sortable with kendo.ns is not working.

Grid's sortable is not working if use kendo.ns.
Because kendo.sortable field is not included kendo.ns.
Please fix it.
thanks.

Grid

answered on 05 Dec 2012

4 answers

341 views

Multi-Select Drop DownList

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

478 views

[Solved] 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

222 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

190 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

170 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

193 views

[Solved] 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

94 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