Questions on Kendo UI for jQuery Forum

1 answer

726 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

425 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

720 views

[Solved] 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

116 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

74 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

0 answers

91 views

Documentation

Your documentation on this product is pretty sparse. Do you have plans to enhance? Thanks.

I'm also trying to figure out why i would choose your mobile product over jquerymobile. Can you help me here?

General Discussions

asked on 03 Jan 2012

1 answer

4.7K+ views

Drop Down display text

Hello, I'm curious if there is a way to have the drop down display one line of text constantly. I want to drop down to always display "Please select a field" no matter what is selected from the list below. Once the user makes a selection a field is added to a form and the user can again select another field so it doesn't make sense for the "Please select a field" message to be replaced with the chosen field. It would just be confusing.

Right now I have it set up so that element 0 is the "Please select" message and a bit of javascript that on change does what it's supposed to do and then selects element 0. This works, however there is a "Please select" item that the user sees along with the list of choices. It's far from ideal.

$(document).ready(function () {

SetupForm();

// Kendo Combo Box

$("#fieldToAdd").kendoDropDownList({ index: 0, change: onChange });

function onChange() {

var fieldToAdd = $("#fieldToAdd").data("kendoDropDownList");

value = fieldToAdd.value();

text = fieldToAdd.text();

if (value >= 0) AddFieldOnForm(value, text);

fieldToAdd.select(0);

}

}

<select id="fieldToAdd" class="inputfields" title="test" style="width: 152;">

<option value="-1" style="text-align: center;">Add Field</option>

<option value="5">Checkbox</option>

<option value="9">Checklist</option>

<option value="8">File Upload</option>

<option value="10">Label</option>

<option value="6">Multiple Choice</option>

<option value="7">Picklist</option>

<option value="12">CRM Picklist</option>

<option value="1">Text Single-line</option>

<option value="2">Text Multi-line Small</option>

<option value="3">Text Multi-line Medium</option>

<option value="4">Text Multi-line Large</option>

<option value="11">Subscription Management</option>

<option value="13">Star Rating</option>

<option value="14">Image</option>

</select>

EDIT: An acceptable solution would also be to disable the option from being visible when the drop down is expanded but still be able to programatically select it.

DropDownList

answered on 02 Jan 2012

15 answers

811 views

Data pulled from MySQL in JSON is not being displayed.

I have been browsing similar problems on these forums for a couple hours now, trying different things but I
cannot get the Grid to populate with a JSON datasource pulled from MySQL.

The view_inventory.php returns the json correctly if viewed through the browser. (Set to RETURN json, tried print and echo as well)

I know my way around js a bit, but this is getting past my learning point.

Any help would be appreciated.

EDIT: With some fiddling I got the grid to show up, but I only get a spinning "waiting" in the box, no data. Revised code below.

$(document).ready(function() {

$("#grid").kendoGrid({

dataSource: {

transport: {

read: {

url: "bin/view_inventory.php",

dataType: "json"

}

},

height: 250,

scrollable: true,

sortable: true,

filterable: true,

pageable: true,

columns: [

{

field: "id",

title: "ID"

},

{

field: "type",

title: "Type"

},

{

field: "name",

title: "Name"

},

{

field: "descripton",

title: "Description"

},

{

field: "price",

title: "Price"

},

{

field: "account",

title: "Account"

}

]

});

Data Source

answered on 02 Jan 2012

7 answers

201 views

Query options are not allowed

Hi
I successfully created a dataService with EF4 and OData enable
my uri is http://myserver/sa2.Web/sa2-Web-DomainService1.svc/OData/UserSet
And i successfully see the data using the OdataExplorer
http://www.odata.org/developers/odata-sdk

But when I try to retrieve the data to kendoGrid i obtain an error

<script type="text/javascript">
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://myserver/sa2.Web/sa2-Web-DomainService1.svc/OData/UserSet"
}
},
columns: ["Id", "name"]
});
});
</script>

The table name is User with 2 columns Id and name

Could you help ?????
Thanks
Fred

This XML file does not appear to have any style information associated with it. The document tree is shown below.

<error xmlns="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata">
<code/>
<message xml:lang="en-US">Query options are not allowed.</message>
</error>

Data Source

answered on 02 Jan 2012