Questions on Kendo UI for jQuery Forum

12 answers

358 views

Hey everyone!

I was searching all over but couldn't find an answer to my question. I'm initializing an autocomplete widget as the following:

This code is loaded into my DOM as a result of an Ajax request:

<div id="view_ticketCreate">

<form id="jar_ticketing_create"action="" class="k-block jar-container">

<fieldset class="login">

<legend>Kontaktinformationen</legend>

<p class="notice">Definieren Sie hier die Kontaktinformationen zu diesem Ticket.</p>

<p>

<label>Kunde</label>

<input data-role="autocomplete" data-bind="source: customers, events{click: inject}" data-text-field="CName" placeholder="Suchen Sie nach dem Kunde" type="text" id="jtc_cID" class="k-textbox sourced">

</p>

<p>

<label>Kontakt</label>

<input type="text" name="jtc_cName" class="k-textbox">

</p>

<p>

<label>E-Mail</label>

<input data-bind="value: cMail" type="text" name="jtc_cMail" class="k-textbox">

</p>

<p>

<label>Telefon</label>

<input data-bind="value: cPhone" type="text" name="jtc_cPhone" class="k-textbox">

</p>

<p>

<label>Gerät</label>

<select name="dID" class="k-textbox sourced">

<option value="000">Nicht geräte spezifisch</option>

<option value="001">CFBS01</option>

<option value="002">CFBS02</option>

<option value="003">CFBS03</option>

<option value="004">CFBS04</option>

</select>

</p>

<p>

<label>Login</label>

<input type="text" name="cLogin" class="k-textbox">

</p>

</fieldset>

</form>

</div>

<script>

kendo.bind($("#view_ticketCreate"), view_ticketCreate);

</script>

in my main (an always loaded) JS file i got:

var view_ticketCreate = kendo.observable({

customers: new kendo.data.DataSource({

transport: {

read: {

url: "http://server/API/customers/search/",

dataType: "jsonp",

contentType: "application/json; charset=utf-8"

},

parameterMap: function(options, operation) {

return {

SearchTag: options.filter.filters[0].value

}

},

schema: {

data: "data"

},

serverFiltering: true,

dataTextField: "CName",

select: function(e){

if (e.item == null) return;

var DataItem = this.dataItem(e.item.index())

cPhone: DataItem.Telefon

}

}),

inject: function(e){

alert('ok')

},

cPhone: "0123456789",

cMail: "asd@asd.de"

});

However, the autocomplete search works perfect. But now I want to populate the fields jtc_cMail and jtc_cPhone with values from my autocomplete request. But either the select: Function is working (not allowed here (guess because MVVM?), also the custom event inject is fireing.

I couldn't find anything how I need to go on. Please help me out.

Greetings

Duke

MVVM

answered on 04 Jun 2013

1 answer

147 views

Encapsulating a dataSource.fetch()

Hello Support:

I'm having conceptual difficulties with how to encapsulate a fetch(). Consider the following:

var getAllProjects = function() {
projectsDataSource.fetch(function() {
var dataView = projectsDataSource.view();
return dataView;
});
};

where projectsDataSource is a Kendo dataSource defined with a remote source. I should say that the inner portion above works flawlessly (by inner portion I mean the part defined as projectsDataSource.fetch(function() { ...}).

However, I decided to encapsulate this functionality in a separate module defined by RequireJS, leading naively to the code above where I declare getAllProjects().

I'm trying to return dataView to the outer function, getAllProjects(), a function that is revealed publicly. All I get back, though, is undefined. It would seem that you're using callbacks, not promises, which appears to be confusing me.

What am I missing here?

Thank you.

Data Source

answered on 04 Jun 2013

3 answers

703 views

How to access kendoGrid data in parameterMap function

I am using Kendo dataSource with transport (read, update, create) functionality. read operation retrieves data and displays it in a Grid. Gird has 3 columns - key, value, and class. Update operation edits a particular row taking in the options object as shown -

parameterMap : function (options, operation) {
if (operation == "update") {
return {key : options.models[0].key, value : options.models[0].value, class : options.models[0].class}
}
}
The options object above is pre-loaded with the data in the particular row of the grid being edited.

However, for create operation, the options object is pre-set to null for all the fields. Options object is loaded when the user enters values for key and value. The value of class remains the same for all the rows, existing and new. How can I access the grid data (for the value of class) within the the code below?

parameterMap : function (options, operation) {
if (operation == "update") {
return {key : options.models[0].key, value : options.models[0].value, class : options.models[0].class}
}

if (operation == "create") {
return {key : options.models[0].key, value : options.models[0].value, class : <what code should go here?>}
}
}

Grid

answered on 04 Jun 2013

1 answer

356 views

Can I disable the details template for a new row in the outer Kendo grid?

I have a grid with a details template (i.e outer grid with an inner grid).

My outer grid has "Create" functionality. When I add a new row I am able to expand the inner grid before saving, and this causes an error in the backend, because the new row is not saved and does not have an id yet.

Is there a way to disable the details (inner grid expansion) for a new row?

Grid

answered on 04 Jun 2013

1 answer

71 views

Inconsistent documentation on removeVerb

Hi,

Just to let you know that API Reference at http://docs.kendoui.com/api/web/upload#configuration-async.removeField says:

async.removeVerb String(default: "DELETE")

but by default POST is used and async.removeUrl is stating that server method should support POST.

Best regards

Upload

answered on 04 Jun 2013

1 answer

220 views

MVC Grid general localization.

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

217 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

190 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

193 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

98 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