Questions on Kendo UI for jQuery Forum

1 answer

226 views

Hi
I am using kendo grid with mvc.
It is working very well but I have an issue with localization.
I would to translate all grid messages to Danish.
I can make is work by using
.Pageable(....)
But since I have a lot of grid to translate I would like to be able to do it from a central place.
I have tried with the globalization file for Denmark by inserting:
name: "da-DK",
pageable: {
messages: {
display: "{0} - {1} af {2} rækker"
}
},
...
But is it not applied.
Is there some way I can make this configuration a central place ?
Best Regards
Nicolai

Grid

answered on 04 Jun 2013

6 answers

221 views

Odd behavior with 'Select all - delete - paste'

Hi, I think I found a bug in the editor. I looked but I wasn't able to find mention of in other threads.

To reproduce using the demo editor:

Open the demo editor
Select-all text in the editor
Delete
Open Dev Tools to view the html elements
Observe the remaining p tag
Paste in any text to the "empty" editor
Observe the pasted text in a hidden k-paste-container element below the p

As a work around, the p tag can be deleted before or after the paste but many of our customers will likely not figure this out on their own.

Editor

answered on 04 Jun 2013

1 answer

194 views

Grid - toolbar.create - Calling the Read method and not calling the constructor

I've created a basic grid, but when the Create is clicked in the toolbar, it seems like the Read-method is called on the controller. Besides this, the constructor of the DossierType is not called ?
Is there any api available that I can use to direct the grid to a specific method, used during the build of the entity ?

@(Html.Kendo().Grid<DossierType>()

.Name("dossierTypes")

.PrefixUrlParameters(false)

.Columns(columns =>

{

columns.Bound(user => user.Sample);

}

)

.ToolBar(toolbar => toolbar.Create().Text("Nieuw Dossiertype"))

.Editable(editable => editable.Mode(GridEditMode.PopUp))

.BindTo(Model.Items)

.DataSource(config => config

.Server()

.Model(modelConfig => modelConfig.Id(field => field.Id))

.Create(create => create.Action("Create", "DossierType"))

.Read(read => read.Action("Read", "DossierType"))

.Update(update => update.Action("Update", "DossierType"))

.Destroy(destroy => destroy.Action("Remove", "DossierType"))

)

Grid

answered on 04 Jun 2013

4 answers

212 views

Column Stack

Hi,

We're just evaluating Kendo UI chart controls, and have a question about Stacked Column Charts.

When generating a stacked column chart do all records in the datasource have to have the same number of values?

For example:

If I have a chart as follows:

$("#chart").kendoChart

(

{

dataSource: { data: arData, sort: [{ field: "axisOrder", dir: "asc" }, { field: "stack", dir: "asc"}], group: [{ field: "stack"}] },

legend: { visible: false },

series: [{

stack: true,

type: "column",

field: "value"

}],

categoryAxis: {

field: "category",

labels: {

rotation: -90

}

)

and the data is as follows:

var arData = [

{ stack: "Stack A", category: "1", value: 10, axisOrder: 1 },

{ stack: "Stack A", category: "2", value: 20, axisOrder: 2 },

{ stack: "Stack A", category: "3", value: 30, axisOrder: 3 },

{ stack: "Stack B", category: "1", value: 20, axisOrder: 1 },

{ stack: "Stack B", category: "2", value: 30, axisOrder: 2 },

{ stack: "Stack B", category: "3", value: 40, axisOrder: 3 },

{ stack: "Stack C", category: "1", value: 30, axisOrder: 1 },

{ stack: "Stack C", category: "2", value: 40, axisOrder: 2 },

{ stack: "Stack C", category: "3", value: 50, axisOrder: 3}

];

The chart is rendered as I expect, with 3 columns, each with a stack containing "Stack A", "Stack B" and "Stack C". However, if I remove the "Stack C / Category:2" record, the value of "Stack C / Category:3" record appears on the 2nd column, eg:

var arData = [

{ stack: "Stack A", category: "1", value: 10, axisOrder: 1 },

{ stack: "Stack A", category: "2", value: 20, axisOrder: 2 },

{ stack: "Stack A", category: "3", value: 30, axisOrder: 3 },

{ stack: "Stack B", category: "1", value: 20, axisOrder: 1 },

{ stack: "Stack B", category: "2", value: 30, axisOrder: 2 },

{ stack: "Stack B", category: "3", value: 40, axisOrder: 3 },

{ stack: "Stack C", category: "1", value: 30, axisOrder: 1 },

//{ stack: "Stack C", category: "2", value: 40, axisOrder: 2 },

{ stack: "Stack C", category: "3", value: 50, axisOrder: 3}

];

Other behaviour also occurs if the first "group" doesn't contain all the possible categories, eg you can end up with columns that don't have a label.

Is there a way to have the chart use 0 as the value for the missing records, or is there another way to achieve this.

Charts

answered on 04 Jun 2013

2 answers

100 views

kendo UI grid in SharePoint 2010 - the column Grouping feature does not work (drag'n'drop issue ?)

n SharePoint 2010, I have an ASPX page with a kendo UI grid.
I have configured the grid to have the column Grouping feature turned ON:

groupable: true,
reorderable: true

the grid loads, and the toolstrip above the grid, tells user to drag'n'drop columns, in order to have them grouped.

However, I cannot drag'n'drop the column header:
the 'drag' does not start.

The same code works fine outside of SharePoint (in a ASP.NET project).

It looks like SharePoint javascript is preventing kendo UI from receiving the 'drag' event ?

note: the feature to re-order columns also does not work (also because the 'drag' operation does not start)

There are no browser errors (in Chrome console, OR in IE9 console).

note: I logged this on the forum (here: http://www.kendoui.com/forums/permalink/boD1Mq6aG2OF1P8AAFTdxQ)

there was a suggestion that the issue was caused by an invalid DOCTYPE,
but this DOCTYPE is present:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

to solve this one, you need the source code.

I have re-produced the issue in a basic SP2010 project.

I used IE9 to save the site and am attaching it in this ZIP.

to reproduce - just unzip + open the HTML file in Chrome or IE9.
try to drag'n'drop a column heading - it will not work.

note: I know the styling of the grid is bit messy (this is from the IE save) but that is not what is causing the issue.

look forward to hearing back from you ....

Grid

answered on 04 Jun 2013

4 answers

1.2K+ views

Updating boolean field in Kendo Grid

Hi,

I created an editable grid with a column containing a CheckBox using the following code :

columns.Bound(Function(c) c.Active).ClientTemplate("<input type='checkbox' #= Active ? checked='checked' : '' # />").Width("50px")

The checkbox is checked correctly when the value of the backing data is "true". However it doesn't work when I try to update this value. In other words, if I check the checkbox, the value sent to the controller is always "false".

What am I doing wrong ?

Thanks a lot

Grid

answered on 04 Jun 2013

2 answers

112 views

RangeSlider Tooltip disappears...

How can I make the Tooltip over the slider would be visible always and does not disapear?

Slider

answered on 04 Jun 2013

1 answer

198 views

ForeignKey column not showing dropdown.

I'm trying to follow your Grid / ForeignKey column Add new record and adapt it to my own model. However, when I click on the foreign key column to edit it, all I get it is a numeric up down control. I have seen suggestions that I have to create an editor template for the foreign key with a ComboBox, but shouldn't the example mention this somewhere. I can't find any mention of a ForeignKey column anywhere in the documentation either. It seems some things just never improve.

Grid

answered on 04 Jun 2013

2 answers

107 views

ScrollView changing event

Hi guys,
I am working with the ScrollView and trying to prevent users from scrolling to certain pages. I created an event handler for changing. According to the docs, there should be currentPage and nextPage numbers available in the event. It appears that only the currentPage is available when I dump out the event object. Can you help me out with this?

Using Q1 2013 release
Reference: http://docs.kendoui.com/api/mobile/scrollview#events-changing

Thanks!
Seth

ScrollView (Mobile)

answered on 03 Jun 2013

3 answers

174 views

DropDownList Keyboard Navigation not working

I am using Kendo Q3 2012 release and jQuery 1.8.2. Keyboard navigation is not working on any of the DropDownLists in my project.

Here's the JavaScript configuration of one of them:

            $("#TradeItemId").kendoDropDownList({
                dataTextField: "Name",
                dataValueField: "Id",
                dataSource: {
                                type: "json",
                                transport: {
                                    read: getTradeItemsUrl
                                }            
                },
                change: biTradeItemIdChanged
            });

And here's the configuration of one in Razor:

            @(Html.Kendo().DropDownListFor(m => m.CrewId)
                  .DataTextField("Name")
                  .DataValueField("Id")
                  .DataSource(s => s.Read("GetCrews", "Task"))
                  .Events(e => e.Change("crewChanged"))
            )

Keyboard navigation works on neither. Is there something else that must be added to the configuration? Are there problems with keyboard navigation when using a DataSource (most of the demos seem to use BindTo)?

Any help in resolving this issue would be greatly appreciated.

DropDownList

answered on 03 Jun 2013