Questions on Kendo UI for jQuery Forum

25 answers

593 views

Memory Leaks

Hi,

I'm experincing browser memory leaks while using Kendo UI DataWiz charts.
Basically, I use

.kendoChart(data)

in order to init the chart and

kendo.destroy()

to free the memory according to the documentation.

Here's a test page that inits and destroys 50 charts for 10 times every 2 seconds (I attached full sources):

<html>

<head>

<script src="js/jquery-1.8.2.min.js"></script>

<script src="js/kendo.dataviz.min.js"></script>

<script>

var data = {

theme: $(document).data("kendoSkin") || "default",

title: {

text: "Internet Users"

},

legend: {

position: "bottom"

},

chartArea: {

background: ""

},

seriesDefaults: {

type: "bar"

},

series: [{

name: "World",

data: [15.7, 16.7, 20, 23.5, 26.6]

}, {

name: "United States",

data: [67.96, 68.93, 75, 74, 78]

}],

valueAxis: {

labels: {

format: "{0}%"

}

},

categoryAxis: {

categories: [2005, 2006, 2007, 2008, 2009]

},

tooltip: {

visible: true,

format: "{0}%"

}

};

$(document).ready(function() {

window.iteration = 0;

window.of = 10;

$('input').on('click', function() {

refreshCharts();

$(this).hide();

$('p.iteration').html('Starting...');

return false;

});

function refreshCharts() {

setTimeout(function() {

removeCharts();

addCharts();

window.iteration++;

$('p.iteration').html('Iteration: ' + window.iteration + ' of ' + window.of);

if (window.iteration < window.of) {

refreshCharts();

} else {

$('p.iteration').html('Completed');

}

}, 2000);

}

function addCharts() {

for (var i = 0; i < 50; i++) {

addChart();

}

function addChart() {

$('<div></div>')

.addClass('chart')

.css({'float': 'left', 'clear': 'both', 'width': '400', 'height': '400', 'background-color': '#fff', 'margin': '2px'})

.appendTo($('div.content'))

.kendoChart(data);

}

function removeCharts() {

$('div.chart').each(function() {

kendo.destroy($(this));

$(this).remove();

});

}

</script>

</head>

<body>

<p>KENDO UI</p>

<p class="iteration"></p>

<p><input type="button" value="Start"/></p>

<div class="content"></div>

</body>

</html>

I get 200+ MBytes in IE9 / latest Chrome, and even more in IE8.
Please confirm that the way the memory is freed is correct, or maybe there's something I'm missing regarding the API.
Did you by chance make any improvement regarding memory management in current BETAs?

Thanks

General Discussions

answered on 26 Mar 2013

2 answers

237 views

nullable int in popup with combobox

Hello!
There is a problem with "int?" field in grid model. If popup editor has combobox in template, changes in combobox doesn't map to grid model (only if you Create item)
I made little example with fake data in all methods.
If you fire action "Student/Index", create new Item, fill form, click Update, when in action Student/Create you get the model with NULL in GroupId instead of selected value (value GroupId is not in FormValueProvider and on form selected value from ComboBox doesn't bind to $("#grid").getKendoGrid().editable.options.model)

Grid

answered on 26 Mar 2013

4 answers

282 views

TreeView insertAfter/insertBefore not doing anything

Hi there,

I've got a problem with inserting new nodes into the TreeView. The context is that I am doing drag and drop operations from one tree to another, and I want the action to be a copy rather than move, so I need to e.preventDefault the action and handle the copying myself (see issue: http://www.kendoui.com/forums/ui/treeview/re-two-trees----allowing-the-drop-but-preventing-the-draggable-from-moving.aspx) . This is fine, I thought I had it working, as the "over" part of the code works just fine, using .append.

However, it would seem that insertBefore and insertAfter simply don't do anything. Most likely I am doing something wrong, but I can't figure out what. See below the code for all three actions, (data is an object returned from ajax call fitting the schema of the tree).

if (e.dropPosition == 'before') {
    theOtherTree.insertBefore(data, $(e.dropTarget));
}
else if (e.dropPosition == 'over') {
    theOtherTree.append(data, $(e.dropTarget));
}
else if (e.dropPosition == 'after') {
    theOtherTree.insertAfter(data, $(e.dropTarget));
}

There is no error throw, the insert functions simply do nothing. The append function works just fine. Any thoughts?

TreeView

answered on 26 Mar 2013

2 answers

1.3K+ views

reload data and update listview on select change

On a page I have a listview and a pager that both get populated just fine with data from a kendo.data.DataSource. The kendo.data.DataSource calls a asmx webservice with a couple of parameters (_date and _dateSource). The _date and _dateSource parameters get values from a datepicker and a select box.

I can't figure out how to reload the listview and pager when either the datepicker or the select box value changes. I have tried to read the datasource in the onChange event of the datepicker but the values in the data param holds the original values.

Question: how do I reload the datasource (with the changed input parameters) and update both the listview and the pager?

// date picker
$("#dpDate").kendoDatePicker({
format: "dd-MM-yyyy",
value: new Date(),
change: dpDate_onChange
});
var dpDate = $("#dpDate").data("kendoDatePicker");

var lDataSource = new kendo.data.DataSource({
data: {
_date: kendo.toString(dpDate.value(), 'yyyy-MM-dd'),
_dateSource: $("#ddlDateSource").val()
}
...
$(".pager").kendoPager({ dataSource: lDataSource, ...
$("#lvPictures").kendoListView({ dataSource: lDataSource, ...

function dpDate_onChange() {
// calling read on datasource reloads data with original datepicker value
// lDataSource.read();

// calling refresh on listview reloads datasource (with original datepicker value)
// var lvPictures = $("#lvPictures").data("kendoListView");
// lvPictures.refresh;
}

ListView

answered on 26 Mar 2013

3 answers

162 views

List-view generated from data is not rendering

Hi!

I have a link which is typically a listview (can be a button too etc) that Kendo Mobile can't render its listview-look. I am querying data which contains the listview-link from the mobile's sqlite (synced from a remote CMS)

Here in an example code:

<div data-role="view" id="page-skade" data-title="" data-show="pageShow" data-model="pageViewModel">

<h1 data-bind="text: title"></h1>

<p data-bind="html: content"></p>

<!-- THIS CONTENT IS QUERIED FROM SQLITE: CONTENT CONTAINS CORRECT FORMATED LISTVIEW LINK -->

</div>

Best regards,
James

ListView (Mobile)

answered on 26 Mar 2013

8 answers

450 views

Scatter chart with different point colors

Hi,

I am specifying the series for my remote data source using the following format:

series: [{

xField: "X",

yField: "Y"

}]

Now I want to specify scatter point colors in the series.I want something similar to the following:

series: [{

xField: "X",

yField: "Y",

colorField: "Color"

}]

my Json data would be like:

[{Label:"India",X:120,X:102,Color:"red"},{Label:"China",X:160,X:118,Color:"green"},{Label:"USA",X:1000,X:137,Color:"blue"},{Label:"Russia",X:170,X:125,Color:"yellow"}]

Thanks

Madani

Charts

answered on 26 Mar 2013

3 answers

64 views

BUG: hideColumn broken in 2012.3.1315

If you set up a grid with a column defined as hidden and then use grid.hideColumn( n ) later, the column title is hidden, but not the data cells.

This worked in the previous version 1114

Here is a demo on JSBin: http://jsbin.com/urapoc/1/edit

Grid

answered on 26 Mar 2013

2 answers

169 views

Using WCF RIA with DataSource

I am trying to use WCF RIA with Kendo dataSource.
I am able to Read the Data from Json End Point of WCf RIA, but Sorting, filtering and Paging are not working as expected.
I do see that a call to WCF RIA is made when i click on the Header of the Column, but comes back with original Data, seems like Order by is Ignored.

<body>
<div id="grid2"></div>
<script type="text/javascript">
$(document).ready(function () {
$("#grid2").kendoGrid({
dataSource: { type: "json",
transport: { read: "http://localhost:52878/ClientBin/KendoUI-Web-Services-DomainService1.svc/JSON/GetSecurity_Users" },
schema: {
data: "GetSecurity_UsersResult.RootResults",
model: {
fields: {
First_Name: { type: "string" },
Last_Name: { type: "string" }
}
}
},
pageSize: 10,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
height: 250,
filterable: true,
sortable: true,
pageable: true,
columns: ["First_Name", "Last_Name"]
});
});
</script>
</body>

Data Source

answered on 26 Mar 2013

1 answer

164 views

kendo equivalent of jquery mobile page() for innerHTML

I am trying to migrate a jquery mobile app to kendo mobile.

The app makes extensive use of arbitrary HTML coming in from ajax requests, inserted into the dom using innerHTML, and then when you call $('#somenewcontainer').page(); anything with mobile bindings gets rendered.

For example, injecting the following into the dom using innerHTML:
<div id="somenewcontainer">
<a data-role="button" href="javascript:go();">go</a>
<a data-role="button" href="javascript:go2();">go2</a>
</div>

When i call $('#somenewcontainer').page(), the two buttons get rendered as a mobile buttons.

How, in kendo mobile, do i initialize new dom elements like i can in jquery mobile?

General Discussions

answered on 25 Mar 2013

1 answer

557 views

Input type - Date set value in html

Hi,

I am dynamically adding controls by building the HTML and then inserting it. I need to insert a date input box with a value already selected

strHTML ='<input type="date" id="' + val["ID"] + '" name="Date-' +val["Description"]+ '" datatype="date" att="' + val["ID"] +'" onblur="doneEditing(this)" value ="' + val["value"]+ '"/>';

val["value"] is a valid date string.

What should I do to get this working?

Thank you.

General Discussions

answered on 25 Mar 2013