Fetching some data from a remote server using the angularjs $http-service doesn't initialize the pager of a grid correctly. It seems the pager is initialized before the dataSource is loaded completely. Is there a way to update the pager subsequent to the loading of the dataSource?
The dojo can be found here, otherwise the following code should work similar:
01.<!DOCTYPE html>02.<html>03.<head>04. <meta charset="utf-8">05. <title>Kendo UI Snippet</title>06. 07. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.common.min.css">08. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.rtl.min.css">09. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.default.min.css">10. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.dataviz.min.css">11. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.dataviz.default.min.css">12. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.mobile.all.min.css">13. 14. <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>15. <script src="http://kendo.cdn.telerik.com/2015.2.805/js/angular.min.js"></script>16. <script src="http://kendo.cdn.telerik.com/2015.2.805/js/kendo.all.min.js"></script>17.</head>18.<body>19. 20.<div ng-app="app" ng-controller="MyCtrl">21. <div kendo-grid k-options="gridOptions"></div>22.</div>23.<script>24.angular.module("app", ["kendo.directives"]).controller("MyCtrl", function($scope, $http) {25. $scope.gridOptions = {26. columns: [ { field: "FirstName" }, { field: "LastName" } ],27. pageable: {28. pageSize: 2,29. input: true,30. refresh: true31. },32. dataSource: {33. schema: {34. data: "d"35. },36. transport: {37. read: function (e) {38. $http({method: 'GET', url: 'http://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees'}).39. success(function(data, status, headers, config) {40. e.success(data)41. }).42. error(function(data, status, headers, config) {43. alert('something went wrong')44. console.log(status);45. });46. }47. },48. }49. 50. }51.});52.</script>53.</body>54.</html>Hello,
I have a grid like the following:
$("#grid").kendoGrid({
dataSource: {
batch: true,
data: [
{id: 1, statusId: 1, label: 'item1'},
{id: 2, statusId: 1, label: 'item2'},
{id: 3, statusId: 2, label: 'item3'},
{id: 4, statusId: null, label: 'item4'}
],
model: {
id: 'id',
fields: {
id: {type:'number', editable: false},
statusId: {type:'number', editable: true},
label: {type:'string', editable: true}
}
}
},
columns : [
{ field: 'statusId', values: [ {value:1, text:'Status1'}, {value:2, text:'Status2'} ] },
{ field: 'label'}
],
editable: true
}).data("kendoGrid");​
statusId column contains an identifier according to the linked values dictionary. When I double click a statusId cell I get a dropDownList with Status1 and Status2 options.
Then if I click a statusId cell having non empty value (e.g. row 1), change statusId to another value, click on another row - statusId text is properly updated.
But if I click a statusId cell having an empty value ( row 4), change statusId to​ any non empty value, click on another row - statusId text is not updated in the row 4 statusId cell.After a recent update to the current Kendo and JQuery libraries (we were quite behind) we've had a lot of issues with buttons in Android.
I have read through all of the forum and recently submitted a support ticket but wanted to bring what steps I've taken so far and show my code block for others to comment on/see.
<div data-role="view" data-title="Home" data-layout="main" data-model="XXXX" data-init="XXXX" data-show="XXXX" > <div data-role="header" class="whiteBG"> <div data-role="navbar" style="padding-bottom:5px;"> <img class="headerLogo logoClass" /> <span><a data-role="button" class="km-menu-image" href="#appDrawer" data-rel="drawer" data-align="left"></a></span> <img class="disconnected-image" data-align="left" /> <img class="cloud-sync-image" data-align="left" /> </div> <div class="pageheading"> <a data-role="button" data-click="jobDetailBack" data-align="left" class="link-button-design-1" style="font-size: 10px;"><span data-bind="html:backLabel"></span></a> <a data-role="button" id="button-GotoContentsBagCountPage" data-click="GotoContentsBagCountPage" style="width: auto; float:right; display:none; text-transform: uppercase; font-size: 10px;" class="link-button-design-1 enable-online-buttons"><span data-bind="html: bagCountLabel"></span></a> <a data-role="button" id="button-GotoNotesList" data-click="GotoNotesListFomJobDetailsPage" style="width: auto; float:right; margin-right: 3px; text-transform: uppercase; font-size: 10px;" class="link-button-design-1 enable-online-buttons"><span data-bind="html: notesLabel"></span></a> <a data-role="button" data-click="goToAlbumDetailsPageFromJobDetailsPage" id="button-GoToAlbumDetailsPage" style="width: auto; float:right; margin-right: 3px; text-transform: uppercase; font-size: 10px;" class="link-button-design-1 enable-online-buttons"><span data-bind="html: albumsLabel"></span></a> </div>
The block of anchor tags (specifically the back button which is aligned on the left side where the slide menu slides from) are a less than 50% chance of working on Android at the moment.
The changes we've made so far are ::
kendo.UserEvents.defaultThreshold(20);app = new kendo.mobile.Application(document.body, {I've moved buttons around thinking they were too close to each other and that was causing the issue...nope, hasn't helped.
Mind you, iOs seems to be working fine and in fact better since I adjusted the UserEvent threshold.
Please let me know what other options I have, this is currently not usable for our customers and becoming a real problem.
Thanks,
I'm trying to open a kendo window dynamically from angular. By dynamically, I mean adding a <div kendo-window...> to the html from an angular function and then opening the window. The function looks like this
$scope.showCalendar = function() {
var element = "<div kendo-window='calendar' k-visible='false'> <div kendo-calendar></div> </div>";
$("#calendarDiv").append(element);
$scope.calendar.open();
};
The window does not appear. If I include this <div> directly inside the html, then the function call $scope.calendar.open() works okay, of course.
I want to do it this way, because I want to open a varying number of windows (the calendar inside the window is just for experiment; I will replace it with my custom content). This actually leads to another, more general question. I can keep track of unique window identifiers like 'win1', 'win2', and so forth, but how do you the function call dynamic? I need to somehow make this static code $scope.calendar.open() to $scope.win1.open(), $scope.win2.open() and so forth. JavaScript has some kind of eval function? (I'm a JavaScript newbie.)
Thank you for your help.
I was following the Daniel tip, how to achieve inheritance with MVVM. But I am getting strange errors in jquery when using mouseover/out in ListView template.
How can I achieve this?
Hello
I am using the scheduler with a events that reoccur.
The user has the ability to delete an event, and the confirmation box pops up with two options:
1) Delete single occurrence
2) Delete entire series
I then have a remove function, and in that function, I'd like to find out which of the buttons was pressed, so that I can run code for each instance.
remove: function(e) {
if(delete single) // this is the if that I need help with
do something
else if(delete entire series)
do something else
},
How do I find out which button was pressed?
I have an AngularJS application that consists of a search parameters and a Kendo UI grid.
I am trying to have the grid refresh with new search results when the user changes the search parms and clicks "Search"
I can get the grid to load initially, and refresh once when search parms are entered and the search button is clicked, but on any subsequent searches I get an empty grid. Here's my code:
in function init():
$scope.mainGridOptions = {
dataSource: {
data: $scope.hazards,
schema: {
model: {
fields: {
Name: { type: "string" },
Category: { type: "string" },
Severity: { type: "number" }
}
}
},
pageSize: 5
},
sortable: true,
pageable: true,
dataBound: function () {
this.expandRow(this.tbody.find("tr.k-master-row").first());
},
columns: [{
field: "Name",
title: "Name",
width: "120px"
}, {
field: "Category",
title: "Category",
width: "120px"
}, {
field: "Severity",
title: "Severity",
format: "{0}",
width: "120px"
}]
};
in Search function:
hazardFactory.getHazards(parms)
.success(function (hazards) {
$scope.hazards = hazards;
//alert(JSON.stringify(hazards));
var grid = $("#hzgrid").data("kendoGrid");
grid.dataSource.data([]);
grid.dataSource.add(hazards);
})
.error(function (data, status, headers, config) {
alert('Fail:' + data + ' ' + status);
});
Please help.
Tim Inouye

