Questions on Kendo UI for jQuery Forum

1 answer

2.2K+ views

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

101 views

TabStrip tab click causing link navigation

Deleted.

TabStrip

asked on 14 Jun 2012

0 answers

81 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

245 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

542 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

98 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

194 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

0 answers

163 views

DataSource XML Does Not Bind To Form

Hi folks,

This is my first doubt on Kendo UI Forum, and I will appreciate all you guys help!

I tried to populate a DataSource based on a XML File. If this DataSource is used with a Grid, it works well, therefore I can´t use It again with a form.

I also got an error executing my code...

Here is my complete source code:

HTML

<form id="frmPedido" method="post" action="" data-bind="source: pedidos">

<ul>

<li><label for="pedido">Pedido:</label><input type="text" id="pedido" data-bind="value: pedido" class="k-input" /></li>

<li><label for="nomecontato">Seu Nome:</label><input type="text" id="nomecontato" data-bind="value: nomecontato" class="k-input" /></li>

<li><label for="telcontato">Seu Telefone:</label><input type="text" id="telcontato" data-bind="value: telcontato" class="k-input" /><label for="celcontato">Seu Celular:</label><input type="text" id="celcontato" data-bind="value: celcontato" class="k-input" /></li>

<li><label for="nomedaigreja">Nome da Igreja:</label><input type="text" id="nomedaigreja" data-bind="value: nomedaigreja" class="k-input" /></li>

<li><label for="qtdmembros">Qtd. Membros:</label><input type="text" id="qtdmembros" data-bind="value: qtdmembros" class="k-input" /></li>

<li><label for="email">Seu Email:</label><input type="text" id="email" data-bind="value: email" class="k-input" /></li>

<li><label for="cnpj">CNPJ da Igreja:</label><input type="text" id="cnpj" data-bind="value: cnpj" class="k-input" /></li>

<li><label for="nomepastor">Nome do Pastor:</label><input type="text" id="nomepastor" data-bind="value: nomepastor" class="k-input" /></li>

<li><label for="rgpastor">RG do Pastor:</label><input type="text" id="rgpastor" data-bind="value: rgpastor" class="k-input" /></li>

<li><label for="cpfpastor">CPF do Pastor:</label><input type="text" id="cpfpastor" data-bind="value: cpfpastor" class="k-input" /></li>

<li><label for="icep">CEP:</label><input type="text" id="icep" data-bind="value: icep" class="k-input" /></li>

<li><label for="iendereco">Endereço:</label><input type="text" id="iendereco" data-bind="value: iendereco" class="k-input" /><label for="inumero">Número:</label><input type="text" id="inumero" data-bind="value: inumero" class="k-input" /></li>

<li><label for="icomplemento">Complemento:</label><input type="text" id="icomplemento" data-bind="value: icomplemento" class="k-input" /><label for="ibairro">Bairro:</label><input type="text" id="ibairro" data-bind="value: ibairro" class="k-input" /></li>

<li><label for="icidade">Cidade:</label><input type="text" id="icidade" data-bind="value: icidade" class="k-input" /><label for="iestado">Estado:</label><input type="text" id="iestado" data-bind="value: iestado" class="k-input" /></li>

<li><input type="button" id="btnEnviar" value="Enviar" class="k-button"></li>

</ul>

</form>

XML File

<?xml version="1.0" encoding="utf-8"?>

<compra>

<info>

<pedido>100001323</pedido>

<valorpedido>353.99</valorpedido>

<valorboleto>140</valorboleto>

<nomedaigreja>PRIMEIRA IGREJA DO BRASIL</nomedaigreja>

<cnpj>00.000.000/0000-00</cnpj>

<icep>13800-000</icep>

<iendereco>AVENIDA DOS CASTELOS NEGROS</iendereco>

<inumero>981</inumero>

<icomplemento>CASA</icomplemento>

<ibairro>CENTRO</ibairro>

<icidade>MOJI MIRIM</icidade>

<iestado>SP</iestado>

<email>diego.srs@gmail.com</email>

<emailigreja>contato@soareseneves.com.br</emailigreja>

<nomecontato>DOUGLAS SOARES</nomecontato>

<telcontato>1938628680</telcontato>

<celcontato>1899633617</celcontato>

<teligreja>1899859794</teligreja>

<software>6</software>

<qtla>1</qtla>

<banco>0</banco>

<datadeposito>14-06-2012</datadeposito>

<suporte>4</suporte>

<nomepastor>DIEGO SOARES</nomepastor>

<rgpastor>453010507</rgpastor>

<cpfpastor>34852052816</cpfpastor>

<boleto>100001323</boleto>

<sedex>22</sedex>

<formapagto>2</formapagto>

<tipopagto>1</tipopagto>

<cep>69970-000</cep>

<aoscuidados>FRANCISCO SOARES</aoscuidados>

<endereco>RUA DAS OSTRAS</endereco>

<numero>172</numero>

<complemento>APTO 130</complemento>

<bairro>CENTRO</bairro>

<cidade>MOJI MIRIM</cidade>

<estado>SP</estado>

<qtdmembros>500</qtdmembros>

<obs>BOM PROGRAMA</obs>

<parcelas>3</parcelas>

<valorparcelas>116.70</valorparcelas>

<afiliado>0</afiliado>

</info>

</compra>

Kendo UI JavaScript

<script type="text/javascript">

$(function() {

var pedidoSource = new kendo.data.DataSource({

transport: {

read: "xml/100001323.xml"

},

schema: {

type: "xml",

data: "/compra/info",

model: {

id: "pedido/text()",

fields: {

pedido: "pedido/text()",

nomedaigreja: "nomedaigreja/text()",

cnpj: "cnpj/text()",

icep: "icep/text()",

iendereco: "iendereco/text()",

inumero: "inumero/text()",

icomplemento: "icomplemento/text()",

ibairro: "ibairro/text()",

icidade: "icidade/text()",

iestado: "iestado/text()",

email: "email/text()",

nomecontado: "nomecontato/text()",

telcontato: "telcontato/text()",

celcontato: "celcontato/text()",

datadeposito: "datadeposito/text()",

nomepastor: "nomepastor/text()",

rgpastor: "rgpastor/text()",

cpfpastor: "cpfpastor/text()",

qtdmembros: "qtdmembros/text()"

}

});

pedidoSource.read();

var viewModel = kendo.observable({

pedidos: pedidoSource

});

kendo.bind($("form"), viewModel);

});

</script>

Thanks!

Data Source

asked on 14 Jun 2012

5 answers

350 views

Grid binding column order

If I specify my grid headers like this:

data-columns='[{"field": "pdrID", "title":"PdrID"},

{"field": "rotationName", "title":"Rotation"},

{"field": "siteCapacityID", "title":"CapacityID"},

{"field": "ruleID", "title":"RuleID"},

{"field": "userID", "title":"UserID"},

{"field": "name", "title":"Student"},

{"field": "location", "title":"Site"},

{"field": "statusDesc", "title":"Status"},

{"field": "pref", "title":"Pref"},

{"field": "campusName", "title":"Campus"},

{"field": "startDate", "title":"Start"},

{"field": "endDate", "title":"End"}

]'

I would expect that since I'm telling it which field to match up, that I could control the order that the data item displays in. However it seems to render the columns based on the JSON property order instead.

So lets say the above is the correct order the json is coming down in, if I swapped the first two header items, theyd render swapped, but the data would bind as it did before, so the pdrs would be in the rotations column and visa versa.

MVVM

answered on 14 Jun 2012

1 answer

201 views

Client operation mode?

I'm trying to get the Kendo Grid operating in the 'client operation mode', as in the Telerik Extensions for ASP.Net. This is where the grid makes only one request to the server, retrieves all the data, then performs all operations (paging, sorting, filtering and grouping) client-side. Does anyone know if this mode of operation supported in the Kendo Grid? Many thanks in advance.

Grid

answered on 14 Jun 2012