Telerik Forums
Kendo UI Integration Forum
3 answers
365 views
I am using the Kendo grid with Angular and Asp.Net MVC WebApi.  I have the grid set up with batch editing and have tried to follow the examples, but I am not getting the data to be updated in my method in the WebApi Controller. I see the data on the update request but when I hit the break point in the method, the parameter has a count of 0.  I have tried different scenarios, but have had no luck.  Any help is very much appreciated.  I have attached screen shots of the parameter at break point and the data on the request in the developer tool in Chrome.  Here is my Angular code for the the grid:

usersCtrl.authUsersGridOptions = {
    pageable: true,
    selectable: "row",
    editable: true,
    save: function(e) {
        alert("UserFName is " + e.model.UserFName);
    },
    toolbar: ["save", "cancel"],
    columns: [
        { field: "Id", hidden: true},
        { field: "UserKey", hidden: true },
        { field: "UserFName", title: "First Name" },
        { field: "UserLName", title: "Last Name" },
        { field: "UserName", title: "User Name" },
        { field: "Email", title: "Email Address"},
    {
        field: "IsBIUser", title: "Is BI User",
        template: '<input type="checkbox" #= IsBIUser ? checked="checked" : "" # disabled="disabled"></input>'
    },
        { field: "StartDate", title: "Start Date" },
        { field: "EndDate", title: "End Date" },
        { field: "twoFactor", hidden: true },
        { field: "mobilePhone", hidden: true }]
};
 
 
    usersCtrl.authUsersGridDataSource = new kendo.data.DataSource({
        type: "aspnetmvc-ajax",
        transport: {
            read: {
                url: '/api/gmcmembership/au/' + e.sender.value(),
                dataType: 'json',
                type: "GET"
            },
            update: {
                url: '/api/gmcmembership/updateusers',
                type: "POST"
            },
            parameterMap: function(data, operation) {
                if (operation !== "read" && data.models) {
                    return {models: kendo.stringify(data.models)}
                } else {
                    return JSON.stringify(data);
                }
            }
        },
        schema: {
            model: {
                id: "Id",
                    Id: "Id",
                    UserKey: "UserKey",
                    UserName: "UserName",
                    UserFName: "UserFName",
                    UserLName: "UserLName",
                    IsBiUser: "IsBIUser",
                    StartDate: "StartDate",
                    EndDate: "EndDate",
                    twoFactor: "twoFactor",
                    mobilePhone: "mobilePhone"
            }
        },
        batch: true,
        pageSize: 7
    });

Here is the razor code for the grid:

<div ng-show="usersCtrl.showGrid" kendo-grid="authUsersGrid" k-options="usersCtrl.authUsersGridOptions" k-data-source="usersCtrl.authUsersGridDataSource">

Thanks!
Donna
Petur Subev
Telerik team
 answered on 14 Nov 2014
3 answers
143 views
Hi,

I have an angular kendo grid whose rows may be selectively updated either by user action OR by a javascript poll to the backend. I'd like to show a busy cursor with a custom message on only one column of the rows that are being updated. How can this be done ?

Thanks,
Rajesh
Kiril Nikolov
Telerik team
 answered on 13 Nov 2014
1 answer
89 views
Hello,
I need to use the Scheduler (Kendo UI Professional Q2 2014) with Durandal js.
Is it supported - compatible with Durandal? does it have incompatibility problems?
thanks in advance
Kiril Nikolov
Telerik team
 answered on 11 Nov 2014
6 answers
115 views
Hi,

I am managing to integrate Kendo UI Mobile and AngularJS in my new project.  There are a lot of Angular examples of KendoUI Mobile, but what I can found are all single-view.  I want to use Kendo UI Moble application and view mechanism, so my question is -- is it possible to use Angular in remote view?

I made a sample in plunker (http://plnkr.co/edit/AXyCGGMqPSfHZG77S2m4?p=info).  Is there anyway to make ng-controller and {{ text }} in about.html complied by Angular?

Thanks.
Tim
Top achievements
Rank 1
 answered on 03 Nov 2014
5 answers
176 views
I have an application using Kendo (2014.2.1008) Grid with AngularJS. It was working fine with Angular 1.2.26 but not with Angular 1.3.

The problem is that the grid is taking more vertical space than it should, and it visually overlaps with HTML elements below the grid. 

The grid should have a height of 500px:
<div kendo-grid
                 k-data-source="vm.searchResults"
                 k-sortable="true"
                 k-columns="[
                    {'field': 'dateDue', width:'90px', 'title': 'Date due', template:'#=kendo.toString(kendo.parseDate(dateDue),&quot;yyyy-MM-dd&quot;)#' },
                    //...
                 ]"                 
                 style="width:980px; height: 500px" id="searchResultsGrid">
</div>

I noticed the following differences between the HTML rendered when using Angular 1.2.26 and the Angular 1.3:

Angular 1.2.26:
<div class="k-grid-content" style="height: 469px">
   <table role="grid">
    ...

Calling $(".k-grid-content").height() in the JavaScript console returns 469

Angular 1.3:
<div class="k-grid-content"> <!-- no height specified -->
   <table role="grid">
    ...

Calling $(".k-grid-content").height() in the JavaScript console returns 606, which would explain the overlap with HTML elements below the grid.
Calling $(".k-grid-content").height(469) fixes the visual overlap problem.

Any ideas why would the grid render to different HTML when using Angular 1.3 instead of 1.2.26? 

Has Kendo been tested with Angular 1.3, is there an expected date for a version that should support it?
Christos
Top achievements
Rank 1
 answered on 29 Oct 2014
3 answers
189 views
Hi,

I am trying to use the Slider widget with AngularJS.
I want to bind the enabled state of the slider to my scope.

I have used :

<div id="example" ng-app="KendoDemos">
    <div class="demo-section k-content" ng-controller="MyCtrl">
        <div style="position: relative; width: 300px; height: 300px; overflow: visible; margin: 0 auto;">

            <div kendo-slider ng-model="width" k-tooltip="{ enabled: false }"
                style="position: absolute; left: 25px; bottom: 0; width: 270px;"></div>

            <div kendo-slider ng-model="height" k-tooltip="{ enabled: false }" k-orientation="'vertical'"
                style="position: absolute; bottom: 25px; left: 0; height: 270px;" k-enabled="{{vEnabled}}"></div>

            <img style="position: absolute; left: 60px; bottom: 60px;
            width: {{100 + width * 10}}px;
            height: {{100 + height * 10}}px;"
            src="../content/shared/images/foods/200/72.jpg" />
          
        </div>
      <input type="checkbox" ng-model="vEnabled" />
vEnabled:{{vEnabled}}
    </div>
    <style scoped>
        .demo-section {
            width: 300px;
        }
    </style>
</div>

<script>
  angular.module("KendoDemos", [ "kendo.directives" ]);
  function MyCtrl($scope) {
      $scope.width = 0;
      $scope.height = 0;
    $scope.vEnabled = true;
  }
</script>

The enabled state bound to "vEnabled" is correctly taken at startup, but when changed is not live.
Do I have a correct usage ?

Thanks.
Kiril Nikolov
Telerik team
 answered on 20 Oct 2014
3 answers
442 views
Hello,
When using scheduler with angular initial options sent through options attribute are accepted. However, directive don't watch options changes to update and we don't have some kind of API like scheduler.setOptions('editable', true).
So, queation is: How to set option (like editable) after initialization.
Atanas Korchev
Telerik team
 answered on 16 Oct 2014
3 answers
593 views
I've got a KendoDropDownList like the following:

<select kendo-drop-down-list
        style="margin-left: -20px;"
        k-options="customOptions" ng-model="selectedBuild" k-rebind="buildDataSource"></select>

I am trying to use it with a controller and service. 

$scope.buildDataSource = new kendo.data.DataSource();
BuildSvc.GetListOfBuilds($routeParams.venueId)
    .then(function (data) {
        $scope.buildDataSource.data(data);
    }
);

However, not only does it not load the data from my JSON source (it is just an array of JSON objects), but it looks like it's triggering some sort of infinite loop on the Angular side:

Unhandled exception at line 12715, column 13 in http://localhost:33394/VenueModelPortal/Scripts/angular.js
 0x800a139e - JavaScript runtime error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []
 http://errors.angularjs.org/1.2.20/$rootScope/infdig?p0=10&p1=%5B%5D

How can I correct this so that my combobox is populated by the datasource after the q returns the data?
Kiril Nikolov
Telerik team
 answered on 16 Oct 2014
16 answers
1.0K+ views
In Angular-kendo directives pages there is an example with default validation rules, but if we want to create multiple validation rules? How could we create a custom validation widget in controller, is it possbile? We use the gettext angular library to translate texts on pages but with custom validation it was a little difficult to do, because the only way to create a custom validation rules and message was by script and jquery and passing message traslated by data-message attribute.
Mihai
Telerik team
 answered on 16 Oct 2014
2 answers
126 views
Hi All,

I had developed a simple kendo UI Pages with button and grid with editing. every thing is working fine as individual piece but when i putting the page in  iframe of crm 2011 form  grid is not coming .

IE version : IE9

Please  let us is there any limitation or workaround we needed to do in this aspect.your inputs are very valuable on this side.

Thanks in Advance !!

Regards,
Rajesh
Dimo
Telerik team
 answered on 14 Oct 2014
Narrow your results
Selected tags
Tags
+? more
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?