Questions on Kendo UI for jQuery Forum

1 answer

97 views

The below code isnt working!! please assist

iam trying to insert the textbox data into listbox on button click but the foolowing code isn't adding data into listbox

$(document).ready(

function () {

$("#click").click(function () {

var val = document.getElementById('textboxs').value;

var View = $("#listView").data("kendoListView");

View.add(val);

});

<

td style="width: 141px">

</td>

</tr>

<td>

</td>

ListView

answered on 27 Apr 2012

0 answers

76 views

Series Labels Template

Greetings to all
I was wondering if I could design a template for the labels of the series in my chart, for example how I attached below.

template: "<center><b><font size=2>#= dataItem.Title #</font></b></br><b>Name: </b> #= dataItem.Name #</br><b>Count:</b>#= dataItem.Count #</center>"

I did a test but the conten of my label appears outside of my series

What other options could be used?
Any ideas?

Thanks for your help

M.

General Discussions

asked on 27 Apr 2012

1 answer

94 views

Grid not playing nicely with shared datasource

Hello,
I've been playing around with the new MVVM framework and ran into some interesting behavior when a Grid is bound to a ViewModel property and that view model property is changes from a source outside the grid. Basically, I have a ViewModel which contains an array of people. There are input fields that let you add new people and the added people are displayed using a Grid. Initially this works fine, you are able to add new entries and even delete entries using the in-built grid "destroy" functionality. The problem arises when you try to populate the people array from an external source (for example an xhr request). The people array is indeed updated but from that point on, the Grid no longer updates when new people are added. I put togather a simple fiddle (Weird Grid Fiddle) to illustrate. I included a simple kendo template below to grid to show that the underlying viewModel (people array) is still being updated even after the Grid stops refreshing. To add to the weirdness, the "Delete" functionality of the grid still works even after the grid itself stops refreshing itself with the changes to the ViewModel. I tried to manually call some "refresh" looking methods on the grid and underlying datasource after loading the external people but none of them seemed to work. Any explanations? Thanks in advance
Sean

Grid

answered on 27 Apr 2012

1 answer

120 views

Binding with array, can't select first tab

Code:

<ul class="kendo-tabstrip" runat="server" style="visibility:hidden">

<li class="k-state-active">First Tab</li>

<li>Second Tab</li>

<li>Third Tab</li>

</ul>

<div>Tab1</div>

<div>Tab2</div>

<div>Tab3</div>

//Create the tab data

for (var i = 0; i < subtabcontainer.length; i++) {

tabdata[i] = {

text: tabs[i].innerHTML,

content: subtabcontainer[i].innerHTML

};

}

var tabstrip = $(this).kendoTabStrip({

dataTextField: "text",

dataContentField: "content",

dataSource: tabdata

}).data("kendoTabStrip").select(1);

So it loops though some elements on the page, and builds up an array to bind to the tabstrip. This all works great, however no tabs are selected when the page renders...if I manually click one all is good.

I've even tried setTimeout after the tabstrip initialization to do the .select as well, but no dice.

See here: http://screencast.com/t/Y22BMw27jsJ

TabStrip

answered on 27 Apr 2012

2 answers

123 views

Validator tooltips like jquerytools

Please see here: http://jquerytools.org/demos/tooltip/form.html

Is this possible?

Basically they don't push anything. They float over top of the element that they are bound to, and will recognize the side of the window and move to the other side or wrap if necessary.

This is highly desirable because the current default (and asp.net's default) is to push content based on wherever it's placed, which looks pretty bad in the majority of cases.

Alternatively, can I disable the tooltips, and create my own on an event?

Thanks!

Validation

answered on 27 Apr 2012

1 answer

67 views

Error in documentation

Hi,

In the configuration section of the Grid demo, the documentation says that 'editable' object has a parameter 'confirmation' which is boolean. Shouldn't this be a string instead? (The example alongside shows it being assigned a string)

Grid

answered on 27 Apr 2012

3 answers

86 views

Simple problem with <form> tag

Hi,

I'm porting a simple Energy cost calculator made in Javascript.
When i use the <form> tag Kendo UI isn't correcly displayed. This simple tag ins't supported or im wrong?

How can i fix this code to work with kendo ui? how can i access to my fields

 watts, hours and how to call the javascript function?

<div data-role="view" id="forms" data-title="Calculadora de Consumo" data-layout="layout" data-transition="slide" data-init="initForm" >

<ul data-role="listview" data-style="inset" data-type="group">

<li>

Sepa cuánto consumen sus artefactos.

<ul>

<li>

<input type="tel" name="watts" size="5" value="0" />Watts del artefacto

</li>

<li>

<input type="tel" name="hours" size="5" value="0" />Horas de funcionamiento

</li>

<li>

<input type="tel" name="unitcost" size="9" value="105" />Costo KWh

</li>

<li>

<input type="button" value="Calculate" onclick="workitout(this.form)" />

</li>

<li>

<input type="text" name="daycost" size="7" />Costo diario

</li>

<li>

<input type="text" name="qtrcost" size="7" />Costo mensual

</li>

<li>

<input type="text" name="yrcost" size="7" />Costo anual

</li>

</ul>

</li>

</ul>

</div>

<script language="JavaScript" type="text/JavaScript">

<!--

function workitout(form)

{

var kw = form.watts.value / 1000;

var hrs = parseInt(form.hours.value);

var cost = (form.unitcost.value * kw * hrs) / 100;

var annual = cost * 365;

var quarter = annual / 12;

cost = round(cost);

annual = round(annual);

form.daycost.value = cost;

form.qtrcost.value = quarter;

form.yrcost.value = annual;

}

function round (num) {

num = Math.round(num * 100) / 100;

num = (num + 0.001) + '';

return num.substring(0, num.indexOf('.') + 3);

}

// End -->

</script>

General Discussions

answered on 27 Apr 2012

1 answer

185 views

Dropdown width not matching input field

Why is it that in the demos for both DropDownList and ComboBox, the width of the dropdown matches the input field, with apparently no special action being taken, but in my usage the input field is constant at 149px while the dropdown is only wide enough to accomodate the content?

I understand why the input field is 149px... because it's hard-code in kendo.common.css as "width: 12.4em;" but why is the dropdown width not matching?

This is all with content being added dynamically via ajax responses.

DropDownList

answered on 27 Apr 2012

1 answer

72 views

operations Add->Sync doesn't work on XML DataSource (only Kendo UI v2012.3.106)

Hi!

Operation Add, and Sync nothing to do. No XHR queryes from client to server after sync operation.

Example:

dataSource = new kendo.data.DataSource({
transport: {
read: {
url: pub.root("pages/?read"),
type: "POST"
},
create: {
url: pub.root("pages/?create"),
type: "POST"
},
destroy: {
url: pub.root("pages/?delete"),
type: "POST"
},
update: {
url: pub.root("pages/?update"),
type: "POST"
}
},
schema: {
type: "xml",
data: "Response/pages/item",
model: {
id: "id",
fields: {
id: "id/text()",
name: "name/text()"
}
},
total: "Response/pages/@total"
},
serverPaging: true,
serverSorting: true,
serverFiltering: true,
pageSize: 100
});

var item = {};
item["id"] = null;
item["name"] = 'Hello';

dataSource.add(item);
dataSource.sync();

Data Source

answered on 27 Apr 2012

1 answer

61 views

Documentation suggestion

In response to some of my questions, Telerik support staff has been outstanding. They provide samples, and explanations that illuminate a great deal as to what is going on inside the KendoUI, the semantics and syntax of methods, attributes, etc. As well as interactive JSFiddle demonstrations.

I feel guilty for asking some of these things, but I first pour through the documentation and if I don't find it, then I am forced to ask.

Suggestion:

In response to questions that seem to be common and thinly covered in the formal documentation (e.g. aggregation in datasource, grid and charts) consider writing up a TECH NOTE, and then cross linking it to the documentation nodes under Grid, Chart and Datasource.
In addition, if you create a JSFIDDLE, then also link that to the documentation. (call the link DIVE DEEPER, or something like that).

That way you will have a permanent record, decrease the customer support costs, and provide us with interactive ways (JSFiddle) to dive deeper than the thin layer of formal documentation. It allow you to leverage your staff support costs by creating a living Knowledge Base. I could even see users submitting well documented JSiddles for Telerik points. (crowd source your documentation and decrease the cost of creating the documentation corpus!).

General Discussions

answered on 27 Apr 2012