Questions on Kendo UI for jQuery Forum

1 answer

133 views

Set only digits in the data-mask attribute — widget doesn't work.

Hello!
If set only digits in the data-mask attribute (for example data-mask="00000"), widget doesnt work. You can check it by link — http://dojo.telerik.com/uFEb/2
How it can be fixed? Thank you!

Best regards,
Kirill.

MaskedTextBox

answered on 01 Sep 2014

3 answers

93 views

put div into char area

Hi, I am making some column chart and needs to put some div (progress bar) on chart area without any css, for example without z-index.
in the attached image show how I made it with css z-index, but it's not a good idea, is there any other way to put customized div into char area?

it's urgent, thanks

Charts

answered on 01 Sep 2014

1 answer

128 views

Kendo ObservableObject functions

I just read that when creating js objects it's better to assign functions via the prototype vs the object literal constructor. I think this is not the case with the kendo ObservableObject but I am curious, why is that?

MVVM

answered on 01 Sep 2014

2 answers

267 views

DataSource used with ESRI ARCGIS REST services?

I've searched everywhere and have finally come here to ask for help :)

Has anyone had any success using ESRI's REST services with a Kendo DataSource?

The problem is that the REST service is not just returning the results. It has a bunch of "meta" data in the JSON before the result set, and it actually encloses the results in an array of objects. Each object has a "geometry" field and an "attributes" field. The actual results are in the attributes field.

So... here is what I have for the transport.read:

transport: {

read: function(options) {

$.ajax({

url: crudBaseUrl + "/query",

dataType: "json",

data: {

f: "json",

token: token,

outFields: "*",

returnGeometry: true,

outSR: 3857,

where: "LN_NO='" + ownerid + "'"

},

type: "POST",

success: function(result) {

window.successResult = result;

options.success(result.features);

}

});

},

Here is the model:

model: {

id: "OBJECTID",

fields: {

OBJECTID: { type: "number", editable: false },

LN_NO: { type: "string" },

QSEC: { type: "string" },

SECTION: { type: "string" },

TOWNSHIP: { type: "string" },

N_S: { type: "string" },

RANGE: { type: "string" },

E_W: { type: "string" },

AF: { type: "string" },

LATITUDE: { type: "string" },

LONGITUDE: { type: "string" },

METHODCODE: { type: "string" },

REFERENCE: { type: "string" },

ACCURACY: { type: "string" },

R: { type: "string" }

}

And here is the column set I use in the Grid to display. Note I have to use "attributes.<field_name>" in order for it to display properly.

columns: [

{

field: "attributes.OBJECTID",

title: "OID",

},

{

field: "attributes.LN_NO",

title: "Loc Number",

},

{

field: "attributes.QSEC",

title: "QSEC"

},

{

field: "attributes.SECTION",

title: "Section",

},

{

field: "attributes.TOWNSHIP",

title: "Township"

},

{

field: "attributes.N_S",

title: "N / S"

},

{

field: "attributes.RANGE",

title: "Range"

},

{

field: "attributes.E_W",

title: "E / W"

},

{

field: "attributes.AF",

title: "Acre/Feet"

},

{

field: "attributes.LATITUDE",

title: "Latitude"

},

{

field: "attributes.LONGITUDE",

title: "Longitude"

},

{

field: "attributes.METHODCODE",

title: "Method Code"

},

{

field: "attributes.REFERENCE",

title: "Reference"

},

{

field: "attributes.ACCURACY",

title: "Accuracy"

},

{

field: "attributes.R",

title: "Reservation"

},

{ command: ["edit", "destroy"], title: " ", width: "200px" }

],

The initial issue was that the row in the grid was disappearing if I hit EDIT then CANCEL. I found out why that is happening - it's because all of the field values I have defined in the datasource are undefined.

Any help is greatly appreciated!

K

Data Source

answered on 29 Aug 2014

2 answers

585 views

Grid row goes blank after update using remote asp.net web service (asmx)

I've banged my head off the table for too long and now I'm asking for help :) Here is my code:
All the kendo requirement files are of course included higher up in the page.
HTML:

<strong>ALIAS INFORMATION</strong><br />

<br />

<form id="offenderAliasForm">

<div id="grdAliases"></div>

</form>

<script src="/sdsoia/Scripts/OffenderFunctions/OffenderAliases.js"></script>

<script type="text/javascript">

$(function () {

initializeAliasForm();

});

</script>

And here is the javascript.

var crudBaseUrl = "/sdsoia/Services/Aliases.asmx";

var currentOffenderId = $.cookie("CurrentPendingOffenderId");

var readData = "{ pendingOffenderId: " + currentOffenderId + " }";

var aliasDataSource = new kendo.data.DataSource({

transport: {

read: {

url: crudBaseUrl + "/GetAliasesForPendingOffender",

dataType: "json",

contentType: "application/json",

type: "POST",

dataFilter: function (data) {

var msg = eval('(' + data + ')');

return msg.d;

}

},

update: {

url: crudBaseUrl + "/UpdateAliasesForPendingOffender",

dataType: "json",

contentType: "application/json",

type: "POST"

},

parameterMap: function (data, type) {

console.log("Using datasource for:", type, "; data:", data);

switch (type) {

case "read":

data = {

pendingOffenderId: currentOffenderId

}

break;

case "update":

break;

}

return kendo.stringify(data);

}

},

schema: {

model: {

id: "Id",

fields: {

Id: { editable: false },

OffenderId: { editable: false },

Name: {},

Ssn: {},

Dob: { type: "date" },

Timestamp: { editable: false }

}

});

var grdAliases = $("#grdAliases").kendoGrid({

columns: [

{

field: "Id",

hidden: true

},

{

field: "OffenderId",

hidden: true

},

{

field: "Name",

title: "Name (Last, First, Middle)"

},

{

field: "Ssn",

title: "SSN",

format: "{0: ###-##-####}",

editor: function (container, options) {

$("<input name='" + options.field + "' />")

.appendTo(container)

.kendoMaskedTextBox({

mask: "###-##-####"

});

}

},

{

field: "Dob",

title: "DOB",

type: "date",

format: "{0:d}"

},

{

field: "Timestamp",

hidden: true

},

{

command: [

{

name: "edit",

text: { edit: "Edit", cancel: "Cancel", update: "Update" }

},

{

name: "destroy",

text: "Delete"

}

]

}

],

editable: {

mode: "inline"

},

selectable: true,

dataSource: aliasDataSource,

toolbar: ["create"],

pageable: {

info: true,

refresh: false,

pageSizes: false,

previousNext: false,

numeric: false,

input: false,

messages: {

display: "{2} records.",

empty: "No records found."

}

},

}).data("kendoGrid");

function initializeAliasForm() {

}

The update is successful every time, but the row I am updating just goes completely blank when I click the update button.

Any help is greatly appreciated!!

Kevin

Grid

answered on 29 Aug 2014

2 answers

1.1K+ views

[Solved] Execute some code after successful grid item update on server.

Hi.

I'm using grid and I can't find a normal solution to execute some code after successful item update on the server.

var ds = new kendo.data.DataSource({

transport: {

read: {

url: 'stations',

dataType: 'json'

},

update: {

url: 'stations',

dataType: 'json',

type: 'PUT'

},

destroy: {

url: 'stations',

dataType: 'json',

type: 'DELETE'

},

create: {

url: 'stations',

dataType: 'json',

type: 'POST'

},

parameterMap: function (data, operation)

{

if (operation !== "read" && data)

{

return JSON.stringify(data);

}

},

batch: false,

schema: {

model: {

id: "Id",

fields: {//some fields... }

}

});

The most obvious solution to me was to use update function with ajax (as in documentation samples). But it doesn't work. There are some work arounds on SO I found, but they seems not good to me. Handling grid save event is not useful because it is raised before server update. Also I tried to use requestEnd event on ds, but it is not obviouse how to differentiate success and error request. And the more important thing is that I have no access to updated item in the requestEnd handler.

So the question: is there some mechanisms to execute some js code with updated item after successful server update within grid?

If it is important, I use angular-kendo.

Thanks in advance.

Grid

answered on 29 Aug 2014

4 answers

909 views

TreeView causes "Maximum call stack size exceeded" error when binding to BreezeJS entities

I'm using kendoTreeView, with Angular and BreezeJS. When I bind directly to the breeze entities, this results in a stack overflow scenario. I assume this is because the breeze entities have circular references with them.

For example, each breeze entity has an "entityAspect" property to track entity state, which contains a reference back to the entity itself. I.e. myEntity.entityAspect.Entity -> myEntity.

In addition, some entities may contain circular references within the model. For example, Customer->Order->Customer.

Is there a way to configure the kendoTreeView to ignore cycles, or to ignore certain paths within the object graph?

TreeView

answered on 29 Aug 2014

2 answers

418 views

Add Kendo UI to Eclipse Luna Dynamic Web Project

I am new to Kendo UI as well as Eclipse Luna. I want to know the best practice on adding Kendo UI to my Dynamic Web Project in Eclipse Luna. I found this outdated article, which did not help me out:

http://blogs.telerik.com/kendoui/posts/13-02-05/head_first_into_kendo_ui_for_java_developers

I have searched for answers on this, but not sure what I need to to. Tried looking for a plug-in, searched Eclipse Marketplace, and tried to add the .zip file for the commercial release of Kendo UI, but cannot get those to work.

If someone could point me in the right direction, I would appreciate any help.

Thanks!

General Discussions

answered on 29 Aug 2014

1 answer

57 views

kendo.format (possible) issue on IE 10

Hi all,

maybe I'm facing with an issue using IE10 and kendo.format method. In particular using kendo.format("Hello{0}", 2) the result will be (see screenshot in IE 10):

- in IE 10 -> Hello2,00
- in Chrome/IE11 -> Hello2 (the expected result)

Maybe this is not an issue, but noticing the usage in your library (as example kendo.web.js shows this line "kendo.format(options.messages.of, totalPages)") it seems to be quite odd.

Regards, bye bye J

General Discussions