Questions on Kendo UI for jQuery Forum

2 answers

483 views

Greetings,

I'm using a Kendo Grid with server paging and filtering, as we are handling big data, our data source only contains a limited number of records based on the page number and the number of records to be displayed.

with the grid, I'm using row filtering.

as the grid data-source doesn't contain all the possible values, the filter auto-complete doesn't show all the correct possible option, so I changed the columns.filterable.cell.dataSource to get those needed values through an ajax call that returns distinct values.

That worked fine but as I'm handling big data, the filter became slow and even freeze (I'm testing on a table that has about 25000 record and it's not the biggest one).

What I want to do is using the columns.filterable.cell.minLength to limit the number of records returned in the auto-complete but I wasn't successful as the filter data-source gets called when I load the grid and not when I start setting the filter value, I tried used a template function but without any success.

Is there a better approach to make the cell datasource read the value when the user start typing the filter, and with consideration to the value being input?

Thanks,

Grid

answered on 03 Mar 2016

2 answers

393 views

Scroll event or vertical resource into view programmatically

Hi,

we're using a custom TimelineWeekView with vertical resources - representing people. Adding events is done by dragging & dropping a visual onto a day-column. An event is then created for a pre-selected person on the column's day. Then we sync the data-source, reload the data-source and finally obtain the newly added event and select it programmatically.

Now, how to scroll that event into view? Apparently, just selecting the event programmatically does not scroll it into view. Since the event is located in the person-resource's row, we would actually like to scroll to that resource's row.

How can we scroll an event or a vertical resource into view programmatically in this scenario?

Regards

Kasimier Buchcik

Scheduler

answered on 02 Mar 2016

2 answers

588 views

[Solved] MVC NumericTexbox min/max validation message not showed

I defened in my model a range for my field:

[Range(1875,2043)]

public int? SpringA1 {get;set;}

I have a grid with a template editor with my field :

@Html.kendo().IntergerTexBoxFor(model => model.SpringA1)

My problem is when I enter a value out of range the control change the value to min or max range instead of showing a range error message.

ex : if You enter a value of 3000 with the keyboard and lose focus from the input or save the form, the value will be rounded to the max value of 2043.

--------------------------------

If I init de Deferred property to true

@Html.kendo().IntergerTexBoxFor(model => model.SpringA1).Deferred(true)

the message is correctly showed but the control is not rendered properly, no css and no span for increment the value.

what I can do for prevent the control to round the value and show the message.

Thx

NumericTextBox

answered on 02 Mar 2016

5 answers

764 views

Kendo Grid Column Resizing not working?

I could drag the column width from this site.

http://demos.kendoui.com/web/grid/column-resizing.html

And I tried to set the

    resizable: true,

in the Kendo Grid option. But still couldn't achieve the same result. Nothing happens.

Or do I need to use the latest Kendo version?

Do you know why?

Grid

answered on 02 Mar 2016

1 answer

67 views

Add a "other" button with some options

Hi there,

I'm currently searching for a way to create a button on my Editor toolbar, that would be just one icon (let's say an arrow that point to the bottom) that when I click it, it opens up a menu/list of options formatted with an icon and text.

How could we achieve that ? Is there a component that could help us do that or only a component to show/collapse that menu or any idea of a library that we could use ?

Note that we are using Kendo UI with AngularJS

Editor

answered on 02 Mar 2016

1 answer

224 views

Expand Event Completion

Is there an event that fires when the TreeList has completed expanding? onExpanded for example?

I have a lot of data in a tree list.(4000 rows) and it takes a while to expand (as you might expect).

I need to display a wait modal or something while expanding. Any suggestions?

TreeList

answered on 02 Mar 2016

8 answers

596 views

Add vertical lines at specific points in a stacked area chart

Supposing I have a stacked area chart that the horizontal axis represents time and the vertical axis represents value. I need to place vertical lines at specific points on the chart.

For example:

Chart shows processor usage of a group of computers in 3 sections (High, Normal, and Low) over time. At a certain time (say 11:45) I changed a policy that affect how processors are used and therefore should see a change in my data. I would like to mark that point with a vertical line with either a clickable or hover tooltip that says "changed policy X". Assuming all this data is available to me, how do I add the line? I have tried adding a 2px div with absolute positioning, but I cannot guarantee the height and width of the chart (acceptance criteria of client) and must always put the line in the correct spot. You can see my code below (eventually this will not be hard coded, but pull from a JSON rest client, what I am accomplishing and what I would like to accomplish are attached.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta charset="utf-8">

<title>My Kendo UI Application</title>

</head>

<body>

<h1>Hark! A Widget!</h1>

<div role="main">

<input id="datacenterSelect" />

<div id="chart" style="width: 400px; height: 200px; border: solid 1px black; margin: 5px; position: relative;">

</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>

<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>

<script>(window.kendo && window.kendo.dataviz) || document.write('<script src="js/kendo.dataviz.min.js"><\/script>')</script>

<script>

var seriesData = [

{ hour: new Date("2011/12/30 09:50"), highNodeCount: 60, mediumNodeCount: 50, lowNodeCount: 30 },

{ hour: new Date("2011/12/30 10:50"), highNodeCount: 60, mediumNodeCount: 50,lowNodeCount: 30 },

{ hour: new Date("2011/12/30 11:50"), highNodeCount: 60, mediumNodeCount: 50,lowNodeCount: 30, policyChange: 140 },

{ hour: new Date("2011/12/30 12:50"), highNodeCount: 60, mediumNodeCount: 50,lowNodeCount: 30 },

{ hour: new Date("2011/12/30 13:50"), highNodeCount: 10, mediumNodeCount: 120,lowNodeCount: 10, policyChange: 140 },

{ hour: new Date("2011/12/30 14:50"), highNodeCount: 60, mediumNodeCount: 50,lowNodeCount: 31 },

];

$("#chart").kendoChart({

title: {

text: "Datacenter Utilization History",

color: "#000000",

align: "left",

},

dataSource: {

data: seriesData

},

categoryAxis: {

field: "hour",

line: {

visible: false

},

majorGridLines: {

visible: false

}

},

series: [

{

name: "Low Utilization",

field: "lowNodeCount",

color: "#D9BD9C",

},

{

name: "Medium Utilization",

field: "mediumNodeCount",

color: "#038C8C",

},

{

name: "High Utilization",

field: "highNodeCount",

color: "#D91828",

}

],

seriesDefaults: {

type: "area",

stack: true,

opacity: 0.4

}

});

drawPolicyChange("#chart", 28, 100, "122px", "My Policy");

function drawPolicyChange(chart, yStart, xStart, height, policyName) {

//strip policy name of spaces

policyName = policyName.replace(/\s+/g, '');

lineHTML = '<div id=\"' + policyName + '\" title=\"' + policyName + '\"><div>';

lineSelector = "#" + policyName;

$(chart).append(lineHTML);

$(lineSelector).css("background-color", "#000");

$(lineSelector).css("width", "2px");

$(lineSelector).css("height", height);

$(lineSelector).css("position", "absolute");

$(lineSelector).css("bottom", yStart);

$(lineSelector).css("left", xStart);

}

$(document).ready(function() {

$("datacenterSelect").kendoComboBox({

dataTextField: "text",

dataValueField: "value",

dataSource: [

{text: "all", value: "0"},

{text: "Center One", value: "1"}

]

});

</script>

</body>

</html>

Charts

answered on 02 Mar 2016

1 answer

208 views

Grid sortable (dragging) doesn't function when kendo.ns = 'kendo-'

Hi all,

I tried out this demo to be able to drag rows inside of a grid: http://demos.telerik.com/kendo-ui/sortable/integration-grid

It works great unless the following line is added in javascript:

kendo.ns = "kendo-";

If "kendo.ns is" set than you can only change 1 row before the console prints this error: "Uncaught TypeError: Cannot read property 'uid' of undefined". And you can no longer drag any row after that one time.

Here is an example: http://dojo.telerik.com/oPanI

Our project doesn't allow for this line to be removed, is there still a way to keep this drag functionality somehow?

Grid

answered on 02 Mar 2016

1 answer

111 views

Angular TreeList - Selected item is not preserved after column filter

When filtering via the column filter menu, the selected row is not preserved after filter and clear filter.

See to reproduce in version 2015.1.318: http://dojo.telerik.com/iZOLi

I see this issue has been solved in version 2015.2.624, but I cannot upgrade right now to the new version.

Is there any workaround or patch I can use to solve this problem?

TreeList

answered on 02 Mar 2016

5 answers

280 views

AngularJS column filter localisation

Hi there, i could't get it to work that the filter option will be translated with AngularJS.

my html:

<kendo-grid id="grid" options="mainGridOptions" k-rebind='transtest' k-data-source="mydataSource" k-on-change="change(kendoEvent)"></kendo-grid>

in JS i tried this:

var baseUrl = serviceBase + 'scripts/Kendo/JS/messages/kendo.messages.';
$.getScript(baseUrl + langKey+ ".min.js", function () {
$translate.use(langKey);//change angular-translate language
kendo.culture(langKey); //change kendo culture
});

Please help

Grid

answered on 02 Mar 2016