Questions on Kendo UI for jQuery Forum

3 answers

333 views

Custom Tool Tip

Is there a way to customize the tool tip for the Slider in the KendoUI? With the ASP.Net Ajax version I was updating it during the OnClientSlideStart/End events as well as the OnClientValueChanging event by using a tooltip control and sending it an reference to the active handle by calling the slider.get_activeHandle() method.

I'm not sure how to do this with the KendoUI slider. The ASP.Net one works but I'd like to use the Kendo one because it works much better with tablet browsers.

Thanks.

Slider

answered on 14 Nov 2012

1 answer

117 views

Kendo Autocomplete (kendoui.complete.2012.2.913_commercial version)

How to retrieve value of Autocomplete component in case of Json content type

AutoComplete

answered on 14 Nov 2012

1 answer

306 views

TreeView + Hierachiel DataSource fail to load childs

Hi, I'm new in using Kendo UI ,
I've tried to use the Binding to remote data example on localhost. but it always load in the first time ,and it hangs on loading the childs
firebug shows the request to the service done successfully ,

I also notices that the service request for the online example appears in the XHR Tab in firebug, but in my test project appear in the JS tab , can anyone explain to me Why??

TreeView

answered on 14 Nov 2012

0 answers

469 views

How to bind the json data returned from .ashx file to DataSource?

When I created a grid, I tried to use a .ashx file as a datasource. No data displayed in IE.
But when I save the .ashx result as a .json file and bind to the datasource. Grid displyed ok.
Please help to find what is wrong with my code? Thank.
internet-users.json :
[{"Name":"System","Role":"a","Birthdate":"\/Date(259074000000)\/","ID":3},{"Name":"Moataieh","Role":"CHASSIS INSTALLATION","Birthdate":"\/Date(259074000000)\/","ID":26}]

My JsonDataSrc.ashx is:
I ran it in IE and IE displayed the same data as in internet-users.json

<%@ WebHandler Language="C#" Class="GetData" %>

using System;

using System.Web;

using System.Data.SqlClient;

using System.Data;

using System.Collections.Generic;

using System.Web.Script.Serialization;

public class GetData : IHttpHandler

{

public void ProcessRequest(HttpContext context)

{

string connectionString = @"Data Source=.;Initial Catalog=MyData;User ID=MyData;Password=;";

context.Response.ContentType = "text/plain";

List<Person> list = new List<Person>();

using (SqlDataReader sdr = StockIMS.IDataAccessLayer.SqlHelper.ExecuteReader(connectionString, CommandType.Text,

"SELECT top 2 isnull(Name,''), isnull([Job Role],'N/A') role,  isnull(Birthday,'1972-01-01'), [Person ID] id FROM [Staff Names]"

))

{

while (sdr.Read())

{

Person Personitem = new Person();

Personitem.Name=sdr[0].ToString();

Personitem.Role=sdr[1].ToString();

try

{

Personitem.Birthdate = Convert.ToDateTime(sdr[2].ToString());

}

catch { }

Personitem.ID =Convert.ToInt32( sdr[3].ToString());

list.Add(Personitem);

}

sdr.Close();

}

context.Response.Write(new JavaScriptSerializer().Serialize(list).ToString());//转为Json格式

}

public bool IsReusable

{

get

{

return false;

}

public class Person

{

private System.String _Name;

private System.DateTime _Birthdate;

private System.Int32 _ID;

private System.String _Role;

public Person()

{

}

public string Name { get { return _Name; } set { _Name = value; } }

public string Role { get { return _Role; } set { _Role = value; } }

public DateTime Birthdate { get { return _Birthdate; } set { _Birthdate = value; } }

public Int32 ID { get { return _ID; } set { _ID = value; } }

}

My index.html is:

<!DOCTYPE html>

<html>

<head>

<title>Basic usage</title>

<link href="../content/shared/styles/examples-offline.css" rel="stylesheet">

<link href="../styles/kendo.common.min.css" rel="stylesheet">

<link href="../styles/kendo.default.min.css" rel="stylesheet">

<script src="../js/jquery.min.js"></script>

<script src="../js/kendo.web.min.js"></script>

<script src="../content/shared/js/console.js"></script>

<script src="../content/shared/js/people.js"></script>

<style >

body { font-size: 9pt; }

#dvGrid { width: 500px; }

span.hi-lite { color: red; }

#dvGrid th.k-header { text-align: center }

</style>

</head>

<body>

<a class="offline-button" href="index.html">Back</a>

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

<div id="clientsDb">

<div id="dvgrid" style="height: 380px"></div>

</div>

<script>

$(document).ready(function() {

var dataSrc = new kendo.data.DataSource(

{

transport:

{

read: {

type:"POST",

url: "internet-users.json",// "JsonDataSrc.ashx",

dataType: "json"

}

},

pageSize: 10,

serverPaging: true,

serverSorting: true

});

var dateRegExp = /^\/Date$(.*?)$\/$/;

window.toDate = function (value)

{

var date = dateRegExp.exec(value);

return new Date(parseInt(date[1]));

}

function createGrid() {

$("#dvgrid").kendoGrid

({

dataSource: dataSrc,

autoBind: false,

sortable: {

allowUnsort: false

},

columns: [ {

field: "Name",

width: 90,

title: "Name"

} ,{

width: 100,

field: "Role"

} , {

field: "Birthdate",

title: "Birth Date",

template: '#= kendo.toString(toDate(Birthdate), "yyyy/MM/dd")#'

} , {

width: 50,

field: "ID"

}

]

}) ;

}

createGrid() ;

dataSrc.read();

});

</script>

</div>

</body>

</html

Data Source

asked on 14 Nov 2012

0 answers

147 views

Change/Highlight Rows in grid

Hello,

I have this scenario that user can highlight certain rows with different selectable colours and these colours must be stored in some db so that when user come again the particular row will show in the very same colour that he has selected earlier.

Thanks in advance

Grid

asked on 14 Nov 2012

0 answers

179 views

Multiple Columns Sorting

Hello,

I have to add multiple column sorting in kendo grid. Let me explain a little bit more for example I have 4 columns in a grid Column Column B, Column C and Column D. Now if user sort grid with column A and then he select to sort grid with column B then the grid should be sort as AB.

I hope I deliver my question.

Thanks in advance.

Grid

asked on 14 Nov 2012

1 answer

439 views

Template Default: "This template is empty"

I am trying to create a template that will read "This template is empty" when the data source is an empty array. Currently, my div is bound to the data source as follows:

<div data-bind="source: data"></div>

I have tried a number of different things including writing a function that returns an object that represents the data source I'm interested in:

function() {
var data = this.data;
if (data.length == 0) {
return [ { dataValue: "This template is empty." } ];
}
else {
return data;
}
};

How would I accomplish this? Thanks in advance.

Templates

answered on 14 Nov 2012

0 answers

124 views

Kendo Templates and W3C Validation

Hi I have a number of templates on my website and have been asked to run the site through the W3c validator. I am still using XHTML 1.0 Transitional but the validator is throwing up a number of errors. The notable ones are "document type does not allow element "div" here" and "ID "myID" already defined". I know that the page works fine with these inside my template and I don't much mind that they are there but from a client point of view I cannot get rid of the errors from the page.

Has anyone come up with a way to escape the template scripts from the page so they don't appear in validation while still allowing the template to work correctly?

An example of one of my templates:

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

<div class="resultLine" onclick="window.location = '${ data.oDataSourceURL }'">

<a href="${ data.oDataSourceURL }">${data.oDataProductDesc}</a>

</div>

</script>

Thanks in advance

Jamie

Templates

asked on 14 Nov 2012

1 answer

369 views

Kendo Chart - Get object of active chart

Hi,

I have three chart with different ids in a page. At a time only one chart will be enabled and others are disabled.
My requirement is how to get the clientside object of enabled chart. Chart has created using the kendo helper class.
Please help me how to solve this issue.

Charts

answered on 14 Nov 2012

1 answer

185 views

treeview.collapse() removes child nodes if they had not been expanded

It seems if you use collapse() on nodes that have not yet been expanded than you will make those child nodes dissapear.

You can reproduce this on the TreeView / API demo page:

1) open http://demos.kendoui.com/web/treeview/api.html
- notice that "Item 2" is collapsed.
2) Click on the "Collapse All nodes" button
- notice that "Item 1" is collapsed
3) Click on "Item 2" in the tree
- notice that it will not expand.
- notice that clicking on "Item 1" will expand
4) Now refresh the page (http://demos.kendoui.com/web/treeview/api.html)
5) This time, Click on "Item 2" in the tree to expand it.
6) Click on the "Collapse All nodes" button
- notice that "Item 2" is collapsed
7) Click on "Item 2"
- notice that it expands.

TreeView

answered on 14 Nov 2012