Questions on Kendo UI for jQuery Forum

0 answers

115 views

collapse group

I have looked through all the examples and tried many iterations and am unable to get my groups to collapse.

var localDataSource = new kendo.data.DataSource({

data: skills,

schema: {

model: {

fields: {

CatId: { type: "number" },

SkillCat: { type: "string" },

Skill: { type: "string" },

IsCorrect: { type: "string" }

}

});

var grid = $("#grid").kendoGrid({

dataSource: localDataSource,

columns: [

{ field: "Skill" },

{ field: "IsCorrect" }

],

height: 470,

pageable: true,

scrollable: true,

dataBound: function () {

localDataSource.group({ field: "CatId" });

grid.collapseGroup(grid.tbody.find(">tr.k-grouping-row:first"));

for (i = 1; i <= 6; i++) {

grid.collapseGroup(grid.tbody.find(">tr.k-grouping-row").eq(i));

};

}

});

I also need to have my group headers changed to SkillCat value. Can I do this with templates? I haven't tried that yet.

Grid

asked on 09 Dec 2011

1 answer

55 views

Grid eliminating attributes of td's

We were really hoping for a complete solution when we purchased Kendo. For interactive tables, we currently use datatables. It seems as if the way the Kendoui grid is implemented, it eliminates attributes of the table cells. For instance when this code is viewed in firebug:
'<tr><td id="prod1234Name" class="red">bananas</td></tr>'
firebug shows that all attributes were gone:
'<tr><td>bananas</td></tr>'

Because our application acts upon various cell via the elements attributes, this is a non-starter for us.

We then thought maybe we could 'Jimmy-It' by wrapping the content in a span:
'<tr><td><span id="prod1234Name" class="red">bananas</span></td></tr>'
That failed as well and rendered the span on the page as text.

Why would being able to add attributes to the cells in a table break the GRID?

Grid

answered on 09 Dec 2011

1 answer

570 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

151 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

331 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

139 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

71 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

115 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

212 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

214 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