Questions on Kendo UI for jQuery Forum

1 answer

553 views

Dynamically create windows containing charts

I'm looking at the feasibility to create a dashboard page using kendoUI. I want to be able to dyamically create windows containing charts, depending on what a user has opted to see.

I have several issues at the moment:-

There doesn't seem to be any way to programmatically create a window without an existing element already on the page
I can't find any documentation on how to add any other kendoUI widgets inside a window - just a URL
When I try creating a page with two windows, containing URLs to pages which render charts, the bottom window borders never show until the window is resized (no matter how high the window is made).

I really want to know if it is (or shortly will be?) possible to create multiple windows and charts on a page, without having to embed other pages (which would seem the HTML5 way of doing things).
If it is - how do I do it?

Currently the best I've got is:-

<script type="text/javascript">

$("#window").kendoWindow({ draggable: true, resizable: true, width: "480px", height: "300px", title: "Discharges", content: "http://findev1/WCF/dischargeswidget.htm", modal: false, actions: [ "Close"] });

$("#window2").kendoWindow({ draggable: true, resizable: true, width: "480px", height: "300px", title: "Admissions", content: "http://findev1/WCF/AdmissionsWidget.htm", modal: false, actions: ["Close"] });

</script>

Which still has issues.

Thanks

Window

answered on 09 Dec 2011

1 answer

149 views

template dropdown problem to display and bind to a grid

It is weird, I need tech support to have this check, wondering if anything wrong inside the below script to make code fail to display.

debug error: Uncaught TypeError: Object [object Object] has no method 'prop'

Thanks

<div id="grid"></div>

<script type="text/x-kendo-template" id="template">
       <input type="search" id="category"></input>
</script>

<script>
$(document).ready(function () {
    var grid = $('#grid').kendoGrid({
        dataSource: datasource,
        toolbar: kendo.template($("#template").html()),
    });

    var dropDown = grid.find("#category").kendoDropDownList({
        dataTextField: "CategoryName",
        dataValueField: "CategoryID",
        autoBind: false,
        optionLabel: "All",
        dataSource: categoryDataSource,
        change: function () {
            var value = this.value();
            if (value) {
                grid.data("kendoGrid").dataSource.filter({ field: "CategoryID", operator: "eq", value: parseInt(value) });
            } else {
                grid.data("kendoGrid").dataSource.filter({});
            }
        }
    });
</script>

Grid

answered on 08 Dec 2011

2 answers

322 views

Help with Remote Data JSONP Source

I'm about to pull my hair out trying to get data to display. I've tried in a grid and now I'm just using a template, slightly modified from the Twitter example.

Here is my code:

<script type="text/javascript">

$(document).ready(function() {

var template = kendo.template($("#template").html());

var dataSource = new kendo.data.DataSource({

transport: {

read: {

url: "http://myserver.com/FutureEventList.json",

dataType: "jsonp",

}

},

schema: {

data: ""

}

});

dataSource.read();

});

</script>

(I replaced the server name with myserver.com).

This JSON service runs on our internal service and I can normally get it via a webclient, etc.

The Fiddler return data looks like this:

HTTP/1.1 200 OK

Cache-Control: private

Content-Length: 748

Content-Type: application/json; charset=utf-8

Server: Microsoft-IIS/7.5

X-AspNet-Version: 4.0.30319

X-Powered-By: ASP.NET

Access-Control-Allow-Origin: *

Date: Wed, 07 Dec 2011 16:28:04 GMT

[{"EventID":"HL111213","InhomeDate":"12\/13\/2011 12:00:00 AM"},{"EventID":"HL120117","InhomeDate":"1\/17\/2012 12:00:00 AM"},{"EventID":"HL120214","InhomeDate":"2\/14\/2012 12:00:00 AM"},{"EventID":"HL120313","InhomeDate":"3\/13\/2012 12:00:00 AM"},{"EventID":"HL120410","InhomeDate":"4\/10\/2012 12:00:00 AM"},{"EventID":"HL120515","InhomeDate":"5\/15\/2012 12:00:00 AM"},{"EventID":"HL120612","InhomeDate":"6\/12\/2012 12:00:00 AM"},{"EventID":"HL120717","InhomeDate":"7\/17\/2012 12:00:00 AM"},{"EventID":"HL120814","InhomeDate":"8\/14\/2012 12:00:00 AM"},{"EventID":"HL120911","InhomeDate":"9\/11\/2012 12:00:00 AM"},{"EventID":"HL121016","InhomeDate":"10\/16\/2012 12:00:00 AM"},{"EventID":"HL121113","InhomeDate":"11\/13\/2012 12:00:00 AM"}]

I modified the template to look like this:

<script id="template" type="text/x-kendo-template">

<div class="tweet k-header">

#= EventID #

</div>

</script>

But nothing ever shows up. Any help would be appreciated. Eventually, I'd like to have the data in a grid, but I'm trying to take baby steps first. Is there anything wrong with how my service is configured? Do I need to modify my transport?

Thanks

Troy

Data Source

answered on 08 Dec 2011

0 answers

135 views

Radio buttons? Checkboxes?

Hi,

Are these controls included in the library? You don't list any examples for how to create these.

After struggling with trying to align multiple radio buttons and labels within the same div element using CSS I decided to opt for a dropdown list. But, it would be nice to see these controls availalble in the Kendo package.

General Discussions

asked on 08 Dec 2011

1 answer

68 views

Efficiency Question

Hey, I'm sure you probably answered this question somewhere, but I couldn't find it. My understanding in how KendoUI works is that, the javascript basically generates the elements on the clients side and pulls very little from the server side, and this would reduce the server resources used significantly.

I'm going to be presenting KendoUI to be the potential foundation of a development project I'm assigned, and I want to be knowledgeable in this regard. If someone could please expand on this for me with any extra information (details), I would greatly appreciate it.

Will be purchasing license as soon as we have decided.

Thanks for the great tools!

General Discussions

answered on 08 Dec 2011

3 answers

111 views

Grid Not working

Hello,

I have problem with simple grid binding from remote source.
Please any help? :(

test.php

<html>

<head>

<script type="text/javascript" src="../js/jQuery/jquery-1.6.2.min.js"></script>

<script type="text/javascript" src="../js/Kendo/kendo.all.min.js"></script>

<link rel="stylesheet" href="../css/Kendo/kendo.silver.min.css" />

<link rel="stylesheet" href="../css/Kendo/kendo.common.min.css"

/>

<script type="text/javascript" src="../js/test2.js"></script>

</head>

<body>

<div id="grid" style="height: 700px; background-color: gray;">

<table id="tab">

<tr>

<th data-field="FirstName">First Name</th>

<th data-field="LastName">Last Name</th>

</tr>

</table>

</div>

</body>

</html>

test2.js

$(document).ready(function(){

var ds = new kendo.data.DataSource({

transport: {

read: {

url: "users.json"

}

});

$("#tab").kendoGrid({

dataSource: ds

});

users.json

{

"FirstName" : "Mirko", "LastName" : "Mitrovic",

"FirstName" : "Marko", "LastName" : "Nikolic"

}

Best Regards!

Grid

answered on 08 Dec 2011

1 answer

208 views

grid example for mvc 3 json data

hi where can i find best grid example that works with mvc 3 json data.

Grid

answered on 08 Dec 2011

3 answers

208 views

list of children after drop

This is obvious:
var treeview = $("#treeview").kendoTreeView({
dragAndDrop: true,
drop: function(e){
...
}
});

But I have no idea how to get the "text" of the parent node, in which item is dropped.
And how to get a list / array of children for that parent.
eg. ["item 1.1", "item 1.2", "item 1.3"]

Is there a method for node like children() ?

TreeView

answered on 08 Dec 2011

3 answers

57 views

404: Kendo/gradient.png

styles/kendo.kendo.min.css contains a reference to Kendo/gradient.png, but that doesn't seem to be in the trial zip. Where can I find this file?

General Discussions

answered on 08 Dec 2011

8 answers

295 views

Local Virtual Scrolling - my changes (grouping/sorting works)

Hello guys!

As I said in this topic: http://www.kendoui.com/forums/framework/data-source/ranges.aspx i had made some changes in kendo UI code.

I don't know if my improvements are well implemented, but everything works fine. What i did:
1. Added new option for _selectable - now we can prevent default select in our dataGrid.

selectable: {

mode: "multiple cell",

preventDefault: true

}

2. Local Virtual Scrolling with grouping works fine.
3. (Multicolumn) Sorting and nested sorting aswell.

All changes are backward compatible. And it's appear that Remote Virtual Scrolling works with my changes as well.

I have question now: should I provide some demo, or just send code to you, or put it in this topic?

Rgrds,
Oskar.

Grid

answered on 08 Dec 2011