Questions on Kendo UI for jQuery Forum

2 answers

121 views

[Solved] Binding visibility to a specific value

Hi,
I would like to know if it is possible to bind the visibility of something (a div, for example) to a specific value in a select. I know I can bind the visibility to a checkbox true/false, but I want something more complicated, like binding different divs to different values of a dropdown... AND using the declarative approach :) I guess I can bind the visibility of the divs to a method that returns something based on the value of the dropdown... right?

MVVM

answered on 05 Dec 2012

1 answer

755 views

Text colour on menu items and sub menu items

Hi,

I am looking to change the colour of the text in menu items and sub menu items. I am wanting the colour to be different. I can change the color on all menu items, or menu items without a link to a page - href. But I have not found a way to change the colour so the top level menu items are different to the sub menu items.

html is:

<ul id="menu">

<li><a>menuitem1</a></li>

<li><a href="">menuitem2</a></li>

<li><a>menuitem3</a>

<ul>

<li><a href="">menuitem3a</a></li>

<li><a href="">menuitem3b</a></li>

</ul>

</li>

</ul>

The code below only gets applied on menu items without href.

.k-menu

{

/* White - only applied on menu items without href */

color:#ffffff;

}

Then this code applies to all menus items (I did not want the sub menus to have the same colour).

/* Applied to all links - but only want top level menu items*/

.k-menu .k-item .k-link

{

color:#ffffff; /*White*/

}

Code is also on jsfiddle:
http://jsfiddle.net/PgXSZ/

Looking at the forums someone suggested

.k-menu .k-group

{

/* .......... */

}

But I cannot get this to work.

Thanks,
Ryan

Menu

answered on 05 Dec 2012

1 answer

809 views

set input value in template

Hi,

I have a doubt...

it's possible use a methdo to get the value inside an input ... i mean:

<script id="ReadOnlyText-template" type="text/x-kendo-template">
    ${name}<input type="text" disabled="disabled" data-bind="value:replaceString(value)"></input>
</script>

instead

<script id="ReadOnlyText-template" type="text/x-kendo-template">
    ${name}<input type="text" disabled="disabled" data-bind="value:value"></input>
</script>

where

<script type="text/javascript">

function replaceString(value) {

if(typeof value == 'number' && value !== undefined) {

return kendo.toString(value, "n2");

} else {

return value;

}

</script>

thanks

Templates

answered on 05 Dec 2012

5 answers

153 views

JQuery click broken in 1114

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

172 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

96 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

328 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

462 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

207 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

179 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