Questions on Kendo UI for jQuery Forum

1 answer

270 views

Hi,

I need a month in the YEAR view to be visible but disabled. I.E I do not want to set the max date for the datepicker but want the month to have a CSS that shows it to be disabled (like background-color:lightgray)

This works nicely for MONTH view :

I tried with the below code but it did not work. Invalid template error.
Do we have any template for YEAR view to customize month display?

startpicker.setOptions({

format: "MMMM, yyyy",

value: startPickerValue.getMonth(),

month: {

content: "<div style='background-color:#= data.date < ($('#startDatePicker').data('kendoDatePicker').max()) > ? 'cyan' : 'lightgray' #'>#=data.value#</div>"

}

});

DatePicker

answered on 10 Sep 2014

1 answer

314 views

Double click cell edit in angularjs

Gday,

I've just started playing around with Kendo and I'm trying to enable cell edit on double click in Angularjs.

I have got it working but I am using jquery event handlers and I was wondering whether there was a more 'Angular' way to do it via the templates for eg.

Also I saw some threads where people were using the delegate method - is that a better way to do this do you think?

Thanks,
Will

var app = angular.module('myApp', ["kendo.directives"]);

app.controller('MyController', function ($scope) { 

 $scope.gridOptions = {

  // standard grid initialisation 

 }



 var grid = $("#grid");

grid.on("dblclick", "tr.k-state-selected td", function () {

var $this = $(this);

grid.data("kendoGrid").editCell($this);

$this.focusout(function(){

// for input elements that use widgets they will lose focus when the widget is rendered 

             // so we need to rebind the foucsout to the widget

var $widget = $('.k-widget', $this);

if ($widget.length == 0) {

if(!$(".k-grid-edit-row input").hasClass("k-invalid")){

//console.log('focusout');

$("#grid").data("kendoGrid").closeCell();

}

}else{

//console.log('widget editing');

$widget.focusout(function() {

//console.log('widget focusout');

if(!$(".k-grid-edit-row input").hasClass("k-invalid")) {

$("#grid").data("kendoGrid").closeCell();

$widget.off('focusout');

}

});

}

});

});

}

Grid

answered on 10 Sep 2014

1 answer

509 views

[Solved] Refresh in Firefox and autoUpload:true

It seems that a refresh (F5) in Firefox automatically re-uploads a previously uploaded file. In other browsers a browser refresh resets the control to its initial state as expected.

You can reproduce it with the upload demo http://demos.telerik.com/kendo-ui/upload/events by selecting a file (uploaded) and hitting F5. You can see that the file is automatically remembered and uploaded.

Any way to avoid this?

Thanks

Upload

answered on 10 Sep 2014

3 answers

82 views

KendoWeb data-reorderable does not work when the the data-bind of the grid uses dataSource object

I have a div with id="grid" which uses data-bind attribute, but when I add data-reorderable attribute it does not work at all.this is the div where I want to set data-reorderable="true"

<div id="grid" data-role="grid" data-sortable="true" data-editable="false"

data-navigatable="true" data-resizable="true" data-reorderable="true"

data-pageable="{numeric: true, buttonCount: 5, previousNext: true, info: true}" data-selectable="True"

data-columns=

'[{"field": "LoadDisplayId", "title": "Load Id", "width": "80px"}, {"field": "BeginDate", "title": "Start Date", "width": "80px", "format": "{0:MM/dd/yyyy}"}, {"field": "EndDate", "title": "End Date", "width": "80px", "format": "{0:MM/dd/yyyy}"},{"field": "RouteName", "title": "Route Identifier", "width": "100px"},{"field": "Origin", "title": "Origin", "width": "200px"},{"field": "Destination", "title": "Destination", "width": "200px"},{"field": "BillTo", "title": "BillTo", "width": "200px"},{"field": "Carrier", "title": "Carrier", "width": "200px"}]'

data-bind="source: gridSource, events: { change: change }">

</div>

the problem is in the data-bind="source: gridSource,... the gridSource comes from observable object (for clarity, I've substituted an array for my actual remote data):

viewModel = kendo.observable({

gridSource: new kendo.data.DataSource({

data:[

{

LoadId: 125642,

LoadDisplayId: "L138094",

StatusId: 285,

Status: "Pending",

RouteName: "May200",

Origin: "A Raymond Tinnerman Auto, INC ",

Destination: "B L Downey Company Inc.",

BillTo: "Behr Charleston",

Carrier: "AAA Cooper",

BeginDate: "04/01/2013",

EndDate: "04/01/2013",

NextActionDate: "04/01/2013",

NextAction: "Ready To Tender",

CheckCallException: false,

TenderException: false,

HasPendingCustomerRequest: null

},

{

LoadId: 125642,

LoadDisplayId: "L100004",

StatusId: 285,

Status: "Pending",

RouteName: "test",

Origin: "A Raymond Tinnerman Auto, INC ",

Destination: "B L Downey Company Inc.",

BillTo: "Behr Charleston",

Carrier: "AAA Cooper",

BeginDate: "04/01/2013",

EndDate: "04/01/2013",

NextActionDate: "04/01/2013",

NextAction: "Ready To Tender",

CheckCallException: false,

TenderException: false,

HasPendingCustomerRequest: null

}

]

})

});

the columnreordering property does not work on the Front End .... but if I use the array directly it works (not referencing kendo.data.DataSource):

gridSource: [

{

LoadId: 125642,

LoadDisplayId: "L138094",

StatusId: 285,

Status: "Pending",

RouteName: "May200",

Origin: "A Raymond Tinnerman Auto, INC ",

Destination: "B L Downey Company Inc.",

BillTo: "Behr Charleston",

Carrier: "AAA Cooper",

BeginDate: "04/01/2013",

EndDate: "04/01/2013",

NextActionDate: "04/01/2013",

NextAction: "Ready To Tender",

CheckCallException: false,

TenderException: false,

HasPendingCustomerRequest: null

},

{

LoadId: 125642,

LoadDisplayId: "L100004",

StatusId: 285,

Status: "Pending",

RouteName: "test",

Origin: "A Raymond Tinnerman Auto, INC ",

Destination: "B L Downey Company Inc.",

BillTo: "Behr Charleston",

Carrier: "AAA Cooper",

BeginDate: "04/01/2013",

EndDate: "04/01/2013",

NextActionDate: "04/01/2013",

NextAction: "Ready To Tender",

CheckCallException: false,

TenderException: false,

HasPendingCustomerRequest: null

}

]

The problem is that when I instantiate a new kendo.data.DataSource object,it creates a conflict. How can I solve/avoid that issue? .... (In my case I have to use new kendo.data.DataSource object )

Grid

answered on 10 Sep 2014

1 answer

110 views

Display problem with IE and Bootstrap theme

Hi,

I'm experiencing display problems with the DatePicker and Bootstrap theme in IE11. This also counts to the DateTimePicker and ComboBox widgets. It can be easily reproduced with the DatePicker demo. Attached to this post you will find a screenshot showing the Problem.

Thanks,
Holger

DatePicker

answered on 10 Sep 2014

2 answers

123 views

Per File Meta-info in Async Mode with AutoUpload

Hi Guys
When the user drags a bunch of files into the upload widget, the files are being stored on the server and a logical file incl. a file version is being created
in the database backend assigning a unique ID to each uploaded file. I modified the widged in a way that the user can meanwhile edit some meta informations
like the name, the responsible person, whether a pdf view shall be generated and so on. This happens simultaneously while uploading on a "per file base". When all files are uploaded completely a button becomes active to commit all meta information. The problem is, that at this point (when the commit button is pressed after uploading all files), I need to know, which local "row" has which FileID on the server.

I didn't think this would be a problem in the first place as I realized, that a separate "upload" event and corresponding "save" request is being performed for each file (even when selecting multiple files at once). So I thought, I simply send the uid to the server by evt.data = {uid: file.uid) and the "save" handler on the server side returns a tuple (uid, FileID) which I can catch in the success event and assign the fileID to the matching DOM element containing the appropriate uid data attribute. What I didn't realize was, that it seems to be impossible to know for which file a "upload" event is being fired, so I don't know which uid to select as I always get the entire array of selected files.

Am I missing something here?

Best regards

Upload

answered on 10 Sep 2014

1 answer

210 views

DropDownList with Kendo Mobile - Selected Item is not visible when list opens

I'm using the DropDownList within a Kendo Mobile application targeting Android (Samsung S4 in particular). The scenario is that I have a drop down list with many items and one of the later items is selected. When the list is 'opened', there are two many items to be visible at one time so scrolling is required. The normal behaviour for the widget (when run as a web widget on a desktop browser) is that when the drop down list is opened, the selected item is located in the visible portion of the opened widget. Is this a bug or am I missing something?

When viewed on an Android Samsung S4 (or using Chrome Developer tools to emulate this device), the opened drop down list does not scroll to the selected item.

I have created this Dojo Snippet Kendo Mobile use of DropDownList to illustrate the problem. Use this to view the behaviour http://runner.telerik.io/fullscreen/@martinho/oKAj/3

DropDownList

answered on 10 Sep 2014

1 answer

110 views

Its a bug ?

<!DOCTYPE html>

<html>

<head>

<title>Images</title>

<meta charset="utf-8">

<script src="client/js/jquery-1.11.1.min.js"></script>

<link href="client/style/kendo.common.min.css" rel="stylesheet">

<link href="client/style/kendo.metro.min.css" rel="stylesheet">

<link href="client/style/kendo.dataviz.min.css" rel="stylesheet" />

<link href="client/style/kendo.dataviz.metro.min.css" rel="stylesheet" />

<script src="client/js/kendo.all.min.js"></script>

</head>

<body>

<a href='#' style='margin-left:10px;' onclick="start();">Start</a>

<table class="orgaltdata">

<thead>

<tr>

<th>Сайт</th>

<th>Производитель</th>

<th>Название</th>

<th>Код</th>

<th>Цена</th>

<th>Склад</th>

<th>Кор</th>

</tr>

</thead>

<tbody>

<tr>

<td>favorit-auto.ru</td>

<td>J+P Group</td>

<td>Датчик износа тормозных колодок задний</td>

<td>1397300500</td>

<td>47,90</td>

<td>46</td>

<td>12</td>

</tr>

</tbody>

</table>

<script>

function start()

{

$(".orgaltdata").kendoGrid

({

//height: 550,

//sortable: true

});

}

</script>

</body>

</html>

Ater press start button, the Grid not shown.

Grid

answered on 10 Sep 2014

3 answers

285 views

Hyperlink to remote views not loading remote view within layout in Index.html

I can't figure out why if you have a hyperlink to a remote view as a drawer item, it will correctly render the remote view within the Index.html page and have all the copied elements from the layout...i.e. the header and script references, etc.

See link in drawer item below: "views/business.html?businessId=3".

<!DOCTYPE html>

<html>

<head>

<title></title>

<meta charset="utf-8" />

<link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />

<link href="styles/main.css" rel="stylesheet" />

<script src="cordova.js"></script>

<script src="kendo/js/jquery.min.js"></script>

<script src="kendo/js/kendo.mobile.min.js"></script>

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu29iUhQeU6HuCPhv4cehlkdWaEn0H-5E&sensor=true"></script>

<script src="scripts/app.js"></script>

</head>

<body id="body">

<div data-role="layout" data-id="main">

<div data-role="header">

<div data-role="navbar">

<span data-role="view-title"></span>

<a data-role="button" href="#appDrawer" data-rel="drawer" data-align="left" data-icon="drawer-button"></a>

</div>

</div>

<div data-role="drawer" id="appDrawer" style="width: 200px" data-title="Navigation" data-position="left" data-swipe-to-open="false">

<div data-role="header">

<div data-role="navbar">

<span data-role="view-title"></span>

</div>

<ul data-role="listview">

<li>

<a href="views/home.html" data-icon="home">Home</a>

</li>

<li>

<a href="views/map.html">Map</a>

</li>

<li>

<a href="views/settings.html" data-icon="settings">Settings</a>

</li>

<li>

<a href="views/contacts.html" data-icon="contacts">Contacts</a>

</li>

<li>

<a href="views/business.html?businessId=3" data-icon="contacts">Business Test</a>

</li>

</ul>

</div>

</body>

</html>

But, if I put his same hyperlink in another view, it will navigate to that view, but it will NOT copy all the layout elements like the head section with the script references. I just get the html elements of the remote view....

<html><head></head><body><div id="businessDetail" data-role="view" data-title="Business Details" data-layout="main" data-model="APP.models.business" data-init="initBusinessDetails">

<img style="float:left;width:50px;margin-right:5px;" data-bind="attr: { src: data.image_url }">

<div style="float:left;display:inline-block;">

<span data-bind="text: data.name"></span><br>

<span data-bind="text: data.address1"></span><br>