Questions on Kendo UI for jQuery Forum

1 answer

318 views

I am using this control to upload files to SharePoint 2013 and have customized it to update the meta data in SharePoint prior to finishing the upload. Unfortunately, the only way i could do this was to use the SharePoint JSOM in the Upload event of the control. The result is a successful upload however it appears to have failed to the control. How can i return a success to the control even in the event of an error?

$("#files").kendoUpload({
                    async: {
                        saveUrl: function (o) {

                        },
                        autoUpload: false
                    },
                    upload: function (e) {
                        uploadFile(e);
                        return "";
                    }
                });

uploadFile is where all the work is done. What can i return to the kendoUpload control so that it appears as if the upload was successful?
Thanks

Upload

answered on 27 Jan 2015

2 answers

325 views

[Solved] Custom new item window not closing when adding event to scheduler

Hiya

I have a system using angular and ASP.Net web api 2 that uses a scheduler. It can read and display data from my api without a problem. When adding an event though, it goes wrong. I defined a custom add screen using templates (which shows fine). If I fill in all my fields, the save event fires (for which I wrote a custom function which stores my new event. I can store the new event just fine, but the event window does not close and I get an Uncaught TypeError: Cannot read property 'data' of undefined on kendo.all.min.js:11 . If I refresh the new event is shown as it should.

My scheduler:

1.<div kendo-scheduler k-options="schedulerOptions">

2. <span k-event-template class='custom-event'>{{dataItem.title}}</span>

3. <div k-all-day-event-template class='custom-all-day-event'>{{dataItem.title}}</div>

4.</div>

My template:

01.<script id="editor" type="text/x-kendo-template">

02. <div class="form-horizontal form-widgets col-lg-6" style="color:\#180D86">

03. <fieldset>

04. <legend style="color:\#180D86">Nieuw stagemoment</legend>

05. <div class="form-group">

06. <label class="control-label col-sm-3">Onderwerp: </label

07. <div class="col-sm-6">

08. <input type="text" class="k-input k-textbox" id="title" name="title" ng-model="subject" placeholder="Onderwerp" />

09. </div>

10. </div>

11. <div class="form-group">

12. <label class="control-label col-sm-3">Startuur: </label>

13. <div class="col-sm-6">

14. <input kendo-time-picker ng-model="startHour" name="start" k-ng-model="start" class="form-control" />

15. </div>

16. </div>

17. <div class="form-group">

18. <label class="control-label col-sm-3">Einduur: </label>

19. <div class="col-sm-6">

20. <input kendo-time-picker ng-model="endHour" name="end" k-ng-model="end" class="form-control" />

21. </div>

22. </div>

23. <div class="form-group">

24. <label class="control-label col-sm-3">Lokaal: </label>

25. <div class="col-sm-6">

26. <input kendo-auto-complete ng-model="classRoom" k-data-source="countryNames" name="description" />

27. </div>

28. </div>

29. </fieldset>

30. </div>

31.</script>

As far as I know this works, everything is shown as should and the data from my template can be seen in the save event:

01.function scheduler_save(e) {

02. var moment = {};

03. moment.Title = e.event.title;

04. moment.Start = e.event.start;

05. moment.End = e.event.end;

06. moment.Classroom = e.event.description;

07.

08. moment.Sid = $routeParams.sid; //This works, is just an id parameter

09.

10. Stage.addStageMoment(moment)

11. .success(function (newEvent) {

12. console.log("toegevoegd", newEvent); //This gets called and works, returns the inserted item from the server

13. })

14. }

Here are my options and custom remove function (that works):

01.scope.scheduler_remove = function (e) {

02. console.log(e);

03. Stage.removeStageMoment(e.event.taskId)

04. .success(function (data) {

05. console.log("Moment verwijderd", data)

06. })

07. }

08.

09.$scope.schedulerOptions = {

10. startTime: startDate, //gets initialised earlier in my angular controller and is correct

11. height: 600,

12. allDaySlot: false,

13. currentTimeMarker: false,

14. footer: false,

15. views: [

16. 'month',

17. 'agenda',

18. { type: 'week', selected: true }

19. ],

20. editable: {

21. template: $("#editor").html()

22. },

23. save: scheduler_save,

24. remove: $scope.scheduler_remove,

25. dataSource: {

26. batch: true,

27. transport: {

28. read: {

29. url: "/api/stagemoments/GetStageMoments",

30. dataType: "json"

31. },

32. destroy: {

33. url: "/api/stagemoments/DeleteStageMoment",

34. dataType: "json"

35. },

36. parameterMap: function (options, operation) {

37. console.log("ParameterMap checking models", options, operation)

38. if (operation !== "read" && options.models) {

39. console.log("Inside parameterMap", options.models);

40. return { models: kendo.stringify(options.models) };

41. }

42. }

43. },

44. schema: {

45. model: {

46. id: "Id",

47. fields: {

48. taskId: { from: "Id", type: "number" },

49. title: { from: "Title", validation: { required: true } },

50. start: { type: "date", from: "Start" },

51. end: { type: "date", from: "End" },

52. description: { from: "Classroom" }

53. }

54. }

55. }

56. }

57. }

Any ideas?
I assume it may have something to do with the lack of create function in the transport part of my datasource options, but I have no idea what I should put there.

Thanks!

Scheduler

answered on 26 Jan 2015

1 answer

137 views

A nood question! How start an app kendo with ASP.NET Application

Hi,

Help, I'm a nood in Kendo UI.

I want create a new app kendo UI with VS 2012 ASP.NET. I changed the sample tamplate and added some custom menu itens.

But, I don't know how create a new soluction and work with the Kendo UI componentes.

See my template at http://app.menphis.net.br/ftp/ak (click the button to see the menu).

I dont know how create the references and I don't know the name of the "MENU" object to use.

I'm using the last version!

Jefferson

Application

answered on 26 Jan 2015

1 answer

567 views

[Solved] Change color the Metro Theme

Hello,

How I can do this modularly without to change one by one the styles sheet ?

Thanks.

General Discussions

answered on 26 Jan 2015

1 answer

118 views

Technology for publish JSON Data

Hello,

What technology should use for to publish data in JSON to KendoWidgets : ASP.Net Rest Services, ASMX or WCF?

please,If you get me a example.

Thanks.

General Discussions

answered on 26 Jan 2015

1 answer

457 views

Prevent keyboard from moving window.

Hi

Steps to reproduce:

Navigate to this Url.
click on footer of index page.
use cursor keys to move the window around.

The window moving around is undesired.

I have tried pin() kendo function without success.

Please let me know if you need more information.

Kind Regards

David

Window

answered on 26 Jan 2015

1 answer

814 views

Failed to load resource: the server responded with a status of 404 (Not Found)

Showing following error on console while loading backend services

http://app.icenium.com/appbuilder/Mist/MobileSimulator/aEBqZJdbL1dsInCP-X3E…yrZI3P6LaKUctxWNyTFaOLs_0oW_LC/iOS_Phone/content/shared/js/everlive.all.js Failed to load resource: the server responded with a status of 404 (Not Found)

General Discussions

answered on 26 Jan 2015

4 answers

248 views

[Solved] Combination of to Charts, draw-area set size

Hello there,

my product manager was thrilled by the StockBarChart you have
http://demos.telerik.com/kendo-ui/financial/index

<kendo:chart name="chart2">

<kendo:chart-chartArea height="550" width="875" />

<kendo:chart-title text="Verbrauchsverlauf in €/Jahr" />

<kendo:chart-legend position="top" />

<kendo:chart-series>

<kendo:chart-seriesItem type="line" field="entgelt" name="Entgelt" />

<kendo:chart-seriesItem type="line" field="tarif" name="Tarif" />

</kendo:chart-series>

<kendo:chart-categoryAxis>

<kendo:chart-categoryAxisItem field="verbrauch" >

<kendo:chart-categoryAxisItem-labels rotation="-90" format="{0:N0}"/>

<kendo:chart-categoryAxisItem-crosshair visible="false" />

</kendo:chart-categoryAxisItem>

</kendo:chart-categoryAxis>

<kendo:chart-valueAxis>

<kendo:chart-valueAxisItem>

<kendo:chart-valueAxisItem-labels format="{0:N0}" />

</kendo:chart-valueAxisItem>

</kendo:chart-valueAxis>

<kendo:chart-tooltip visible="true"

template="<table class='hover' border='0'> <tr><td>Verbrauch </td><td class='tar'>#=kendo.toString(data.dataItem.verbrauch,'n2')# kWh</td></tr><tr><td>Tarif</td><td class='tar'>#=data.dataItem.tarif# €</td></tr><tr><td>Entgelt </td><td class='tar'> #=data.dataItem.entgelt# €</td></tr> <tr><td>Differenz</td><td class='tar'>#=data.dataItem.diff# €</td></tr></table>"

format="N2" />

</kendo:chart>

<p style="padding-top:20px;padding-left:324px;">Verbrauch von <span id="vvon">0</span> bis <span id="vbis">0</span> kWh</p>

<kendo:chart name="suchchart" selectEnd="onSelectEnd" select="onSelect">

<kendo:chart-chartArea height="142" width="875" />

<kendo:chart-title text="Filter" visible="false"/>

<kendo:chart-legend visible="false"></kendo:chart-legend>

<kendo:chart-series>

<kendo:chart-seriesItem type="column" style="smooth" field="diff" color="red"/>

</kendo:chart-series>

<kendo:chart-categoryAxis>

<kendo:chart-categoryAxisItem field="verbrauch">

<kendo:chart-categoryAxisItem-labels visible="false" />

</kendo:chart-categoryAxisItem>

</kendo:chart-categoryAxis>

<kendo:chart-valueAxis>

<kendo:chart-valueAxisItem >

<kendo:chart-valueAxisItem-labels format="{0:N0}" />

</kendo:chart-valueAxisItem>

</kendo:chart-valueAxis>

<kendo:chart-tooltip visible="true"

template="<table class='hover' border='0'><tr><td>Entgeltwert </td><td class='tar'> #=data.dataItem.entgelt# €</td></tr> <tr><td>Tarifwert</td><td class='tar'>#=data.dataItem.tarif# €</td></tr> <tr><td>Differenz</td><td class='tar'>#=data.dataItem.diff# €</td></tr></table>"

format="N2" />

</kendo:chart>

function onSelectEnd(e) {

/// e.sender.refresh();

var categories = e.axis.categories;

$("#verlaufsform2 input[name=verbrauchvon]").val(categories[e.from]);

$("#verlaufsform2 input[name=verbrauchbis]").val(categories[e.to]);

$("form#verlaufsform2").submit();

}

function onSelect(e) {

/// e.sender.refresh();

var categories = e.axis.categories;

$("#vvon").html(categories[e.from]);

$("#vbis").html(categories[e.to]);

//$("form#verlaufsform2").submit();

}

$("form#verlaufsform").ajaxForm({

success : function(responseText, statusText, xhr, $form) {

//eval("t=" + responseText);

//meinTarif = t.response[0];

$.get("fncalc.jsp?action=verlauf", function(e) {

var b = "";

//

eval("b=" + e);

var werte = new Array();

var minVal = 99999999999999;

var maxVal = 0;

for (var i = 0; i < b.length; i++) {

werte.push((b[i].response[0]));

var v = parseInt(b[i].response[0].verbrauch);

if (v < minVal) {

minVal = v;

}

if (v > maxVal) {

maxVal = v;

}

var dataSource = new kendo.data.DataSource({

data : werte

});

// $("#chart2").data("kendoChart").setDataSource(dataSource);

// $("#chart2").data("kendoChart").refresh();

$("#suchchart").data("kendoChart").setDataSource(dataSource);

$("#suchchart").data("kendoChart").options.categoryAxis.select = {

from : 0,

to : werte.length

};

//$("#suchchart").data("kendoChart").options.valueAxis.type = "log";

//$("#suchchart").data("kendoChart").options.series[0].style = "smooth";

$("#suchchart").data("kendoChart").refresh();

$("form#verlaufsform2 input[name=verbrauchvon]").val(minVal);

$("form#verlaufsform2 input[name=verbrauchbis]").val(maxVal);

$("#vvon").html(minVal);

$("#vbis").html(maxVal);

$("form#verlaufsform2").submit();

// console.log(werte);

});

// $("form#rankingForm").submit();

}

});

its about "electricity tariffs" in germany
it works like that:
on init, i read all data from min consumption to maxconsumption of the tariff and show the difference to an other traiff in the lower chart
in the upper chart i show the trends of the two tariffs

when i select an section of the cunsumption in the lower chart, the upper chart refeshes with the data of the section

The Problem

i can only set the outer size of a chart, when i want to make certain, that both the left axes are the same line, no matter what the axis labels are,
i need a possibility to set the inner size of the data area and an outer size for the lables

is there a possibility?

with regards
Mathias Eberlein
(sry for my bad english)

Charts

answered on 26 Jan 2015

3 answers

382 views

Disable prefetch

Is it possible to disable the prefetch in a grid with virtual scrolling enable?

The virtualScrollable object seems to have an options for this but I couldn't manage to change it:

grid.virtualScrollable.options.prefetch = false;

Grid

answered on 26 Jan 2015

1 answer

173 views

Grid data set by JQuery lost during inline edit

I have a pretty simple grid, which includes 6 select boxes. I've attached a JQuery listener to the first select box so that when a value is selected, I make an ajax call to return the values for the remaining 5 select boxes. I use JQuery to set their values, visually everything looks peachy, but as soon I click Update on the row, all of my JQuery set values disappear and the record updates without them.

If I manually select all the select boxes, they update fine. I've inspected the HTML for both situations, dynamically and manually set data, and I don't see any difference.

What am I missing?

Thanks!

Grid

answered on 24 Jan 2015