Questions on Kendo UI for jQuery Forum

1 answer

223 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

244 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

198 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

163 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

289 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

153 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

785 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

341 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

4 answers

438 views

Set initial window position with AngularJS

I have a problem setting the initial window position. Here's my markup.

<span>
    <img id="helpIcon" src="../../../Content/images/q-mark-green-sm.png" class="{{ iconclass }}" ng-click="helpWindow.open()" alt="Help"/>
    <span id="helpWindow" class="{{dialogclass}}" kendo-window="helpWindow" k-position-left="400" k-position-top="20"
          k-title="'{{ helptitle }}'" k-on-open="helpWindowvisible = true" k-on-close="helpWindowvisible = false" style="display: none">
        {{ helptext }}
    </span>
</span>

Any help would be appreciated.

Thanks,
Chai

Window