Questions on Kendo UI for jQuery Forum

0 answers

87 views

I noticed that the DataViz library doesn't have a sparkline component out of the box.

So how is the sparkline implemented in the stock history example: http://demos.kendoui.com/dataviz/dashboards/stock-history.html

Thanks!

Charts

asked on 15 Jun 2012

0 answers

107 views

Total records returned

Why Datasource.total() always returns a undefined object?

Data Source

asked on 14 Jun 2012

1 answer

141 views

kendo.data.DataSource events

Where is the list of all events for DataSource object?

On the documentation site there are only two events [change and error] mentioned. Does DataSource object trigger only two events?

Thank you
Ujjwal

Data Source

answered on 14 Jun 2012

1 answer

2.2K+ views

Template conditional formatting problem

I'm trying to use conditional formatting of elements in my ListView's template. This partial view uses a shared DataSource to allow navigation via Pager, a two-card ListView, and the aforementioned template. Here's the relevant template code:

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

<div id="ContactCard" class="IsActive${IsActive}">

#if (Salutation === null || Salutation === '') {#<h4>#}else{#<h4>#=Salutation# #}##=FirstName# #=LastName#</h4>

#if (Title === null || Title === '') {##}else{#<p>#=Title#</p>#}#

<br />

#if (Email == 0 || Email === '') {##}else{#<p><a href='mailto:#=LastName#,%20#=FirstName#%20<#=Email#>'>#=Email#</a></p>#}#

#if (Phone === null || Phone === '') {##}else{#<p>#=Phone##if (Extension === null || Extension === '') {#</p>#}else{# ext. #=Extension#</p>#}##}#

</div>

</script>

I've tried several different ways of generating this code, including a simple if with inverted checks like

if (Salutation != null && Salutation != '')

but to no avail. I think I'm missing something about how to reference a DataSource's data from within the #if section? I tried something like

if (#=Salutation# != null && #=Salutation# != '')

but that threw a bad template error.

Here's the output
Note: disregard the horrible formatting. This is pre-styling.

Here's the whole file, for reference:

@model int @* accountId *@

<article id="contactArticle">

<div id="contactList"></div>

<footer><span id="pagerTotal"></span><a href="#" class="k-link" id="pageLeft" onclick="pageLeftOne()"><</a><div id="pager"></div><a href="#" class="k-link" id="pageRight" onclick="pageRightOne()">></a></footer>

</article>

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

<div id="ContactCard" class="IsActive${IsActive}">

#if (Salutation === null || Salutation === '') {#<h4>#}else{#<h4>#=Salutation# #}##=FirstName# #=LastName#</h4>

#if (Title === null || Title === '') {##}else{#<p>#=Title#</p>#}#

<br />

#if (Email == 0 || Email === '') {##}else{#<p><a href='mailto:#=LastName#,%20#=FirstName#%20<#=Email#>'>#=Email#</a></p>#}#

#if (Phone === null || Phone === '') {##}else{#<p>#=Phone##if (Extension === null || Extension === '') {#</p>#}else{# ext. #=Extension#</p>#}##}#

</div>

</script>

<script type="text/javascript">

var currentPage = 1;

var pages;

var contactDataSource;

function pageLeftOne() {

currentPage = (currentPage - 1) % pages;

if (currentPage === 0) {

currentPage = pages;

}

contactDataSource.page(currentPage);

};

function pageRightOne() {

currentPage = (currentPage + 1) % pages;

if (currentPage === 0) {

currentPage = pages;

}

contactDataSource.page(currentPage);

};

$(document).ready(function() {

var init = 1;

contactDataSource = new kendo.data.DataSource({

transport: {

read: {

url: '@Url.Action("ContactPager", "Contact")',

dataType: "json",

type: "POST",

timeout: 2000,

data: {

accountId: @Model

}

},

schema: {

data: "data",

total: "total",

type: "json",

model: {

fields: {

Id: { type: "string"},

FirstName: { type: "string" },

LastName: { type: "string"},

Title: { type: "string", defaultValue: ''},

Salutation: { type: "string", defaultValue: ''},

Extension: { type: "string", defaultValue: ''},

Phone: { type: "string", defaultValue: ''},

Email: { type: "string", defaultValue: ''},

IsActive: {type: "boolean"} //,

//ReceivesDistributionEmails: {type: "boolean"}

}

},

pageSize: 2

});

contactDataSource.read();

contactDataSource.bind("change", function(e) {

if (init) {

init = 0;

if (contactDataSource.total() < 1) {

var pager = document.getElementById("pager");

pager.parentNode.removeChild(pager);

var left = document.getElementById("pageLeft");

left.parentNode.removeChild(left);

var right = document.getElementById("pageRight");

right.parentNode.removeChild(right);

var pagerTotal = document.getElementById("pagerTotal");

pagerTotal.parentNode.removeChild(pagerTotal);

var createDiv = document.createElement('div');

createDiv.appendChild(

document.createTextNode("@Resources.Contact.Contact.NoneFound"));

var list = document.getElementById("contactList");

list.parentNode.replaceChild(createDiv, list);

} else {

$("#pager").kendoPager({

dataSource: contactDataSource,

//selectTemplate: '<li><span class="k-state-active">Contacts: ' + contactDataSource.total() + ' Page #=text# of ' + this.totalPages() + '</span></li>',

//linkTemplate: '',

buttonCount: 5 //1

});

$("#pagerTotal").text('Contacts: ' + contactDataSource.total());

pages = $("#pager").data("kendoPager").dataSource.totalPages();

$("#contactList").kendoListView({

dataSource: contactDataSource,

pageable: true,

template: kendo.template($("#contact-template").html())

});

kendo.init($("#contactList"));

}

});

</script>

Templates

answered on 14 Jun 2012

0 answers

106 views

TabStrip tab click causing link navigation

Deleted.

TabStrip

asked on 14 Jun 2012

0 answers

85 views

Open new popup by clicking on toolbar in grid

Hi,

I would like to open new (not default columns of grid) pop-up by clicking Edit (toolbar: ["Edit"] ) on KendoGrid. While opening edit popup, i want to send 2 parameters, id,name to new popup.

1. How do I write a click event for Edit button
2. How do I send parameters to new popup

Thanks

Grid

asked on 14 Jun 2012

3 answers

249 views

How do I: relate multiple grids so I only have one row selected in a single grid?

I have the following setup:
I am using a panel to enable an accordion control. I am loading grids into the source list, and need to ensure that when a row is selected in one grid, the selected options in the other grids are cleared. anyone have any insight?

J.

Grid

answered on 14 Jun 2012

4 answers

548 views

[Solved] Getting grid properties?

The documentation doesn't seem to mention anywhere which properties of the grid are available. I'm trying to find out the current page number the grid is on so I can add it to a cookie or something. I need to be able to put users back on the grid page they left.

In an ideal world, I'd like to be able to use the current page number in a column template, something like

$("#articleList").kendoGrid({

columns: [

{

field: "ArticleId",

title: "ID",

template: "<a href='"+appRoot+"/Home/Detail/${ArticleId}/${ArticleVersion}/${gridPageNumber}'>${ArticleId}</a>",

width: 75

},

....

Thanks,
Nick

Grid

answered on 14 Jun 2012

3 answers

105 views

[Solved] Javascript error: b.value is undefined in your Scatter line Chart Demo

http://demos.kendoui.com/dataviz/scatter-charts/scatter-line.html

When I hover any of the lines (not the data points), I notice the javascript error: b.value is undefined, being thrown repeatedly in Firebug. I'm using Firefox 13.

In IE9 the error is:

SCRIPT5007: Unable to get value of the property 'toString': object is null or undefined

Charts

answered on 14 Jun 2012

0 answers

199 views

Unable to assign data to dataSource in kendoComboBox

I have a big problem populating a kendo combobox with json data sent from controller in an ASP.NET MVC3 project.
My controller:

public JsonResult Index()

{

StreamReader sr = null;

string json = string.Empty;

WebRequest request = WebRequest.Create("http://192.168.1.8:99/GetClienti?format=json");

using (WebResponse response = request.GetResponse())

{

sr = new StreamReader(response.GetResponseStream(), true);

json = sr.ReadToEnd();

}

int index = json.IndexOf('[');

json = json.Substring(index);

index = json.LastIndexOf(']');

json = json.Substring(0, json.Length + 1 - Math.Abs(index - json.Length));

return Json(json, JsonRequestBehavior.AllowGet);

}

I am modifying the returned string to be an array of objects (dataSource works only for arrays from what I have read)

In the html file:

...

<input id="kendoCboClienti" />

...

<script type="text/javascript">

$(document).ready(function () {

$("#kendoCboClienti").kendoComboBox({

placeholder: "Sceglie il cliente",

dataTextField: "RAGIONE_SOCIALE",

dataValueField: "ID",

dataSource: {

transport: {

read: {

url: "/Clienti/",

dataType: "json"

}

},

schema: {

model: {

fields: {

id: { type: "number" },

ragioneSociale: { type: "string" }

}

});

</script>

In the attachment below is the json the controller returns. The combobox control doesn't show anything, just the loading image in the right.

It's a problem with the Json? If I declare it locally, it works (in firebug appears like an object array of objects). The dataSource can't parse it? It's because of the json is like a string, in the " ? I don't know what the problem might be, I spent too many time trying to understand this..

Please help! Thanks!

Data Source

asked on 14 Jun 2012