Questions on Kendo UI for jQuery Forum

0 answers

110 views

Can we do fractions by any chance?

Just wondering... :)

NumericTextBox

asked on 11 Dec 2011

0 answers

200 views

Unable to set more than one Tab on reload

This has been solved.
I have made the following changes and it now works. here are the changes:

// change from:

mainTabs.select('#' + mainTabActive);

themeTabs.select('#' + themeTabActive );

mainTabs.reload('#' + mainTabActive );

// to this:

mainTabs.select(mainTabs.tabGroup.children('#' + mainTabActive));

themeTabs.select(themeTabs.tabGroup.children('#' + themeTabActive ));

Below is my code.
I have a tab within a tab.
When I click on a tab I save the index to the local storage (thanks HTML5). Then when I reload I want to set the tabs back to what they were. I can set either tab OK, but if I try to set both I get redraw issues.

Here is the code.

$jQ = jQuery.noConflict();

$jQ(document).ready(function($) {

/* TABS SECTION */

var mainTabs =$('#tabs').kendoTabStrip().data("kendoTabStrip");

var themeTabs = $('#theme-tabs').kendoTabStrip().data("kendoTabStrip");

var mainTabActive = $.jStorage.get("mainTab");

var themeTabActive = $.jStorage.get("themeTab");

mainTabs.select('#' + mainTabActive);

themeTabs.select('#' + themeTabActive );

mainTabs.reload('#' + mainTabActive );

//MainTab

$( '#tabs' ).click(function(e) {

var selectedTab = e.currentTarget.id;

$.jStorage.set("mainTab", selectedTab);

});

//theme tabs

$( '#theme-tabs' ).click(function(e) {

var selectedTab = e.currentTarget.id;

$.jStorage.set("themeTab", selectedTab);

});

TabStrip

asked on 11 Dec 2011

11 answers

192 views

What to say to devs coming from WPF/Silverlight/WinForms?

I suggested to a client that they look at Kendo UI for development. They have a major LOB app on Windows (WPF/Silverlight/WinForms) and are looking to jump to a similarly rich UI platform. I suggested looking at Kendo UI and here is their response:

"I looked at their site and widgets. Very primitive. For example, I don't see any events triggered on a cell in the grid widget. I also don't see any provision for different cell types in the grid. Combo, button, masked edit, etc."

Any advice for developers coming from rich UI environments and looking to replace UI with similar richness?

General Discussions

answered on 10 Dec 2011

0 answers

90 views

putting 'it' together (beginners)

Hello hello ...

I just got a look-see at Kendo UI, looks nice and I was impressed enough to take it to the first step -- Put a few localhost pages together and see how I like it and if it is enough of a step-forward from jQuery or Dojo to put real-time into this thing-o.

I reckon that is going to be a common theme, and imhx [in my humble eXperience] ... most of us go through this when we see a new framework or tool with some potential. So I started this thread for YOU to add your "next step forward" to the forum thread. Hopefully people like me (but sometimes with more time, than I had this weekend) can answer your query and we will all do better-er. .... Why no yes? Here's my 'thing' ...

Assemble different widgets on a splitter page.

So I made a page from the Splitter demo -- With the intention to put a Menu or Treeview in the left-hand panel. I was looking to assemble a page from different panels with a different widget in each. When I load that simple idea as page the menu or treeview (doesn't matter) only shows as a HTML mark-up and not showing as a Kendo widget.

I'd like it if someone or me finds out how to to something simple like that -- Combining Kendo widgets? My second curiosity, is to figure out how to load that left-hand splitter with a menu or treeview thing via ajax.

Really; I wanted to put three or four of these coool loooooking wiiiiidegets on-screen ensemble. It doesn't seem to be so sweet to effect that. I worked that I need to get an element loaded before asking a jQuery or Kendo element to work with it.

I'm interested as a beginner -- What are the effective and simple ways to assemble a page-layout using widgets, static content, and/or ajax loads?

That's my beginner question ...

ADD your question ... !

Many thanks ... Will

General Discussions

asked on 10 Dec 2011

1 answer

405 views

Kendo CSS/HTML framework like Blueprint, YUI or Zurb's Foundation??

Hi - Kendo UI looks great.

Is there an overall CSS/HTML framework that can work with it, like 960, Blueprint, YUI or Zurb's Foundation?? I don't want my template grids and CSS to fight with Kendo UI.

thx

Templates

answered on 10 Dec 2011

0 answers

148 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

74 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

605 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

185 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

361 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