Telerik Forums
Kendo UI Integration Forum
2 answers
130 views

I have a many-to-many relationship between Contacts and Users in a UserContact entity.  A contact and its related users are pulled down in a single JSON request.  The contact object has a userContacts property that contains all of the related userContact records.  Each userContact has as user property that contains additional info about the user.  I am using a grid to maintain the users associated with the current contact (contact.userContacts).  I put the grid in an Angular 1.5 component, and I pass in the current contact. 

Everything is working, except that new records added in the grid are not making it back to the model.  If I change the user on an existing record, it works fine.  I tried the suggestions on this page, but I couldn't get it to work.  I'm not sure how to apply the ObservableArray() to my code.  I am using a drop-down list in the grid, but that appears to be working fine.  Can you see what I'm doing wrong?

Here's the HTML pulling in the component to my main Contact view:

<div class="col-sm-offset-1 col-md-offset-1">
    <contact-user-list contact="vm.contact" />
</div>

Here's the Angular HTML template for the component:

<div kendo-grid id="contractUserGrid"
     k-options="contactUserList.userGridOptions()"
     k-rebind="contactUserList.contact"
     k-selectable="true"
     k-navigatable="true">
</div>

Javascript for the component:

(function () {
    'use strict';
 
    var app = angular.module("app.contacts");
 
    app.component('contactUserList', {
        templateUrl: 'app/contacts/contact-user-list.html',
        controllerAs: 'contactUserList',
        controller: ['userService', ContactUserListController],
        bindings: {
            contact: '='
        }
    });
 
    function ContactUserListController(userService) {
 
        var vm = this;
 
        vm.userList = userService.getUserList();
        vm.userDropDown = function (container, options) {
            var editor = $('<input kendo-drop-down-list required k-data-text-field="\'userName\'" k-data-value-field="\'userID\'" k-data-source="contactUserList.userList" data-bind="value:' + options.field + '"/>')
            .appendTo(container);
        };
 
        vm.userGridOptions = function () {
            return {
                dataSource: vm.userContactsData(),
                toolbar: ["create"],
                editable: true,
                columns: [
                    { field: "user", title: "Counselor3", editor: vm.userDropDown, template: "#=user.userName#" },
                    { command: "destroy", title: " ", width: "90px" }
                ]
            };
        };
 
        vm.userContactsData = function () {
            var dataSource = new kendo.data.DataSource({
                data: vm.contact ? vm.contact.userContacts : null,
                autoSync: true,
                schema: {
                    model: {
                        id: "userContactID",
                        fields: {
                            userContactID: { defaultValue: 0 },
                            userID: { defaultValue: 0 },
                            contactID: { defaultValue: vm.contact ? vm.contact.contactID : 0 },
                            user: { defaultValue: { userID: 1, userName: "Administrator", userRole: "admin" } }
                        }
                    }
                }
            });
            return dataSource;
        };
 
    }
 
})();

Finally, userService.getUserList():

function getUserList() {
    if (!svc.userData) {
        svc.userData = new kendo.data.DataSource({
            type: "webapi",
            transport: {
                read: "../api/users/",
                cache: "inmemory"
            },
            schema: {
                data: "data",
                total: "total",
                errors: "errors"
            }
        });
    }
 
    return svc.userData;
}

Joel
Top achievements
Rank 1
Iron
 answered on 04 Apr 2016
3 answers
117 views
Do you have a sample mobile Kendo web app that uses ServiceWorker (http://www.html5rocks.com/en/tutorials/service-worker/introduction/)?
Petyo
Telerik team
 answered on 25 Mar 2016
5 answers
65 views
How can I optimize the performance of the combobox with datasourse = 2.5k items? Data entry noticeable delay, java script blocks in the browser search time elements
Venelin
Telerik team
 answered on 17 Mar 2016
1 answer
86 views

Hi,

VS 2015, Cordova, Kendo UI Core v2015.3.930, AngularJS v1.5.0, ngCordova v0.1.23-alpha

I'm trying to get a drawer working with remote views, but my angular controller bound to app/views/settings.html won't fire:

index.html:

    <!-- application drawer and contents -->
    <div data-role="drawer" id="appDrawer" style="width: 270px" data-title="Navigation" data-ng-controller="drawerController as vm">
        <div data-role="header">
            <div data-role="navbar">
                <span data-role="view-title"></span>
            </div>
        </div>
        <ul data-role="listview">
            <li>
                <a href="app/views/settings.html">Remote Settings</a>
            </li>
            <li><a href="#internSettings">Intern Settings</a></li>
        </ul>
    </div>

<div data-role="view" data-title="InternSettings" data-layout="main" id="internSettings" data-ng-controller="settingsController as vm">
  <h1 data-bind="html: title"></h1>
    <h1>{{vm.helloMsg}}</h1>
</div>

app/views/settings.html:

<div data-role="view" data-title="Settings" data-layout="main" data-ng-controller="settingsController as vm">
  <h1 data-bind="html: title"></h1>
    <h1>{{vm.helloMsg}}</h1>
</div>

settingsController.js:

(function () {
    'use strict';

    function settingsController() {
        this.helloMsg = "Hello settingsController";
    }
    angular.module("iEmosApp.controllers").controller('settingsController', [settingsController]);
})();

When clicking on "Intern Settings" (using the view inside index.html), I see "Hello settingsController", so Angular is working.

But when clicking "Remote Settings" (using the remote view) I only see "{{vm.helloMsg}}"

How can I get the Angular controller to work in remote views?

Matthias
Top achievements
Rank 1
 answered on 16 Mar 2016
3 answers
243 views

Hi 

(1) We need to show free text column value in Grid column, it might contain spaces, carriage return kind of text also  to show in the grid column.

         Any default support for it.

(2) Is there any way that we can fix row hight for the grid giving some fix size.

 

Regards,

Hitesh Taneja

Boyan Dimitrov
Telerik team
 answered on 10 Mar 2016
9 answers
208 views

Hi I have a complex application based on ASP.NET MVC and Angular in which I am trying to evaluating the kendo ui scheduler. I'm loading my JS files with RequireJS. When I load kendo.ui.min I get an error in the application when it attempts to get "scripts/jquery.min.js", this not where jquery lives in my app.

 

Now I've specified in require that kendo cannot be loaded until jquery is loaded, and it is definitely already loaded. So why is kendo requesting jquery from a location that doesn't even exist?If I don't load the kendo library there is no erroneous jquery file call.

Matthew
Top achievements
Rank 1
 answered on 04 Mar 2016
5 answers
438 views

I have been battling an issue during my current ticket and the last several tickets I've worked on where I'm at now. I've only been here for about seven months now and we're a WebForms shop. But our recent adoption of Kendo UI (coupled with my ASP.NET MVC background) has forced me to adapt and manipulate the Page Life Cycle to mimic MVC, especially when retrieving JSON for the kendoChart and kendoGrid. I'm able to do my work but it's slow because I find myself combating the RadControls we use. 

The RadControl that is shown on every page is the RadMenu in the MasterPage. Just using the MasterPage results in most of my pure HTML5 becoming mangled by Telerik UI for ASP.NET AJAX.

 

For example, since MSIE doesn't support input[type="number"], I resorted to kendoNumericTextBox, but when that runs the ASP.NET AJAX client-side scripts transform my HTML and add classes that wreck the styling.

 

The two frameworks are definitely not compatible. Or at least they are semi-compatible.

 

I ended up dynamically adding the inputs in the ready() event, calling kendoNumericTextBox() on them, and then spawning off an interval to check when the rfdDecorated class gets added to them so I can remove the class from them and their siblings. It does work, but it's messy, and trying to get around the ASP.NET AJAX framework when using Kendo UI is a pain.

Any ideas on how to make this situation better? My initial thought was to get rid of the RadMenu altogether because that's definitely what is causing the issue. There's a kendoMenu that looks and feels pretty much exactly like the RadMenu does but with obviously a lot less overhead. But pitching that idea to management would not be very easy because I believe they're too comfortable with the RadControls.

This is a strategy question and any input would be greatly appreciated.

Marin Bratanov
Telerik team
 answered on 01 Mar 2016
1 answer
58 views

Has anyone had experience with integrating Kendo with Hot Towel Angular?

We are attempting it and we aren't having any luck.

Genady Sergeev
Telerik team
 answered on 05 Feb 2016
2 answers
46 views
Hello,
We are currently in a trial to evaluate the product for a project. We want to create a masked date input, but using the "angular way" which means no JQuery DOM manipulation.

We saw this article and is exactly what we need, but we are unable to reproduce it using just angular.

Please help.

Thanks in adavance
Viktor Tachev
Telerik team
 answered on 03 Feb 2016
4 answers
103 views

Hi forum,
I'm interested in the use of Kendo UI widgets the WebComponent way, and also supporting IE11+.
In Chrome, without loading the polyfills everything is pretty neat and straight forward.
The problem comes when I import the  webcomponents.js library. In both browsers I get the "white screen of death" i.e. white screen, no errors, no exceptions in the console. I import the polyfill as it should be - the first <script> tag on page.
Here is my set-up:
Kendo UI: 2016.1.112;
OS Name: Microsoft Windows 8.1 Enterprise
OS Version: 6.3.9600 N/A Build 9600
IE v11.0.9600.18098
IE update v11.0.25 (KB3100773)
Chrome v47.0.2526.111 m (64-bit)
jQuery v1.9.1
webcomponents.js v0.7.20

Alexander Popov
Telerik team
 answered on 26 Jan 2016
Narrow your results
Selected tags
Tags
+? more
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?