Questions on Kendo UI for jQuery Forum

1 answer

467 views

I am trying to figure out how to set dynamic bordering for select and datepicker widgets and cannot find a way to do this for kendo.

Attached is a screen shot of the non-formatting drop down that has the wrong border color and position for the validation message. The Inputs show the proper color and message location for valid and invalid components.

The CSS we are using for the inputs and trying to use for the other widgets is:

input.ng-invalid {

border: 2px solid red;

}

input.ng-valid {

border: 1px solid green;

}

.selectDropDown.ng-invalid {

border: 1px solid red;

}

.selectDropDown.ng-valid {

border: 1px solid green;

}

We have tried using div wrappers around the select HTML, adding classes, and anything else we could find.

The two component definitions we are using are, where the select won't format and the input works great:

<li>

<label>Role Type:</label>

<select

kendo-drop-down-list

k-value-primitive="'false'"

required

data-required-msg="The Role Type is required."

class="selectDropDown"

style="width: 150px;"

k-ng-model="dataItem.roleType"

>

<option value=" "> </option>

<option value="APP">Applicant</option>

<option value="CON">Contractor</option>

<option value="ENG">Engineer</option>

<option value="OWN">Owner</option>

</select>{{dataItem.roleType}}

</li>

<li>

<label>Name:</label>

<input

type="text"

id="pplName"

name="pplName"

placeholder="Name"

ng-model="dataItem.cspCo"

class="k-textbox"

required

style="width: 350px;"

maxlength=100

data-required-msg="The Name is required."

/>

</li>

Any assistance would be greatly appreciated.

DropDownList

answered on 14 Jul 2015

4 answers

208 views

Grouping data

Hi there,

I took the code from Kendo Dojo library and modified it to the following and I was wondering if it can be grouped by country. I have a similar sample and it doesn't work. TIA

Steve

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kendo UI Snippet</title>

<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.mobile.all.min.css">

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.2.624/js/kendo.all.min.js"></script>
</head>
<body>

<input id="customers" style="width: 400px" />
<script>
$(document).ready(function() {
var x = [];
x.push({ContactName: "A", CustomerID:"1", Country: "W"},
{ContactName: "B", CustomerID:"18", Country: "V"},
{ContactName: "C", CustomerID:"12", Country: "W"},
{ContactName: "D", CustomerID:"13", Country: "W"},
{ContactName: "AA", CustomerID:"15", Country: "T"},
{ContactName: "AB", CustomerID:"21", Country: "T"},
{ContactName: "AC", CustomerID:"41", Country: "V"},
{ContactName: "AE", CustomerID:"31", Country: "V"},
{ContactName: "AF", CustomerID:"21", Country: "T"},
{ContactName: "AX", CustomerID:"11", Country: "T"},
{ContactName: "AQ", CustomerID:"19", Country: "T"},
{ContactName: "AM", CustomerID:"15", Country: "W"})
$("#customers").kendoDropDownList({
dataTextField: "ContactName",
dataValueField: "CustomerID",
height: 400,
dataSource: x,
group: "Country"

});
});
</script>
</body>
</html>

DropDownList

answered on 13 Jul 2015

1 answer

242 views

Week and Month View Issues

My Gantt has view options for Week, Month, and Year. The Year view functions properly, but the others do not. In the Week view, where dates columns are supposed to begin on 01/01/2015, they begin on 12/29 of the previous year because I am showing work days only and the 29th is the Monday of the week containing 01/01/2015. The same issue occurs at the end of the timeline view, where the first of January for the next year is shown because it is the Friday of the work week containing 12/31/2015 (where I want my gantt to end). I would like to know how to start the chart on the Thursday, 01/01/2015, and end it on Thursday, 12/31/2015, without disabling showWorkWeek.

Similarly, the month view does not start and end the way that I'd like, so I'd like to know how to rectify the issue here as well.

Gantt

answered on 13 Jul 2015

2 answers

167 views

Grid checked columns

Hi, I have a grid with a template column that's a checkbox, I want it so that when I click save i will have a javascript function to iterate through each grid row and find the rows that have checked columns.

Regards

Grid

answered on 13 Jul 2015

1 answer

102 views

Sort marker is not visible when title too long

Is it possible to move sorting markers to the left side of header cell ?

Grid

answered on 13 Jul 2015

2 answers

304 views

[Solved] hasChildren mapping to custom field

I'm unable to map hasChildren model property to a custom field (in my case, I'm calling Web API method that returns array of custom objects, each having HasChildren set to true/false). I have tried:

hasChildren: "HasChildren"

but it does not work in 2015.2.624 version of Kendo UI. However, this does work for HierarchicalDataSource (TreeView).

This DOES work (I consider this a work-around for now):

1) Setting the name of the property in my C# code to hasChildren (lowercase H)

Is this a known issue?

TreeList

answered on 13 Jul 2015

4 answers

213 views

[Solved] Cannot properly set k-row-template in HTML (angular directive)

Hi,

as I can see from this link: https://github.com/telerik/kendo-ui-core/blob/master/docs/AngularJS/introduction.md you could set k-row-template in three different ways:

1. Inline

2. Script

3. Directive

I found some strange behavior in the directive scenario. If I I do something like that:

<tr data-uid="#: uid #"><td colspan="3"> ... my custom html template ... </td></tr>

</div>

It does not compile the table row with the uid and I got errors with IE8 / 9 / 10, in IE11 works, in Chrome works but it puts everything in the first column.

Can you suggest the proper way to accomplish that scenario? To make it work now I'm forced to use a kendo template and get the HTML back using jquery, but it will be much more cleaner to do everything in a declarative way within the HTML. I could not find any example on the web.

Thanks,

Enrico

Grid

answered on 13 Jul 2015

3 answers

165 views

Grid rows read only

If i set a Grid to be model binded, i can no longer check/uncheck the template checkbox columns , is this correct behaviour? when i inspect the checkbox column it has been set as disabled somehow.

Grid

answered on 13 Jul 2015

5 answers

109 views

Restrict header depth

Hi,

The ability to click into the header to trigger month and year view is very handy, however it goes too far for us (it goes to ten years range, and it breaks our design). We'd like to limit how far it goes, and stop at "year". I didn't find any setting to do that (it seems that the depth parameter is used for something else...).

Could you please provide me a way to do that?

Thanks

Calendar

answered on 13 Jul 2015

8 answers

323 views

scheduler integrating problem with angularJS

i am trying to add the scheduler into my existing webpage using angularJS .

i started with :

<div data-ng-controller="MyCtrl">
<div data-kendo-scheduler="kendoScheduler" data-k-options="schedulerOptions" >
<span data-k-event-template class='custom-event'>{{dataItem.title}}</span>
<div data-k-all-day-event-template class='custom-all-day-event'>{{dataItem.title}}</div>
</div>
</div>

then i created the controller and injected kendo-directives in the module

as a result i am getting these two warnings :

k-event-template without a matching parent widget found. It can be one of the following: ?^^kendoScheduler
k-all-day-event-template without a matching parent widget found. It can be one of the following: ?^^kendoScheduler

attached is what i see on the browser (chrome) .

i am using "kendo-ui": "~2015.2.624+Official" , "jquery": "~2.1.4",

Scheduler

answered on 13 Jul 2015