Questions on Kendo UI for jQuery Forum

0 answers

68 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

156 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

97 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

89 views

Total records returned

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

Data Source

asked on 14 Jun 2012

1 answer

126 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

81 views

TabStrip tab click causing link navigation

Deleted.

TabStrip

asked on 14 Jun 2012

0 answers

74 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

223 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