Questions on Kendo UI for jQuery Forum

1 answer

81 views

Everytime I try to access this thread to reply, I get redirected to the forums homepage

http://www.kendoui.com/forums/ui/grid/selectable-elements---don't-trigger-when-you-drag-the-mouse-a-little.aspx

Anyways, it seems like it's a bug that doing a minor mouse drag causes the row to not be selected.

Grid

answered on 26 Mar 2013

1 answer

167 views

Template Column In Grid

Why this code dosn't work properly.
My grid show the IDArticolo property and not the text "HELLO WORLD"!!!!! See the attached picture.

<%: Html.Kendo().Grid(Model) _
.Name("Grid") _
.Columns(Sub(column) column.Bound(Function(art) art.idarticolo).ClientTemplate("<span>HELLO WORLD</span>")) _
.Columns(Sub(o) o.Command(Sub(cmd) cmd.Custom("Dettaglio").Action("articolodettaglio", "articolo").DataRouteValues(Sub(va) va.Add(Function(da) da.idarticolo).RouteKey("idarticolo")))) _
.Pageable(Sub(o) o.PageSizes(True)) _
.Sortable() _
.Filterable() _
.DataSource(Sub(ds) ds.Server().PageSize(10))
%>

Grid

answered on 26 Mar 2013

25 answers

697 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

273 views

[Solved] 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

354 views

[Solved] 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.4K+ 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

211 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

511 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

84 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

218 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