Questions on Kendo UI for jQuery Forum

1 answer

113 views

Area Chart using same Datasource as Grid, display weekly aggregate.

I'm new to Kendo UI and Kendo Data Viz so bear with me :D

I have a datasource in my javascript file:

    var _detailDataSource = new kendo.data.DataSource({
        transport: {
            read: {
                type: "POST",
                url: "/Admin/GetDetailUsage",
                dataType: "json",
                data: {
                    beginDate: function () {
                        return $('#beginDate').val();
                    },
                    endDate: function () {
                        return $('#endDate').val();
                    }
                }
            }
        },
        schema: {
            model: {
                fields: {
                    RequestId: { type: "number" },
                    RequestDate: { type: "date" },
                    Interface: { type: "string" },
                    ProviderName: { type: "string" },
                    EmployeeId: { type: "string" },
                    EmployeeName: { type: "string" },
                    EmployeeType: { type: "string" },
                    Department: { type: "string" }
                }
            }
        },
        pageSize: 20
    });

I am currently using that datasource for a grid but I also wanted to use it for an area chart on the same page (different tab in the tab control)

So I have setup the chart like this:

function dashboardChart() {
    $("#chart").kendoChart({
        dataSource: _detailDataSource,
        title: {
            text: "Units sold"
        },
        series: [{
            type: "area",
            field: "RequestId",
            aggregate: "count"
        }],
        categoryAxis: {
            baseUnit: "weeks",
            field: "RequestDate"
        }
    });
}

and then I call the chart like so: dashboardChart();

So, can someone tell me what I'm doing wrong? I want to aggregate the data from the datasource by week and display the number of Requests in an area chart.

Thanks,

Chad.

Charts

answered on 26 Mar 2013

1 answer

125 views

KendoUI Correct Practice

Are there style guides to write codes the "KendoUI way"? I'm new to KendoUI and I'm trying to find out how to write mobile apps the correct way KendoUI designed it for.

For example:
- What is the KendoUI way to populate a list view? Is the correct way to use JQuery and append html?
- What is the "KendoUI" way to pass data from a list view to another view.
- When using buttons, are you supposed to extend the button class to change the way it behaves, or manage that in the HTML?
- If not, what is the main reason you will use inheritance when using KendoUI?
- What is recommended, multiple views in one file? Or views in separate files.
- Which file is the layout supposed to reside in?

I'm having difficulty finding the answers to these questions since I can't find much documentation on it, and KendoUI being so new there is no tutorials for any of it.

General Discussions

answered on 26 Mar 2013

1 answer

67 views

Opening a new window with other windows contents

Hello

Is is possible to create a window on page example1.aspx and use it's dynamic contents on other page for example example2.aspx?

Example1.aspx would be open before example2.aspx is opened and would remain open for the time the contents is needed.

BR,
Joonas

Window

answered on 26 Mar 2013

2 answers

271 views

How can I let Kendo UI wait for deviceReady event?

I have a Kendo application construction with an initialization which contains a call bindevents() that in it's turn adds the event listener for deviceReady.

Before deviceready is finished the code for my homeView_onInit is already being executed causing incorrect behaviour of my app

How can I prevent that any code is executed before the deviceready event has finished or is fired?

General Discussions

answered on 26 Mar 2013

1 answer

60 views

Selectable column follow up

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

125 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

602 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

245 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

297 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