Questions on Kendo UI for jQuery Forum

4 answers

312 views

How to build a real application with Kendo UI

I'm well aware that Kendo UI is fairly new and that the team is working hard to improve various aspects of the framework. But RIGHT NOW, what would be the best way to start building a serious, large application with Kendo UI? I'm especially interested in the following topics:

Maybe I am blind but so far I haven't seen anything like layouts (see e.g. ExtJS) which help me in building complex, resizeable arrangements of the various UI widgets. So assuming there are no layouts at the moment, what is the best way to get similar results?
Probably most complex applications use some kind of docking component (see e.g. RadDocking) which lets the user rearrange different views. Are there any plans on building such a component for Kendo UI?
For the moment I could live without a docking component as long as there are some basic layouts as mentioned above and some kind of collapsible containers. Is there anything like that?
I've seen that the next framework version will provide a MVVM infrastructure. This is great news. But when I need to setup my application architecture right now, how would I do this? Knockout.js? Do you think it's possible to migrate from Knockout to Kendo's MVVM infrastructure afterwards?

Alright, these are quite my primary questions. It would be great to get some feedback about this.

Thank you in advance and
merry christmas,

Stephan

General Discussions

answered on 04 Jan 2012

1 answer

101 views

backend server

Hi

Can anyone recommend me a good backend service that works well with kendoui, with security

cheers

Jason

Data Source

answered on 04 Jan 2012

1 answer

136 views

validator is validating outside of the form it is declared in

How do limit the validator to only validate items within the form in wich it is declared? I dont want my other forms on the page to trigger validation when they get submitted.

Thanks
-J

Validation

answered on 04 Jan 2012

5 answers

87 views

Search at Forum level

Can you please add search feature at the forum level so we can search for an issue before reporting it.

Thanks,
Piyush Bhatt

General Discussions

answered on 04 Jan 2012

1 answer

718 views

Programatically Selecting Item From Drop Down?

I am having trouble with programmatically selecting an item in a Kendo DropDownList.

I want to preselect an item in a list of regions/languages based on the current culture. I have created the following, but the item is not being preselected (at least visually).

The HTML:

<div id="localization_container" class="localization_container">

<input id="localization_dropdownlist" class="localization_dropdownlist"></input>

</div>

<div id="script_references">

<script src="scripts/jquery.min.js" type="text/javascript"></script>

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

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

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

</div>

The XML:

<?xml version="1.0" encoding="utf-8" ?>

<localization>

<language>

<display_name>United States (English)</display_name>

<local_identifier>us</local_identifier>

<culture_info>en-US</culture_info>

<image><![CDATA[images/en-US/flag.png]]></image>

</language>

<language>

<display_name>France (French)</display_name>

<local_identifier>fr</local_identifier>

<culture_info>fr-FR</culture_info>

<image><![CDATA[images/fr/flag.png]]></image>

</language>

<language>

<display_name>Sweden (Swedish)</display_name>

<local_identifier>se</local_identifier>

<culture_info>sv-SE</culture_info>

<image><![CDATA[images/se/flag.png]]></image>

</language>

<language>

<display_name>Philippines (Tagalog)</display_name>

<local_identifier>ph</local_identifier>

<culture_info>en-PH</culture_info>

<image><![CDATA[images/en-PH/flag.png]]></image>

</language>

</localization>

The JavaScript:

// === LOCALIZATION DROPDOWNLIST ===

var template_localization_dropdownlist = kendo.template('<img src="#=image#" style="width: 16px; height: 11px; border-width: 0px;" /> #=display_name#');

$(document).ready(function () {

var selected_culture = get_current_culture()

if (selected_culture == '') {

selected_culture = 'en-US';

}

$("#localization_dropdownlist").width(200).kendoDropDownList(

{

autoBind: false,

dataTextField: "display_name",

dataValueField: "culture_info",

filter: "contains",

template: template_localization_dropdownlist,

dataSource: {

transport:

{

read: "xml/localization.xml"

},

schema:

{

type: "xml",

data: "/localization/language",

model:

{

fields:

{

display_name: "display_name/text()",

local_identifier: "local_identifier/text()",

culture_info: "culture_info/text()",

image: "image/text()"

}

},

change: function () {

this.value(selected_culture);

}

});

DropDownList

answered on 03 Jan 2012

3 answers

409 views

Client Paging doesn't work

Hello,

We are trying Kendo UI.

In our page, we put a grid bind to a json WCF with pageSize : 30, serverPaging: false and pageable: true.
When the page is loaded, the bottom bar with pages is empty and if we click on a column to sort, then the bottom bar become filled with pages (see attachements).

Can you help me to fix this problem ?

Regards,
Guillaume.

Grid

answered on 03 Jan 2012

4 answers

707 views

Auto Scaling in x-axis due to large number of values

Hi Telerik Team,

I am new to Kendo UI charts. Thanks for creating such an amazing product. It really has made developer's life easier. Now lets come to the point. Do Kendo charts provide any provision for auto scaling x axis? like I have a large number of values which mess up the chart display.

Thanks

Charts

answered on 03 Jan 2012

6 answers

1.1K+ views

Sort problem: Enable/Disable Single Column Sort on a per column basis

Hi,

I have a select column and I want to put a checkbox in the header.
Further only 2 of my columns should allow sorting.
In fact I remove via JQuery the rest of the column captions because they skew my layout. For example, I use icons that are very narrow but the column name is 10x longer than the icon.

So to make a long story short I have columns sorting (all but 2) that should never be sortable.
I tried unbinding the click handler on the $('.k-link').each(function () {.... massage col headers}) but they still sort and I do not see the inline event handlers so I fear it is in the framework and I have no control over sorting.

Even worse, due to this behavior my checkbox cannot hold the state because the grid column header events supersede the checkbox behavior I need so my users can select/deselect an entire page of data.

I have included a snapshot.
I want the checkbox for col1 header to select/deselect all rows on the page. I tried your select code but I feel this common pattern works better for me.

Finally I only want the two columns with text headers to be sortable. I tried adding sortable to the col definition of the grid but it ignores the attribute.

Any suggestions would be welcome!

Cary

Grid

answered on 03 Jan 2012

1 answer

107 views

Dynamic sliders

Was wondering if sliders can be recreated on the fly.

Let me expand on this. I have two sliders. Slider Parent and Slider Children.

When a slider "change" event occurs on Slider Parent I want it to recreate the Slider Children so that the max parameter in the object can change and the input changes it ticks accordingly in the UI. That is, the one slider recalibrates the max or min of the otehr sliders properties....

I have tried quite a few things but I think this is an ability that has to be made into a method in the slider software. No?

Slider

answered on 03 Jan 2012

1 answer

57 views

Bug with <div></div> vs <div />?

I think I found a bug in either KendoUI or jQuery, I am not good enough in either to be sure which. I tend to like short code so I have taken to removing the closing tag in most of my HTML have have no direct content, so I would do: <div /> rather than <div></div>. With both the Kendo Grid and Template they generate different html depending on which syntax I use.

<div id="manGrid" class="col4" style="width: 800px; height: 500px; background-color: Green !important; "></div>
<p>Hello World</p>
<br /><br />
<div id="radGrid" class="col4" style="width: 800px; height: 500px; background-color: Yellow !important; " ></div>

Yields:
<div id="manGrid" class="col4" style="width: 800px; height: 500px; background-color: Green !important; "></div>
<p>Hello World</p>
<br>
<br>
<div id="radGrid" class="col4 k-grid k-widget" style="width: 800px; height: 500px; background-color: Yellow !important; " tabindex="0">

This would be the expected behavior, but the syntax I prefer give me.

Where as:
<div id="manGrid" class="col4" style="width: 800px; height: 500px; background-color: Green !important; " />
<p>Hello World</p>
<br /><br />
<div id="radGrid" class="col4" style="width: 800px; height: 500px; background-color: Yellow !important; " />

Yields:

<div id="manGrid" class="col4" style="width: 800px; height: 500px; background-color: Green !important; ">
<p>Hello World</p>
<br>
<br>
<div id="radGrid" class="col4 k-grid k-widget" style="width: 800px; height: 500px; background-color: Yellow !important; " tabindex="0">
</div>

Both have the same javascript code. The first div is replaced with a template while the second is replaced with a grid. The problem being is the second becomes a child of the first with the <div /> sentax, while they are peers with the <div></div> sentax.

Thanks
Randy

General Discussions

answered on 03 Jan 2012