I m trying to integrate Kendo-ui into my AngularJS app. I have a working AngularJS app with ngResource as following:

(function () {
"use strict";
angular
.module("app")
.controller("RoleListCtrl",
["roleResource",
RoleListCtrl]);
function RoleListCtrl(roleResource) {
var vm = this;
roleResource.query(function (data) {
vm.roles = data;
});
}
}());

I want to use the same roleResource.query() to get data for a <kendo-treelist options="treelistOptions"></kendo-treelist>. I tried as following:

$scope.treelistOptions = {
dataSource: {
type: "odata",
transport: {
read: function (e) {
roleResource.query(function (data) {
return data;
});
}
},
schema: {
model: {
id: "id",
expanded: true
}
}
}, ......

It can start to loading data but the data never loaded (the loading.gif running for ever).

What is the right way to use Angualr-Resource with kendo dataSource?

Thanks,

I am trying to use a TreeList in my AngularJS app, based on demo "TreeList / Binding to local data".

I added a "createChild" button on each row as

columns: [
{ field: "Position", title: "Role", width: "350px" },
{ field: "Name", title: "Name", width: "250px" },
{ field: "Phone" },

{command: ["edit", "destroy", "createChild"]}
],

It is good to open an editor row under the button, but how do I reference its parent row?

I tried to add an "save" event as

save: function (e) {
alert(this.dataItem);
}

but it seems not right. Please advise!

By the way, when I "edit" and "delete" an item during the test, it successfully shows the result, but when I "update" the new row, it does not show up after the editing row closed. What do I miss?

 

Thanks,

 

Hello

Does kendo grid, with AngularJS, supports inline edit? I've been trying to make it work (with edit and cancel buttons) and at the start everything looks good.

Clicking on "Edit" button the "Update" button shows up but when I click on the "Update" button nothing happens.

Here's my code and a link on the live example: http://dojo.telerik.com/olEZE/9

NOTE: Update url is just a dummy url to see if "Update" button makes any request to the server.

 

angular.module("KendoDemos", [ "kendo.directives" ])
        .controller("MyCtrl", function($scope){
            $scope.mainGridOptions = {
                dataSource: {
                    type: "odata",
                    transport: {
                        read: {
                        url: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees",
                          dataType: "json"
                        },
                      update: {
                          url: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees",
                          dataType: "json"
                        }
                    }
                },
              editable: "inline",
                columns: [{
                    field: "FirstName",
                    title: "First Name",
                    width: "120px"
                    },{
                    field: "LastName",
                    title: "Last Name",
                    width: "120px"
                    },{
                    field: "Country",
                    width: "120px"
                    },{
                    field: "City",
                    width: "120px"
                    },{
                    field: "Title"
                    },
                    { command: ["edit", "destroy"], title: "&nbsp;", width: "250px" }
               ]
            };
        })

 

Thanks

Vladan

Hi,

I'm having propblems with the drop down list. Can you help me with this dojo? There are two issues:

1) It displays "[object Object]"

2) When opening the drop down, a narrow list at the bottom appears. Why is this list so far away from the drop-down component? Can I do anything to make it behave here more like the combo-box?

Regards,

Kasimier Buchcik

Hi,

I'm using Kendo UI of version 2015.1.429 and naively started with angular 1.4.0. After a day of trying to make a combo-box work (I didn't succeed), I finally learned that angular 1.4.0 is not supported. According to my dojo here, angular 1.2.28 is the last supported version.

I would like to know if/when more recent versions of angular will be supported.

Also: is Kendo going to be integrated with angular 2 in the future?

Regards,

Kasimier Buchcik

Hi,

I have the problem that I need (for legacy reasons) to use an older version of jQery (1.4.x).

In newer developments I'm using requireJs and other versions of jQuery, however it seems impossible to "inject" a jQuery-version in KendoUI.

Is there a way to use KendoUI with a special (i.e. the "right") version of jQuery while $ = jQuery = jQuery-wrong-version ?

Best, Nils

Hi,

We plan to use Kendo UI Professional + Bootstrap in our new project. We played a bit with Kendo UI Core before purchasing Kendo UI Professional and are generally happy with Kendo widgets, themes and quite semless integration with Bootstrap. But one thing is not so clear: the situation with Bootstrap's form-control class. If we apply this class to Kendo widget and use the hint described in Kendo documentation (http://docs.telerik.com/kendo-ui/using-kendo-with-twitter-bootstrap#using-the-form-control-bootstrap-css-class-with-kendo-ui-widgets), then we solve the problem with padding and width, but some visual Bootstrap effects are also applied simultaneously, which is not so good in case if we use the Kendo theme different from Bootstrap one. The immediate idea is: why not to implement k-form-control class, which would apply all the necessary Bootstrap form-related formatting to Kendo widget (http://getbootstrap.com/css/#forms), but will not spoil the chosen Kendo visual theme things?

Best regards,

Alexey

Hi,

I ran into an issue of the Kenod UI Grid not refreshing when using Angular directives.  It displays the results of the first search even when the datasource contains the new data.  I am using Angular 1.3.15 and the latest version of Kendo UI.

The code:

<div kendo-grid scrollable="true"
                     pageable="true" sortable="true"
                     options="vm.gridOptions" k-ng-delay="vm.gridOptions"
                     >
                </div>

function search() {
            
            dataservice.searchClaims(vm.selectedColumn, vm.selectedOption, vm.searchValue)
                .then(searchSuccess)
                .catch(errorCallback)
            ;

            function searchSuccess(response) {               
                vm.gridOptions = {
                    dataSource: new kendo.data.DataSource({
                        data: response,
                        pageSize: 10,
                        pageable: true
                    }),
                    selectable: 'row',
                    columns: common.claimSearch.gridColumns
                }             
               
            }
        };

Could someone advise?

Thank you.

Hi,

I have kendo-grid with a detailTemplate

 detailTemplate:kendo.template($('#deviceDetails').html())

see http://dojo.telerik.com/@rtv/aCoc for a complete example.

Angular Jasmine unit tests fail to load a controller with this detailTemplate line in it with the following error

Note : line 131 in the following stack trace is detailTemplate:kendo.template($('#deviceDetails').html())


TypeError: e is undefined
z.compile@/Users/rtv/workspace/ioxmgr13March/ccm/ioxmgr/ioxmgr-ui/app/bower_components/kendoUI/js/kendo.all.min.js:9:6980
.proxy/i@/Users/rtv/workspace/ioxmgr13March/ccm/ioxmgr/ioxmgr-ui/app/bower_components/jquery/jquery1.9.1.min.js:3:6327
@/Users/rtv/workspace/ioxmgr13March/ccm/ioxmgr/ioxmgr-ui/app/scripts/controllers/deviceSummaryController.js:131:9
invoke@/Users/rtv/workspace/ioxmgr13March/ccm/ioxmgr/ioxmgr-ui/app/bower_components/angular/angular.js:3906:7
instantiate@/Users/rtv/workspace/ioxmgr13March/ccm/ioxmgr/ioxmgr-ui/app/bower_components/angular/angular.js:3917:7
$ControllerProvider/this.$get</<@/Users/rtv/workspace/ioxmgr13March/ccm/ioxmgr/ioxmgr-ui/app/bower_components/angular/angular.js:7201:7
@/Users/rtv/workspace/ioxmgr13March/ccm/ioxmgr/ioxmgr-ui/test/spec/controllers/deviceSummaryControllerTest.js:124:76
invoke@/Users/rtv/workspace/ioxmgr13March/ccm/ioxmgr/ioxmgr-ui/app/bower_components/angular/angular.js:3906:7
workFn@/Users/rtv/workspace/ioxmgr13March/ccm/ioxmgr/ioxmgr-ui/app/bower_components/angular-mocks/angular-mocks.js:2149:11


How can I get around this ?

-Rajesh

It would be awesome if Kendo could be powered by Zepto instead of jQuery (optional of course) for mobile environments where we might not want to load all of jQuery.