Questions on Kendo UI for jQuery Forum

1 answer

101 views

Chart mouseevents invalid positions after parent container scaling

Hello, I have a problem with chart rendering after scale parent container of chart.

Example is presented in dojo: https://dojo.telerik.com/aqEdofAZ

I am transforming chart parent container with code below, chart is looking great but there is something wrong with mouse events. It looks like mouse events are pinned to non transformed chart. For example mouse hover on 2006 (green line) selects 2004 (green line). I tried to refresh and redraw chart but nothing changed. Can you help me with this case?

$(".demo-section").css({
'transform': 'scale(0.5)',
'-ms-transform': 'scale(0.5)',
'-moz-transform': 'scale(0.5)',
'-webkit-transform': 'scale(0.5)',
'transform-origin': '0 0',
'-ms-transform-origin': '0 0',
'-moz-transform-origin': '0 0',
'-webkit-transform-origin': '0 0'
});

Charts

answered on 18 Mar 2020

1 answer

363 views

Disabling Cut, Copy, Paste

How can I disable the cut, copy, paste in the dialog component? I've tried adding an .on event to the canvas and the parent div of the dialog but it isn't working

Diagram

answered on 17 Mar 2020

1 answer

104 views

Event Style

I need to add an event on the scheduler with a start and end time but highlight regions without that time differently. For example, if the event is from 12:00 PM to 8:00 PM with a break from 4:00 pm to 4:30 pm, I would like to show that break time differently in the resource style so the event bar spans the 12-8pm time but the 4-4:30 region is a different color or cross hashed, etc. Is this possible.

Scheduler

answered on 17 Mar 2020

2 answers

1.4K+ views

AutoComplete load more items in scroll end

Do we have any feature for below requirement please confirm..

Initially will load like 10 items (we have around 100+ items )
and then as we scroll through the 10 items and come to the end, will automatically load 10 more items

AutoComplete

answered on 17 Mar 2020

2 answers

140 views

MVVM chart's dataSource doesn't update like I thought it might

I tried what I thought was a pretty basic use of the observables: binding a numeric text box to a value, and then using that value in the datasource. However, it does not work. I'm wondering if what I'm trying to do is possible and I'm just doing it wrong, or if what I'm trying to do isn't possible. Here's a dojo, and the code is below as well.

<div id="example">

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

<div class="box">

<input id="Value1NumericTextBox" data-role="numerictextbox"

data-format="c0"

data-decimals="0"

data-bind="value: Value1, events: { change: ValueChange }"

data-min="0" />

<input id="Value2NumericTextBox" data-role="numerictextbox"

data-format="c0"

data-decimals="0"

data-bind="value: Value2, events: { change: ValueChange }"

data-min="0" />

</div>

<div>

<div id="chart1" data-role="chart"

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

data-series="[ {field: 'amount'} ]"

data-bind="source: values"

style="height: 200px;" ></div>

</div>

<script>

(function() {

var viewModel = kendo.observable({

Value1: 10,

Value2: 20,

ValueChange: function(e) {

var chart = $("#chart1").kendoChart();

chart.refresh();

},

values: new kendo.data.DataSource({

data: [

{ amount: function() { return this.get("Value1"); } },

{ amount: function() { return this.get("Value2"); } }

]

})

});

kendo.bind($("#example"), viewModel);

})();

</script>

</div>

Charts

answered on 17 Mar 2020

1 answer

111 views

Toolbar Button Style changed on Browser Zoom Change

I have a button in a tool bar that via jquery is hidden on click (It is an edit button that displays a cancel/save button.)

If I click the Edit button it applies a style of display: none;

If I then zoom on the browser the style disappears and the button becomes visible again.

Any insight on this issue?

Toolbar

answered on 17 Mar 2020

1 answer

157 views

NumericTextBox performance

Hello,

we have problem with NumericTextBox performance, we are trying to render 200 components (production report stuff).

Time which I get on Chrome 80 is ~2832ms, what interesting in FireFox 73 only 472ms, rendering 200 raw input (type=number) components is about 11ms.

How to optimize it, and why Chrome is 5x slower than FireFox in this case

https://dojo.telerik.com/iXUJaLAW/3

NumericTextBox

answered on 17 Mar 2020

2 answers

163 views

Node fields not updating on drop

What I am trying to accomplish: After dragging an element I am sending node info (for all elements) to the server so the records can be created for user preferences.

It works fine but... changes to elements do not take affect until the second drop. So, If i drag a root node (say folder1) into another root node (say folder2), under my logic below the parent of folder1 still does not exist. However.. if I drop folder1 onto folder2 a second time the parent then exists. So, ultimately how would I ensure that my logic runs for the changes after the drop?

Thanks in advance.

Snippet of my JavaScript:

$("#div_tree").kendoTreeView({

dataSource: data.ProDataSet["treemenu"],

dragAndDrop: true,

drop: function(e){

updatePinPreferences();

}

});

function checkedNodeIds(nodes,docarray) {

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

try{

var parent = treeView.parent(treeView.findByText(nodes[i].text));

console.log(nodes[i].text + " | " + nodes[i].index + " | " + nodes[i].itemtype + " | " + icount + " | " + treeView.text(parent) );

}

catch(e){

console.log("CANNOT FIND PARENT " + nodes[i].text ,e);

parentName = "";

}

if (nodes[i].hasChildren) {

checkedNodeIds(nodes[i].children.view(),docarray);

}

function updatePinPreferences() {

var treeView = $("#div_tree").data("kendoTreeView"),

message;

checkedNodeIds(treeView.dataSource.view(), jdoc);

}

TreeView

answered on 16 Mar 2020

2 answers

489 views

In observable function, this.get is not a function

I am new to using kendo observables. I have what seems to be a relatively simple viewmodel:

var viewVmodel = kendo.observable({

CategoryValue: 10000

, CategoryValueDisplay: function() { return kendo.toString(this.get("CategoryValue"), "c0"); }

, CategoryNumber: function() { return this.get("CategoryValue") * 2; }

, CategoryNumberDisplay: function() { return kendo.toString(this.get("CategoryNumber"), "c0"); }

, CategoryEnabled: true

, CategoryChange: function(e) { console.log("CategoryChange"); }

});

However, when I try to bind to CategoryNumberDisplay as

<div class="bound" data-bind="text: CategoryNumberDisplay"></div>

I get an error: this.get is not a function. Running in Chrome, the console log shows the error. In CategoryNumberDisplay, if I replace this.get("CategoryNumber") with simply 20000, it works fine.

Here is a dojo. Can someone tell me what I'm doing wrong, as well as explain the difference between CategoryValueDisplay and CategoryNumberDisplay? (which will probably end up being the same answer.)

MVVM

answered on 13 Mar 2020

2 answers

178 views

Keep drawer from showing while trying to select text

For a sample: user your demo here: https://demos.telerik.com/kendo-ui/drawer/index

To reproduce: Attempt to select the text : "Hi Tom, Since Monday I'll be out of office, I'm rescheduling the meeting for Tuesday" by clicking of the left of the H in Hi and dragging right. You'll notice the drawer opens and becomes semi-cumbersome to select the text.

My issue: My users need to be able at times to select the text that is in the display window of the drawer to select for clipboard use. Each time I click on some text and drag right the drawer opens.

Is there a way to prevent the drawer from activating while I'm trying to select text? Can i put an attribute in the div wrapper that prevents it from listening for an open? My users aren't going to be using this on a tablet or phone so I don't need a 'touch' type show event to occur. I only want the drawer to open/close when the three lines are clicked.

Drawer

answered on 13 Mar 2020