Questions on Kendo UI for jQuery Forum

4 answers

742 views

[Solved] Uncaught RangeError: Maximum call stack size exceeded if en-US culture is used

Hi. there is a bug in last release 2017.2.504, where was fixed weekNumber for DatePeacker.

If en-US culture/messages are included (maybe not only en-US, didn't check all of them)- error happens and modal doesn't appear https://www.screencast.com/t/whv1Kup3itFO

example: http://dojo.telerik.com/Ovequ

DatePicker

answered on 10 May 2017

1 answer

1.0K+ views

Send file loaded to spring in multipart

Hello i have a little problem with the kendo upload.

I want send one file to my spring controller but i can't with the kendo ui.

I have a simple form:

<form>

<ul>

<li>

<input data-role="maskedtextbox" data-bind="value: testoHome" id="testohome" name="testo home" />

<input id="upload" name="upload" type="file" />

</li>

<li>

<button id="next" class="k-button k-primary" onclick="Form.sendData()">Next</button>

</li>

</ul>

</form>

with a simple js:

var Form = {

vm: null,

sendData: function(){

data = new FormData();

data.append("file", $('#a-can-uploadrl')[0].files[0]);

data.append("testo", Form.vm.get("testoHome"));

$.ajax({

url: myURL,

data: data,

contentType: false,

processData: false,

enctype: 'multipart/form-data',

type: 'POST',

success:

function(data){

alert(data);

}

});

},

InitKendoBind: function(){

this.vm = kendo.observable({

testoHome: null

});

kendo.bind($("#formId")[0], vm);

},

Init: function() {

$("#formId").submit(function(event) {

event.preventDefault();

});

$("upload").kendoUpload();

this.InitKendoBind();

},

}

$(document).ready(function() {

Form.Init();

});

but if i use the kendo upload with

$("upload").kendoUpload()

the

$('#a-can-uploadrl')[0].files[0]

is undefined.

If i not use the kendo upload i take the file with this code

$('#a-can-uploadrl')[0].files[0]

and i can pass the file to my controller.

How i can take the file for pass all the data (file with name, size, etc. + others input strings from my form) using the kendo upload?

(without the async uploading)

this is my java controller:

@RequestMapping(value="myURL", method=RequestMethod.POST)

public static Long myURL(HttpServletRequest request,

@RequestParam("file") MultipartFile file

@RequestParam("testo") String cantiereString

) throws FileUploadException, IOException {

/* some code */

return 1;

}

Upload

answered on 10 May 2017

1 answer

236 views

Batch data entry

I've been tasked with having a browser-based ability to quickly enter large amounts of data into a table. One requirement is that the user should be able to do everything using only the keyboard after the first column/row has focus. The typical use case for a 3 column table would be:

Enter value, TAB, enter value, TAB, enter value, TAB (new row is created)

...

I have been working on this for a few days with my initial expectation being that it wouldn't be a challenge. I'm finding that it's more difficult than expected and would like to take a step back to ensure I'm not missing any obvious alternative solutions.

My current belief is that this kind of quick batch editing mode (keyboard only) isn't directly supported in the Kendo Grid widget and is expected to require some JQuery customization/event handling. Does that sound correct?

You may notice I've posted 3 other threads recently. They are all related to this basic problem. If you have any high-level pointers that may not have been obvious because the threads were so specific, I would be all ears :).

Thanks,

Richard

Grid

answered on 10 May 2017

5 answers

262 views

Frozen Column : Row alignment issues - Part II

Hi Guys,

Following on from my original posting relating to scrolling issues

   http://www.telerik.com/forums/frozen-column-row-alignment-issue

I have now tripped over another scenario whereby the frozen column scrolls independently of the other rows.

To illustrate the problem I have created the following

   http://dojo.telerik.com/eyeku

If you run this dojo and select the first checkbox then using the keyboard tab through the other checkboxes.

As you traverse down the checkboxes the rows in the frozen column will start to scroll but the other rows remain static causing major synchronization issues between the two tables.

Regards
Alan

Grid

answered on 10 May 2017

1 answer

215 views

Version does not have the css file un-minified

Hi, I downloaded 2017.1.223 versions of kendo ui and more recent versions too, but I do not find the css files non-minified and I am only finding the minified versions.
I need css files non-minified to customize and maybe fix issues own my app.
Where can I to find these files?

Thanks.

General Discussions

answered on 10 May 2017

1 answer

171 views

[Solved] Bug: Built-in notification type templates

Hi!

It seems like the space between the notification icon and the notification message differs between different notification types:

I have prepared an example. Just press a few times on the "As a popup on bottom-right" button to see the different spacings: http://dojo.telerik.com/Awuli/2

Only the template for the warning notification seems to have the right spacing.

Best regads,

Kaan

Notification

answered on 10 May 2017

1 answer

306 views

Adding a new row at the bottom

Exist any configuration to specify the position of new row , something like the supported on Grid's '"createAt": "bottom"'.

Thanks

TreeList

answered on 10 May 2017

1 answer

181 views

Normal area series and reversed area series in one chart is not working

Currently I try to add three area series within one chart. Two area series should be rendered from top to bottom, and one from bottom to top. In my example "grenze3" should be rendered from bottom to top.

This is my html code:

@{

ViewBag.Title = "Home Page";

}

<div id="example">

<div class="demo-section k-content wide">

<div id="chart"></div>

</div>

<script>

function createChart() {

$("#chart").kendoStockChart({

dataSource: {

transport: {

read: {

url: "../Content/spain-electricity.json",

dataType: "json"

}

},

schema: {

model: {

fields: {

year: { type: "date" }

}

},

title: {

text: ""

},

dateField: "year",

legend: {

visible: true,

position: "top"

},

seriesDefaults: {

type: "line",

markers: {

visible: false

}

},

series: [{

field: "nuclear",

name: "test 1",

axis: "bottom"

},

{

field: "hydro",

name: "test 2",

axis: "bottom"

},

{

field: "wind",

name: "test 3",

axis: "bottom"

},

{

field: "grenze2",

name: "Grenze 2",

type: "area",

missingValues: "interpolate",

axis: "top",

line: {

style: "step"

}

},

{

field: "grenze",

name: "Grenze",

type: "area",

missingValues: "interpolate",

axis: "top",

line: {

style: "step"

}

},

{

field: "grenze3",

name: "Grenze 3",

type: "area",

missingValues: "interpolate",

axis: "bottom",

line: {

style: "step"

}

},

],

valueAxes: [

{

name: "top",

labels: {

visible: true,

format: "{0}"

},

reverse: true,

visible: true,

axisCrossingValues: 70000,

min: 70000,

max: 0

},

{

name: "bottom",

labels: {

visible: true,

format: "{0}"

},

visible: true,

reverse: false,

min: 0,

max: 70000

},

],

categoryAxis: {

field: "year",

type: "date",

labels: {

rotation: 0

},

crosshair: {

visible: true

},

majorGridLines: {

visible: false

},

valueAxis: {

labels: {

format: "N0"

},

majorUnit: 10000,

//plotBands: [{

// from: 0,

// to: 10000,

// color: "#c00",

// opacity: 0.3

//}, {

// from: 70000,

// to: 60000,

// color: "#c00",

// opacity: 0.3

//}, {

// from: 70000,

// to: 55000,

// color: "#0066ff",

// opacity: 0.3

//}],

},

tooltip: {

visible: true,

shared: true,

format: "N0"

},

navigator: {

series: [{

field: "nuclear",

name: "Hauptpresse"

},

{

field: "hydro",

name: "Dehner 1"

},

{

field: "wind",

name: "Dehner 2"

},

{

field: "grenze",

name: "Grenzwert"

}],

select: {

from: "2016/12/01",

to: "2017/10/07"

},

categoryAxis: {

labels: {

rotation: "auto"

}

});

}

$(document).ready(createChart);

$(document).bind("kendo:skinChange", createChart);

</script>

</div>

This is my json data file:

[

{

"grenze": 60000,

"grenze2": 55000,

"grenze3": 30000,

"country": "Spain",

"year": "2016/12/01",

"unit": "GWh",

"solar": 2578,

"hydro": 26112,

"wind": 32203,

"nuclear": 58973

},

{

"grenze": 60000,

"grenze2": 55000,

"grenze3": 30000,

"country": "Spain",

"year": "2017/01/01",

"unit": "GWh",

"solar": 508,

"hydro": 30522,

"wind": 27568,

"nuclear": 55103

},

{

"grenze": 60000,

"grenze2": 55000,

"grenze3": 30000,

"country": "Spain",

"year": "2017/02/01",

"unit": "GWh",

"solar": 119,

"hydro": 29831,

"wind": 23297,

"nuclear": 60126

},

{

"grenze": 60000,

"grenze2": 65000,

"grenze3": 30000,

"country": "Spain",

"year": "2017/03/01",

"unit": "GWh",

"solar": 41,

"hydro": 23025,

"wind": 21176,

"nuclear": 57539

},

{

"grenze": 60000,

"grenze2": 65000,

"grenze3": 30000,

"country": "Spain",

"year": "2017/04/01",

"unit": "GWh",

"solar": 56,

"hydro": 34439,

"wind": 15700,

"nuclear": 63606

},

{

"grenze": 60000,

"grenze2": 65000,

"grenze3": 30000,

"country": "Spain",

"year": "2017/05/01",

"unit": "GWh",

"solar": 41,

"hydro": 43897,

"wind": 12075,

"nuclear": 61875

},

{

"grenze": 60000,

"grenze2": 55000,

"grenze3": 30000,

"country": "Spain",

"year": "2017/06/01",

"unit": "GWh",

"solar": 30,

"hydro": 26270,

"wind": 9342,

"nuclear": 63016

},

{

"grenze": 60000,

"grenze2": 55000,

"grenze3": 30000,

"country": "Spain",

"year": "2017/07/01",

"unit": "GWh",

"solar": 24,

"hydro": 43864,

"wind": 6759,

"nuclear": 63708

},

{

"grenze": 60000,

"grenze2": 55000,

"grenze3": 30000,

"country": "Spain",

"year": "2017/08/01",

"unit": "GWh",

"solar": 18,

"hydro": 31807,

"wind": 4727,

"nuclear": 62206

}

]

In theory plot bands would also work, but from my understanding they do not support different values as you see it in the grenze2 series.

Charts

answered on 10 May 2017

8 answers

811 views

[Solved] How to search events?

I want add a textbox to search the events.

The search results will display like agenda and I want the results also can be edit.

How to do that?

Scheduler

answered on 10 May 2017

4 answers

366 views

Printed pdf is not the same as the exported pdf

Hi

I have a kendo chart, that im trying to export to pdf. This seems to work, however, when i try to print it out, it will make the lines into rectangles.

I'm guessing this somehow means that the pdf generated by this export method, creates some kind of invalid syntax, that is rendered wrong, when printed?

I'm

$scope.bmiGraph.exportPDF({ paperSize: "auto", landscape: true, margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" } }).done(function (data) {

kendo.saveAs({

dataURI: data,

fileName: "chart.pdf"

});

I have attached the two pdf files. "chart.pdf"("chart.zip") is the pdf generated by the "exportPDF" method. "chart_printed_as_pdf.pdf"("chart_printed_as_pdf.zip") is the result of what is printed from the pdf, which is 100% identical to what it will look like when printed out on normal paper.

How do i make the printed output identical to what the generated pdf?

There is also an error with the character encoding. Is there an easy fix to this aswell?

Best regards

Charts

answered on 10 May 2017