Questions on Kendo UI for jQuery Forum

7 answers

387 views

Right Alignment for number cell and virtualization of remote data

Hello KendoUI team:
I'm loading a great amount of data (about 1 thousand rows) in a kendogrid but i want to right align a numeric field.
Would you please provide a sample of how to do this? Could your virtualization of remote data sample get the Order Id right aligned?
I'm having problems with this if I use a jQuery function to rigth align my numeric cell of each row in my kendo grid.
(Paging is not an option for me.)

Any help will be appreciated.

Sincerely,
Oscar.

Grid

answered on 15 Jun 2012

1 answer

133 views

Grid cell with multiple images

Hi,

I have recently started evaluating Kendo UI as a potential framework for number of projects we have. One of the requirements is to be able to have multiple images in a cell. I understand how single images can be mapped to a column using templates but does Kendo UI have a support for dynamically populated image containers, which could be inserted in a grid?

Thanks.

Grid

answered on 15 Jun 2012

1 answer

204 views

Can I display custom tooltips on a pie chart via a callback?

I have data that is in minutes, but I want to display the tooltip in hours and minutes. For example, if value was 200, the displayed tooltip would be "3 hours 20 minutes".

I know I can use the templates to display a custom tooltip that is made up of the value and text, but I need to do more manipulation of the value to make it more friendly.

Thanks

Rik

Charts

answered on 15 Jun 2012

0 answers

64 views

Grid behaviour not right on the following options - scrollable: {virtual: true}, pageable: false, sortable: true, navigatable: true

I want to use the KendoUI grid in an interface that is purely keypad based.

However, the keyboard navigation is buggy when I put the following options in.

scrollable: {virtual: true}, pageable: false, sortable: true, navigatable: true

it just doesn't do what I would intuitively think it should do... which is to move around the grid with keyboard input.

I tried to write my own handlers, but browsing the documentation I noticed that in the documentation for the web demo, there are no event handlers to check if a cell has been 'focused', any methods to scroll up and down or to be able to set the row number that should be scrolled to

Is there something that Im missing or is this a feature that is still to be implemented?

I'm using the most recent version of kendo (2012.1.515) and the bundled jquery, tested on both firefox and chrome

Thanks in advance

Chris

Grid

asked on 15 Jun 2012

1 answer

144 views

is it possible to use Kendo UI MVC and use the Ribbon control from Telerik Ajax control suite

if so are there examples. If not will there be a ribbon control for either MVC or Keno MVC

General Discussions

answered on 15 Jun 2012

1 answer

93 views

Grid Ajax Binding and Related objects

Is it possible to bind a Kendo grid to a JSON result that contains related properties like so Publisher.Company.CompanyName? I know the Telerik grids can be bound to such properties but trying to do the same with a Kendo grid always fails complaining about the . in the column name.

Is this something that's not yet supported in the Kendo grid? Does it currently only support flattened models?

Thanks

Grid

answered on 15 Jun 2012

0 answers

79 views

sparkline component implementation

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

85 views

Total records returned

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

Data Source

asked on 14 Jun 2012

1 answer

119 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"));

}