or
1 answer
173 views
How can I activate (focus) window which is not opened with open method, but with MVVM. I need window is focused when page loaded. In your example autoFocus with MVVM is not working.
Alexander Valchev
Telerik team
answered
on
03 Dec 2014
4 answers
2.3K+ views
I have implemented a feature similarly to http://demos.telerik.com/kendo-ui/listview/mvvm except:
1) the create transport is implemented;
2) all transports are functions calling $.ajax with specific options.
The server validates data and I could certainly match validation rules on the client, but I am not there yet.
At this stage, a creation or an update made with invalid data triggers a 400 - Bad Request response from the server.
The issue I have, is the error as no effect on the listView:
- the creation is validated with invalid data (it looks this way)
- the update is also validated with invalid data (it also looks this way).
When I would have expected the listView to remain in edit mode with a validation error message (like with client validation).
Is this normal behavior and is it up to the programmer to define the consequences of an error?
To achieve this, I have bound the error event of the dataSource to an event handler and I get the xhr, the status and the errorThrown. Unfortunately the event handler does not tell me which transport went wrong (creation, update) and which item is affected. Is there any way to obtain these informations to restore the listView in edit mode and display a validation error message?
1) the create transport is implemented;
2) all transports are functions calling $.ajax with specific options.
The server validates data and I could certainly match validation rules on the client, but I am not there yet.
At this stage, a creation or an update made with invalid data triggers a 400 - Bad Request response from the server.
The issue I have, is the error as no effect on the listView:
- the creation is validated with invalid data (it looks this way)
- the update is also validated with invalid data (it also looks this way).
When I would have expected the listView to remain in edit mode with a validation error message (like with client validation).
Is this normal behavior and is it up to the programmer to define the consequences of an error?
To achieve this, I have bound the error event of the dataSource to an event handler and I get the xhr, the status and the errorThrown. Unfortunately the event handler does not tell me which transport went wrong (creation, update) and which item is affected. Is there any way to obtain these informations to restore the listView in edit mode and display a validation error message?
Jack
Top achievements
Rank 2
Iron
Rank 2
Iron
answered
on
02 Dec 2014
1 answer
144 views
Hi,
I have a treelist with a column template (angular templates).
When I call refresh or setDataSource method TreeList doesn't refresh columns that contain angular templates for existing rows.
All works fine when I use kendo templates instead angular templates.
You can find attached an example that reproduce the issue when I'm trying to call setDataSource method.
I'm using a lot of angular templates in my grids and I want to continue to use them also in treelist.
Can you help me?
Thanks
I have a treelist with a column template (angular templates).
When I call refresh or setDataSource method TreeList doesn't refresh columns that contain angular templates for existing rows.
All works fine when I use kendo templates instead angular templates.
You can find attached an example that reproduce the issue when I'm trying to call setDataSource method.
I'm using a lot of angular templates in my grids and I want to continue to use them also in treelist.
Can you help me?
Thanks
Nikolay Rusev
Telerik team
answered
on
02 Dec 2014
1 answer
212 views
As a content of a modalView I'd like to use an Angular template (because the whole app is Angular based). But it seems like it doesn't see an Angular controller. So, for example, ng-click for a button inside a template doesn't work. On the other hand if I use onclick for the button it works fine (with just JavaScript code outside of any angular controller). The question is if it is possible at all to use an Angular controller/directive inside a modalView?
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="//cdn.kendostatic.com/2014.1.416/styles/kendo.common.min.css" rel="stylesheet" />
<link rel="stylesheet" href="//cdn.kendostatic.com/2014.1.416/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="//cdn.kendostatic.com/2014.1.416/styles/kendo.silver.min.css">
<link rel="stylesheet" href="//cdn.kendostatic.com/2014.1.416/styles/kendo.silver.mobile.min.css">
<link rel="stylesheet" href="//cdn.kendostatic.com/2014.1.416/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="//cdn.kendostatic.com/2014.1.416/styles/kendo.dataviz.default.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.903/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.903/js/kendo.all.min.js"></script>
<script src="Scripts/angular-kendo.js"></script>
<script id="template" type="text/x-kendo-template">
<div ng-app="MyApp" ng-controller="MyCtrl">
<button ng-click="closeD()">cancel</button> <!--Doesn't work-->
<!--<button onclick="closeD()">cancel</button> Works fine-->
</div>
</script>
<script>
angular.module("MyApp", ["kendo.directives"])
.controller("MyCtrl", function ($scope, $http) {
$scope.openD = function () {
var template = kendo.template($("#template").html());
$("#modalview-login").html(template);
$("#modalview-login").data("kendoMobileModalView").open();
}
$scope.closeD = function () {
$("#modalview-login-button").data("kendoMobileModalView").close();
}
});
</script>
</head>
<body ng-app="MyApp">
<div ng-controller="MyCtrl">
<div>
<button ng-click="openD()">Open ModalView</button>
</div>
<div id="modalview-login" data-kendo-mobile-modal-view="modal" style="width: 50%;"></div>
</div>
<script>
function closeD() {
$("#modalview-login").data("kendoMobileModalView").close();
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="//cdn.kendostatic.com/2014.1.416/styles/kendo.common.min.css" rel="stylesheet" />
<link rel="stylesheet" href="//cdn.kendostatic.com/2014.1.416/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="//cdn.kendostatic.com/2014.1.416/styles/kendo.silver.min.css">
<link rel="stylesheet" href="//cdn.kendostatic.com/2014.1.416/styles/kendo.silver.mobile.min.css">
<link rel="stylesheet" href="//cdn.kendostatic.com/2014.1.416/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="//cdn.kendostatic.com/2014.1.416/styles/kendo.dataviz.default.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.903/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.903/js/kendo.all.min.js"></script>
<script src="Scripts/angular-kendo.js"></script>
<script id="template" type="text/x-kendo-template">
<div ng-app="MyApp" ng-controller="MyCtrl">
<button ng-click="closeD()">cancel</button> <!--Doesn't work-->
<!--<button onclick="closeD()">cancel</button> Works fine-->
</div>
</script>
<script>
angular.module("MyApp", ["kendo.directives"])
.controller("MyCtrl", function ($scope, $http) {
$scope.openD = function () {
var template = kendo.template($("#template").html());
$("#modalview-login").html(template);
$("#modalview-login").data("kendoMobileModalView").open();
}
$scope.closeD = function () {
$("#modalview-login-button").data("kendoMobileModalView").close();
}
});
</script>
</head>
<body ng-app="MyApp">
<div ng-controller="MyCtrl">
<div>
<button ng-click="openD()">Open ModalView</button>
</div>
<div id="modalview-login" data-kendo-mobile-modal-view="modal" style="width: 50%;"></div>
</div>
<script>
function closeD() {
$("#modalview-login").data("kendoMobileModalView").close();
}
</script>
</body>
</html>
3 answers
164 views
Hi There,
I'm looking at how Kendo UI implement "Slide In" effect at http://demos.telerik.com/kendo-ui/fx/slidein, I'm curious whether if I could do that with Angular since Kendo UI is supporting Angular out of the box now.
Specifically for this line:
var slide = kendo.fx($("#slide-in-share")).slideIn("left")
What would the angular version for it?
Cheers,
Leo
I'm looking at how Kendo UI implement "Slide In" effect at http://demos.telerik.com/kendo-ui/fx/slidein, I'm curious whether if I could do that with Angular since Kendo UI is supporting Angular out of the box now.
Specifically for this line:
var slide = kendo.fx($("#slide-in-share")).slideIn("left")
What would the angular version for it?
Cheers,
Leo
Petyo
Telerik team
answered
on
02 Dec 2014
3 answers
1.2K+ views
I am using angular js and I have a kendo grid in a directive which we are using as a widget on a page. I have one of the grid column defined as a checkbox. If I check this checkbox on a row all other checkboxes on all the rows should be unchecked. The Save button will call the service and issue a ajax call and update the row with the checkbox value.
I cannot figure out how to trigger the checkbox click to check/uncheck all the other checkbox and also when the user clicks the Save button how to get the current value of the checkbox.
I have attached my directive controller and the service which has the grid options. Any help will be appreciated. Thanks
Ajay.
I cannot figure out how to trigger the checkbox click to check/uncheck all the other checkbox and also when the user clicks the Save button how to get the current value of the checkbox.
I have attached my directive controller and the service which has the grid options. Any help will be appreciated. Thanks
Ajay.
Kiril Nikolov
Telerik team
answered
on
02 Dec 2014
1 answer
110 views
Hello everyone
We found another bug in the kendo grid.
The Operator "lte" in the Date-Filter work like "lt".
You can reproduce the issue in this fiddle:
http://jsfiddle.net/mesk1dx9/
Try to filter the date with "is before or equal to" 7/8/1996 an you only will get the first two entrys before 7/8/96, not the follwoing two who are at 7/8/96.
Is there a workaround now?
Greetings
We found another bug in the kendo grid.
The Operator "lte" in the Date-Filter work like "lt".
You can reproduce the issue in this fiddle:
http://jsfiddle.net/mesk1dx9/
Try to filter the date with "is before or equal to" 7/8/1996 an you only will get the first two entrys before 7/8/96, not the follwoing two who are at 7/8/96.
Is there a workaround now?
Greetings
Alexander Valchev
Telerik team
answered
on
02 Dec 2014
2 answers
237 views
Greetings,
I'm driving myself crazy trying to figure out where the box and box-col css classes are defined in this diagram sample: http://demos.telerik.com/kendo-ui/diagram/api
When I launch the sample from the link above it has a nice column layout.
When I choose to Edit the sample (scroll down to the top of the code part and hit the edit button), the dojo version of the diagram sample runs, but there are no column layouts.
I'm driving myself crazy trying to figure out where the box and box-col css classes are defined in this diagram sample: http://demos.telerik.com/kendo-ui/diagram/api
When I launch the sample from the link above it has a nice column layout.
When I choose to Edit the sample (scroll down to the top of the code part and hit the edit button), the dojo version of the diagram sample runs, but there are no column layouts.
Mike Graham
Top achievements
Rank 1
Rank 1
answered
on
01 Dec 2014
2 answers
572 views
Is there a way to launch a custom modal when clicking the edit button in shape toolbar? I can launch my custom modal from edit event but still getting the standard edit popup window.
See attached for details.
Thanks.
Rich
See attached for details.
Thanks.
Rich
3 answers
104 views
My model looks like follows:
My dataSource uses this model and implements transport methods as functions because I need header and other optios on $.ajax calls. I only represent the create function below:
My ajax call returns an updated object with an id created on the server, a created date, an updated date and more.
My issue is the object added to the datasource with a null id and sent to the server for creation is not updated with the data I receive in response from the server.
After some digging into the kendo source code, it seems that an update is attempted by searching the object with the same id, but in my scenario teh id changes because it is created on the server. In this case, the object is not updated.
Can you please validate the following workaround or suggest any better ways:
var Sample = kendo.data.Model.define({ id: 'id', fields: { id: { type: 'string', nullable: true, editable: false }, .... }});My dataSource uses this model and implements transport methods as functions because I need header and other optios on $.ajax calls. I only represent the create function below:
...transport: { create: function(options) { $.ajax(...).done(options.success).fail(options.error); }},...My ajax call returns an updated object with an id created on the server, a created date, an updated date and more.
My issue is the object added to the datasource with a null id and sent to the server for creation is not updated with the data I receive in response from the server.
After some digging into the kendo source code, it seems that an update is attempted by searching the object with the same id, but in my scenario teh id changes because it is created on the server. In this case, the object is not updated.
Can you please validate the following workaround or suggest any better ways:
...transport: { create: function(options) { var that = this; $.ajax(...) .done(function(response) { that.get(null).accept(response); //<--------------------- this actually updates the item with id === null options.success(response); ) .fail(options.error); }},...
Petur Subev
Telerik team
answered
on
01 Dec 2014
