Questions on Kendo UI for jQuery Forum

2 answers

156 views

Hi there,

Having failed so far to get angular.js to work nicely with the editor template (see stackoverflow question: http://stackoverflow.com/questions/25527352/kendoui-scheduler-with-angular-js-binding-conflict), I moved on to trying to MVVM to achieve the same result.

I want to have MVVM pull data from my server in order to populate an html option field, but I am unable to get this to do anything. I've created an example here:

http://jsbin.com/layegocoreji/2/

When double clicking to create a new entry in the scheduler, the MVVM is supposed to render a html select field from a static data source, but instead it does nothing. I'd appreciate any advice you can give!

Cheers, Paul.

Scheduler

answered on 01 Sep 2014

1 answer

411 views

[Solved] Dynamically updated chart. How to show always 10 points?

Hi.

I have line chart with following configuration:

1)Angular html part

<div style="padding: 20px"

id="{{generateChartId(stn)}}"

kendo-chart

k-legend="{ position: 'top' }"

k-series-defaults="{ type: 'line' }"

k-series="setupSeries(stn)"

k-category-axis="getCategoryAxisData(stn)"

</div>

2)controller main functions:

$scope.setupSeries = function ()

{

return [

{ field: 'X', name: 'X', categoryField: 'epoch'},

{ field: 'Y', name: 'Y', categoryField: 'epoch' },

{ field: 'Z', name: 'Z', categoryField: 'epoch' }

];

};

$scope.getCategoryAxisData = function (stn)

{

return {

majorGridLines: {

visible: false

},

minorGridLines: {

visible: false

},

majorTicks: {

visible: false,

},

minorTicks: {

visible: false

},

maxDateGroups: 10,

baseUnitStep: "auto",

/*autoBaseUnitSteps: {

minutes: [monitorInterval],

hours: [],

days: [],

weeks: [],

months: [],

years: []

},*/

labels: {

dateFormats: {

hours: "HH mm"

},

//rotation: 45

}

};

Suppose that data updated within five minutes (time interval is 5 minutes) via websockect and function like that:

this.addOnePoint = function (pos)

{

//lastCoordTime = new Date(time);

if (chartData.length > 10)

{

chartData.shift();

chartData.push(formData(pos));

}

else

{

chartData.push(formData(pos));

}

if (!chart)

{

chart = $("#chart" + stationId).data("kendoChart");

}

var dataSource = new kendo.data.DataSource({

data: chartData

});

chart.setDataSource(dataSource);

//chart.refresh();

};

I used similiar code with your benchmark sample because I have the same situation but chart updated not so fast (minutes or even hours).
After there are 10 points on chart (actually 3 points for each time) after the next point it became a chart with with 4 points with time interval equal to 15 minutes.
I suppose that this is because of baseUnitStep: "auto".

If I remove baseUnit or baseUnitStep ("fit" or "auto") then it seems to work as expceted but there are transient time values on category axis.
Suppose point on 17:20, then there would be 17:21, 17:22, 17:23, 17:24 time values between next valuable time point on 17:25. If there are 10 points then
category (time) axis is a total mess, and it is impossible to identify time value. It is possible to use rotation (90 grad), but it is ugly. I just want to have simple solution that I have only points with valuable time on time axis without transiesnt time values.

How can I do that? It seems to me so obvious scenario and behaviour, but your charts api is overcomplicated...

Thanks in advance.

Charts

answered on 01 Sep 2014

1 answer

602 views

No Intellisense in MVC Areas with Kendo

We're having a strange issue with intellisense, Kendo and MVC Areas.We have an MVC application that uses Areas and the Telerik Kendo controls.One developer (Dev1) has NO problem with intellisense for the Kendo controls on pages that are contained within an Area.Another developer (Dev2) only gets the Kendo intellisense on the pages in the root, but not on any pages contained within an Area.

Now, Dev2 has created a separate, vanilla application with Kendo and Areas and in this vanilla application, he has no problems working with intellisense on pages contained within an Area. Therefore, it doesn't seem that it's an environment issue, but rather something with the application. However, this does not explain why Dev1 is having not problems.I have googled and read just about every article I can find on this and have tried numerous things.

Surely I am missing something.Any ideas?We are both using VS2013, Framework 4.5.1.I am on VS2013 update 1 The other developer is on VS2013 update 3

Please note that we have also added the appropriate namespace to the Area's web.config file but that didn't work either.

General Discussions

answered on 01 Sep 2014

1 answer

147 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

100 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

134 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

277 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

595 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

927 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