Questions on Kendo UI for jQuery Forum

2 answers

580 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

754 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

65 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

219 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

590 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

204 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

107 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

1 answer

138 views

HREF within k-columns

I'm still really new to the new framework and Kendo, so I need some help.

I have a grid control on a page and I need help adding a link.

The desired URL: /#/app/account/accountdetail/15

Here is the code:

<div kendo-grid
k-allowCopy="true"
k-columns="[{ field: 'Name', title: 'Account Name', template: '<div class=text-left>#: Name #</div>' }, { field: 'SlxmCustomerNumber', title: 'ID', width: 125, template: '<div>#: SlxmCustomerNumber #</div>' }]"
k-data-source="vm.accountsDataSource"
k-filterable="true"
k-groupable="false"
k-navigatable="true"
k-pageable="{ 'pageSize': 10, 'refresh': false, 'pageSizes': true, 'buttonCount': 5 }"
k-rebind="gridOptions.selectable"
k-reorderable="true"
k-resizable="false"
k-selectable="'row'"
k-sortable="true">
</div>

Any help would be appreciated.

Grid

answered on 02 Mar 2016

1 answer

200 views

Stock Chart - Skip Weekends

Hi

I'm doing a basic stock chart with daily prices. Obviously the markets aren't open on weekends, but the chart still tries to account for these dates on the category axis. Is there a way to make the chart render without dates that aren't included in the series?

I'm aware of the "MissingValues" setting, but that doesn't really accomplish what I'm looking for.

Charts

answered on 02 Mar 2016