kendo-labs / angular-kendo Goto Github PK

It appears that applying a function for the "editor" on a kendo grid column is getting stripped. Any suggestions on how to workaround or fix?

It looks like it's because it's using jquery's "data()" function.

Hi,

Our customer would like to see a custom column menu that is shown only once instead of in each column header.
At this moment we can display only the filter in the column menu and not the sorting properties nor the show/hide column properties by only setting k-filterable='true' (k-column-menu should be 'false'). But there's no way to centralize column hide/sort functionality on 1 place...

Best regards,
Glenn

I'm confused about how angular (or kendo) uses the DropDownList optionLabel property.

In the main demo (http://kendo-labs.github.io/angular-kendo/#/) the Dropdownlist starts with the "Select a thing" option in some cases and with the "Thing 1" option in other cases, and the configuration is quite similar.

I don't know if I missing something or something is wrong here

I am using kendo grid using angular libraries. We are using same html fragment to display grid for different menu options like items, customers etc..

1. Grid Defined in html using attributes - k-data-source="dataSource" k-columns="columns"
2. Controller: calls webservice to get our generalized schema and from this schema, I generate dataSource & columns definitions.
3. grid displays fine when it runs for first menu options.
4. When user selects second menu option, it shows following error:

kendoGrid's kColumns attribute resolved to undefined. Maybe you meant to use a string literal like: 'columns'?

Any idea or suggestion?

Thanks in advance.

There seem to be several versions of the angular-kendo.js file floating around. What is the recommended path at this point in time? Should I be using the cleanup branch? The master branch?

More than happy to contribute once I can get something working and get a feel for where this project is headed.

The documentation viewable at http://kendo-labs.github.io/angular-kendo/, which is linked to from README.md, isn't showing the latest version of the documentation. This means that none of the examples there use the new approach introduced two months ago. The documentation in the repository is however up to date, so it should hopefully be easy for you to make that available on your GitHub Pages site to reduce confusion when people try to get started with angular-kendo.

I have an example were the custom grid command does not fire: http://plnkr.co/edit/EYTpLs?p=preview
Has anyone experienced a similar issue?

I'm able to create a kendo template for a cell of a grid. But this is kendo style.
Is it possible to create angular-style templates with expressions in format {{ expression}} instead of #= expression # ?
Will it ever become possible?

When you use a kendo directive in the template of another directive, the datasource binding does not work correctly. Here is a plunker that shows the issue: http://plnkr.co/edit/cYUAkdkRr3ox0SFr82n7?p=preview

The reason appears to be the following code in angular-kendo kDataSource controller:

// Keep the element's data up-to-date with changes.
// Set $kendoDataSource in the element's data. 3rd parties can define their own dataSource creation
// directive and provide this data on the element.
$element.data('$kendoDataSource', toDataSource($scope.$eval($attrs.kDataSource)));

$scope.$watch($attrs.kDataSource, function (newDS, oldDS) {
    if (newDS !== oldDS) {
        $element.data('$kendoDataSource', toDataSource(newDS));
    }
});

I believe what is happening is that the initial eval of the kDataSource attribute fails because the link function of my custom directive has not yet run, which is where the datasource is created. Then when the watch gets triggered, for some reason newDS is equal to oldDS (not sure why this is the case).

I believe I know why the if statement is there, as the Angular docs say this about $watch:

"After a watcher is registered with the scope, the listener fn is called asynchronously (via $evalAsync) to initialize the watcher. In rare cases, this is undesirable because the listener is called when the result of watchExpression didn't change. To detect this scenario within the listener fn, you can compare the newVal and oldVal. If these two values are identical (===) then the listener was called due to initialization."

Since we are watching anyways, why not just get rid of the eval statement and the if statement in the watch? This seems like it should work for all cases.

Thoughts?

Hi,

just wanted to mention that you should do a safe $apply() in line 95 and 195 respectively.
That is to prevent running $apply() when there is already one running.

You should do it this way: https://coderwall.com/p/ngisma

I would like to add a custom toolbar action to the grid. Now I'm using the default one 'create'. But I would like to set defaults for the newly added row on add.

An interception method of the default 'create' button clicked is also a possiblity.So advice to do that is also welcome!

Can you provide a working autocomplete example.

Just looking for a simple static list defined in a controller and binding to the textbox.

Here is a presetup plunker if it helps. http://plnkr.co/edit/mUMXAntg0ERWgKepwlff?p=preview

Hi there,

I'm trying out this angular-kendo integration, but I have an editable grid and when edits are made to the grid they do not propagate back to the Model.
Is this supposed to work correctly or a known issue?

I would love to use this angular-kendo combination but without this functionality it is unfortunately not going to be possible :-(

Interestingly the knockout-kendo integration has the same problem, so it is some limitation of the grid itself? It does however work with native kendo MVVM.

Many thanks in advance,
Dave

I'm trying to figure out how we can build upon these directives you've written.

I feel the directives are good for initializing the control but doesn't work well if results we return have angularjs templates that need scope. It feels as though the controls are push only (data) when we need bidirectional messaging to change ui elements also.

Writing the directive myself I've had success with methods like:

        $compile(grid.find(".toolbar"))(scope);

            dataBound: function (e) {
                var ul = this.ul;

                safeApply(scope, function () {
                    $compile(ul)(scope);
                });
            }

Before continuing down this road again I would like to hear how you approach this problem in a generalized way if possible.

Sample Project

<script>
    function MyLocalFunction($scope, $http) {
        $scope.Test = "testing";

        $scope.Data = {
            expandMode: "single",
            dataSource: [{
                text: "Case Information",
                expanded: false,
                contentUrl: '/FileAndServeModule/Case/TabCaseInformation'
                }, {
                    text: "Party Information",
                    expanded: true,
                    encoded: true,
                    content: "<div ng-include='/FileAndServeModule/Case/TabCaseInformation' />"

                }, {
                    text: "Filings"
                }, {
                    text: "Service Contracts"
                }, {
                    text: "Fees"
                }]
        };

        $scope.Activate = function (e) {
            console.log('Activate' + e);
        };
        $scope.Collapse = function (e) {
            console.log('Collapse' + e);
        };
        $scope.ContentLoad = function (e) {
            console.log('ContentLoad' + e);
        };
        $scope.Expand = function (e) {
            console.log('Expand' + e);
        };
        $scope.Select = function (e) {
            console.log('Select' + e);
        };
        $scope.Error = function (e) {
            console.log('Error' + e);
        };

    }
</script>

<div ng-controller="MyLocalFunction">
    <h1>{{Test}}</h1>
    <ul kendo-panel-bar k-options="Data"
        k-on-activate="Activate(kendoEvent)"
        k-on-collapse="Collapse(kendoEvent)"
        k-on-contentLoad="ContentLoad(kendoEvent)"
        k-on-error="Error(kendoEvent)"
        k-on-expand="Expand(kendoEvent)"
        k-on-select="Select(kendoEvent)">
    </ul>
</div>

1. How would you render ng-include or contentUrl that have expressions that need angular scope to evaluate (see sample). When kendo changes the dom - the new html doesn't automatically compile the scope. So angularjs expressions aren't rendered without manually compiling. - can kendo help in getting this hook built in to all controls?

2. How do you extend behavior on these controls. two way binding with panel bar functionality. As user changes values in scope I may want to disable a panel, expand/close a panel. I don't like giving my element's id's anymore. I was thinking of creating a directive that requires kendo-panel-bar controller - this can guarantee that my directive is on the same element and i can grab the instance $(element).data("kendoPanelBar").collapse( $(".k-link", $(element)) );

Example: panel-bar-ext-fileserve (although haven't done it yet although similar to k-on- directives)

<ul kendo-panel-bar k-options="Data"
    ext-panel-bar-fileserve='toConsiderScopeData'>
</ul>

Why the registry entry is named "angular-kendo-ui" and not same as the repository name.
I've to search every time via the bower repo to be sure what is the correct name because at first I always type "angular-kendo".

So open discussion:

Rename "angular-kendo-ui" to "angular-kendo" at bower registry.

When using 'kendo-menu' on my screen, I first see the 'raw' unsorted list element which then changes to the actual menu layout. Is there a way to come around this flickering?

I try to update a unbound column in the grid when a cell-value of this row has changed. I don't want to save the updated data to the datasource. I only want to show the calculated data in the unbound column.

Grid definition:

Datasource definition:

Column definition (the calculation works on data load right, but additional it should work at row update):

Thank you!

See an example here: http://plnkr.co/edit/w3LfZQu2nFv12qhIUKy2

The grid binds to the initial value of the underlying array during the contruction of the grid. And I suspect that the kendo-grid directive is more than likely creating a kendoDataSource under the covers to support grid binding.

I've tried declaring a k-rebind attribute, but this did not seem to work.

I understand the Kendo UI is intimately aware of the Kendo MVVM binding architecture, but it would be sweet if these directives allowed the Kendo UI to bind directly to Angular data.

Using the below in IE9 I have to double click somewhere else on the screen or resize the screen for the {{savedDateOfEvent | date}} - chosen to update. Works fine in FireFox

HTML
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="TestApp">
<head>
<title>Test</title>
<link href="styles/kendo.bootstrap.min.css" rel="stylesheet" />
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/angular.js"></script>
<script src="js/kendo.web.min.js"></script>
<script src="js/underscore-min.js"></script>
<script src="js/angular-kendo.js"></script>
<script src="js/app.js"></script>
<script src="js/TestCtrl.js"></script>
</head>
<body>
<div ng-controller="TestCtrl">
<div kendo-calendar ng-model="dateOfEvent" ng-click="saveDate()"></div>
<br/>
<span ng-show="dateOfEvent">{{savedDateOfEvent | date}} - chosen</span>
<br/>
<ul kendo-drop-down-list kendo-source="things" ng-model="choice" ng-bind="text"></ul>
<br/>
<span ng-show="choice">{{choice.text}} was chosen!</span>

</div>

</body>

</html>

TestCtrl.js

function TestCtrl($scope) {
$scope.things = [
{ text: 'Foo' },
{ text: 'Bar' },
{ text: 'Kazoo' }];

$scope.saveDate = function() {
    $scope.savedDateOfEvent =  $scope.dateOfEvent;
};

}

I have tried setting the format value to "{0: yyyy-MM-dd HH:mm:ss}" for a column date field in kendo ui grid using the "k-options" property but it seems to be ignored - the date is displayed unformatted e.g. "2013-06-21T06:58:40.3700000"

When you have a kendo dropDownList defined that binds to a model property using ng-model, the drop down does not show the correct value when it starts. Once you change the value in the dropdownlist then it seems to sync up with the model however.

You can see the behavior in this plunk: http://plnkr.co/edit/zN9XcyPSa1HuK2asKh9P

I have a feeling this is a sequence issue as when the datasource uses an asynchronous call it seems to work. But if the datasource already has data, it doesn't.

Make angular-kendo available as a nuget package

Since the grid expects the data in the columns array to be JSON encoded, you have to pass the function for a custom command as a string. The kendo directive in angular-kendo.js does not convert the strings back to a function, which results in the following error when clicking on the button in the grid that is supposed to fire your custom command: TypeError: handleObj.handler.apply is not a function.

when using kendo-grid if you define data up front grid will display data. If you want to delay loading the data (ie fetch from file, server etc) the grid doesn't render/re-bind. I created a plunker to demonstrate, hopefully I'm just doing something wrong.

http://plnkr.co/edit/MUbU7oq8lmvmcDNviGGp?p=preview

There are so many examples related to angular-kendo and I think it is difficult to determine if they are using the latest version or an older version.
If the angular-kendo build files have the current version number as a top header it would help a lot with this issue.

I'm using a translation library (i18next) to do front-end translations.
When using the grid I specify the title property of each column to give it an internationalized value. The value of the title property is a function call that returns the translated value based on the current language.

This works but when I do a language switch the titles in the grid aren't updated. Though in the column definitions, the value of 'title' is changed to the new translated value. Should I rerender the grid or something? How can I achieve that?

I have a viewModel that's a singleton that gets passed into my controller. when I set model.payDate and navigate away and come back, I can see that model.payDate has the same value but kendo control does not get the binding. If I remove the kendo date attribute it work as expected. This isn't just for kendo date but any controls that are using the kendo attributes

angular.module("viewModels", []) // view models
.value("viewVM2", new viewVM2())
.value("viewVM1", new viewVM1())

var appMod = (<any>angular).module("app", ["services", "viewModels", "kendo.directives"], ["$routeProvider", "$locationProvider",
    function ($routeProvider: ng.IRouteProvider, $locationProvider: ng.ILocationProvider) {
        $routeProvider
            .when('/view1', {
                templateUrl: '/view1',
                controller: <any[]>['$scope', 'viewVM1', view1Ctrl]
            }).when('/view2', {
                templateUrl: '/view2',
                controller: <any[]>['$scope', 'viewVM2', view2Ctrl],
            }).otherwise({ redirectTo: "/view1" });

        $locationProvider.html5Mode(true);
    }]);

function view1Ctrl($scope, model) {
_super.call(this, $scope);
$scope.model = model;

            }

We are using kendo-angular library & can't call angular js function in column-template, any idea?

columnDefinition = {field: schemaItem.name, sortable: schemaItem.isSortable, template:'

Here is plunker example: http://plnkr.co/edit/ybWmV4?p=preview

Thanks

We need integration with $http. Not sure whether we can do this on the DataSource level - but we need $http's pipeline to implement e.g. authN & authZ once.

Currently angular-kendo code uses underscore utility functions to get list of registered kendo widgets through jQuery.fn. While underscore is very popular and widely used library, this puts a hard dependency on underscore and it becomes mandatory for applications to include it even if they are not using it.
The underscore utility functions can be easily replaced by a simple for-in loop to iterate over jQuery.fn properties. It can be seen in action in my plunk.

A very powerful feature of Kendo UI is its customizability. An important part of this are the templates: the default HTML of certain (parts of) controls can be replaced by specifying your own custom template.

A good example of this is the Grid control. The Grid has the following templates:

• altRowTemplate
• columns.footerTemplate
• columns.groupHeaderTemplate
• columns.groupFooterTemplate
• columns.headerTemplate
• columns.template
• detailTemplate
• editable.template
• rowTemplate
• toolbar.template

Can these options already be used, in a way which makes sense, when you are using Angular-Kendo?
I suppose that setting them using templates as string would work, but you don't want to specify templates inline in the HTML attribute, or in your controller.

Would it be possible to support using Angular templates in these cases, so you could use ng-click etc? This would be a very nice feature.
I think, however, that the code for this would have to be in Kendo UI itself. This is because the templates would have to be $compiled with the right $scope. I doubt whether it would be possible to add this feature from 'outside' of Kendo UI (via Angular-Kendo).

Let me know what your thoughts are about this :).

Problem is with way this is architected, directives are added to element, but element is reparented with new structure when widget is initialized. As a result, the directives are applied to the original target and not the out structure the widget created.

The problem this creates is if you apply kendo-drop-down-list to a select element AND apply ng-show to that same select element, then ng-show will not do what the developer would expect. The ng-show will continue to be bound to the select, but kendo will re-wrap that select and reparent it with a new structure that creates the drop down elements that the user sees on the DOM. The ng-show directive is now bound to the hidden select element instead of the new parent which contains it. Setting ng-show to a false value will not hide the drop down which kendo created. In this case, there is no way for the developer to leverage other directives as intended because they don't have access to the new parent structure created.

ng-show is only 1 example, the same would hold true to most other directives.

I'm trying to get this to work with the new multi-select widget and am not successful.

My HTML looks like:

<select name='states' ng-model="states" multiple data-placeholder="Select State" kendo-multi-select >
    <option value=""></option>
    <option value="AL">AL</option>
    <option value="AK">AK</option>
    ...
</select>

The model has an array called "states" and if I pre-populate it with a state value, the control looks fine. Unfortunately, the interaction with the control is what is failing. I can remove an item, but not add another one.

I'm using the latest code from the cleanup branch. Any thoughts?

Hello,

I have a multiselect and a dropdownlist bound to an object array in my scope using k-data-source. The arrays is retrieved using an $http.get method.
If I run the sample, both are not filled with the data. If I set a breakpoint in the datasource watch, then it works. Am I missing something?

http://plnkr.co/edit/p6OcKAnDHiPMoyXSCfGD?p=preview

I'm working on a search scenario where the initial state of the dataSource for the Kendo grid is an empty array. I'm setting the dataSource to a member of the $scope. When I execute the search and get back the results, I set them to the $scope member that is also set as the dataSource. The grid seems to do nothing though. The only reliable way I've found to update the grid is to re-initialize it using a jQuery selector in the XHR callback function. Since I'm using AngularJS, you can understand this is less than ideal since I'm essentially doing DOM manipulation in the controller. I can get the grid to bind to the data if I have the grid call the service but since this is a search, user interaction is required before calling the service to get the data. What am I missing?

Hi,

Is it possible to add a checkbox in front of each row. When checking the checbox the row is selected/unselected.
These checkboxes should appear in a new column and in the header of the column should be checkbox that can selected/unselect all checkboxes at once.

It would be great if enabling a property would enable this behaviour.
In the meantime, canI implement this behaviour by myself? How can I do this?

Best regards,
Glenn

Samples for all of the Kendo UI Web widgets: http://www.kendoui.com/web/widgets.aspx

It seems there is something very wrong with the numeric textbox in angular. Once you click on it to edit the value the textbox disappears!

Here's a plunk showing the problem: http://plnkr.co/edit/aOSHex7ZOjVG10hXFWzi?p=preview

We try to implement quite a common use case:
Editing a cell in a grid and get notified in an event when the data has changed (upon onBlur).

We have it running with ng-grid but cannot get it to work with KendoUI grid.

Hi, I am using the latest version of angular-kendo. I can do everything except use the reference to the widget. I need to refresh a sparkline. However when I have the following def (jade):

div(kendo-sparkline="spark1",k-options="offerBreakdownOptions")

This:

$scope.spark1.refresh();

is causing the following:

TypeError: Cannot call method 'refresh' of undefined

Hey guys,

I'm using the kendo grid with server side results. Inside these results I have the following for one of the fields: "<a href='javascript:void(0);' ng-click='delete(10)'>Delete this item</a>"

It never seems to fire, is there a way to get this working? It works fine if I manually put it in the HTML on the partial.

Cheers,
Ben

Hello,

I've got a Form with a reset button. The reset simply clears the model.
As you can see in this plunkr(http://plnkr.co/edit/kQrTLqxG2Hs8XRbQ5qxy?p=preview), the widget values are not reset. The model is cleared but the date picker still contains the old value. To clear the widget, the value function(angular-kendo.js line 207) should be called with an empty string and not and undefined value. I did a little change (angular-kendo.js line 200-206) and it clears the widget as expected.

Am i doing it wrong or is it correct?

Thanks

I recently tried to install this via bower

bower install --save https://github.com/kendo-labs/angular-kendo.git

and received the following mismatch warning.

bower cloning https://github.com/kendo-labs/angular-kendo.git
bower caching https://github.com/kendo-labs/angular-kendo.git
bower fetching angular-kendo
bower checking out angular-kendo#0.5.0
bower copying C:\Users\{redacted}\AppData\Roaming\bower\cache\angular-kendo\8fe8f2ca59397455da5c427a51654ba0
mismatch The version specified in the bower.json of package angular-kendo mismatches the tag (0.5.0 vs 0.0.9)
mismatch You should report this problem to the package author
bower installing angular-kendo#0.5.0

To be honest, I'm not exactly sure what it's reporting. Ideally though it would be good to see this on the bower registry without having to specify the git path.

Thoughts?

Currently my team is at the start of a project to create a big web application. The first part of the project is aimed at creating a webapplication aimed primarily at desktop usage.
At a later stage in the project we want to create a separate mobile version of this application.

We really want to use both AngularJS (modularity, maintainability etc) and Kendo UI Web / Mobile (nice user controls) for this project.
Now it would be really cool if we could use Kendo UI Web + AngularJS for the desktop version and AngularJS + Kendo UI Mobile for the mobile version.

This way a lot of code could be shared between the 2 versions:

• Probably all services and filters.
• Maybe some controllers.

It looks like angular-kendo currently doesn't support Kendo UI Mobile. Is this correct?
If so, are there any plans for adding support for Kendo UI Moible?

The kendo docs mention that an object can be passed as value of the pageable attribut: http://docs.kendoui.com/api/web/grid#configuration-pageable

If I do so, a pager appears but paging doesn't work. It shows 'NaN - NaN of 2' instead of '1-1 of 2' for example.
It seems that pageSize should be defined in the dataSource object to make it work.

Please check http://plnkr.co/edit/CYbX1sSaDtLyzMYQWGBl?p=preview for an example
Not sure if this is an angular-kendo or a general kendo issue though.

The DropDownList directive is not working when combined with ng-options or even when using ng-repeat on an options element. This is using the cleanup branch code. The resulting widget is rendered, but empty.

Hey guys,

I've followed your installation instructions, but I can't seem to get any of the kendo elements to work at all.

In one of my controllers, I have the following:

function UserListCtrl($scope) {
//datasource for kendoui interface
$scope.model = kendo.observable({
users_kendo: new kendo.data.DataSource({
transport: {
read: "/manageUsers/administration/list/",
dataType: "json"
},
pageSize: 5
})
});
}

I've included all the neccessary scripts, and have grabbed the latest version.

Any ideas? I have that datasource working fine outside of an angularjs app with Kendo, but I can't even get a calender to work using your js.

I have no errors in the console, just nothing seems to happen.

Many thanks,
Sn0rcha

Referring to #34 I'm opening a separate issue for my question:

Is it already possible to use editors besides templates?
I want to be able to use a simple angular html snippet instead of doing something like in the example: http://demos.kendoui.com/web/grid/editing-custom.html

There they use .kendoDropDownList but I want to use a dropdownlist specified in HTML.

Does someone have an example of how to do this the nice way?

We should provide a way to decorate the options object before the kendo widget is applied on the element. This will allow us to extend the kendo directives and for people to define their own directives to customize the kendo ones (like for providing widget templates outside of the controllers).

For example, if someone wants to define a kendoDropDownList that displays 2 columns in the list, he could define his own attributes:

<div kendo-drop-down-list two-columns column-1-field="name" column-2-field="email" ...>

And this would render a dropdown list where the list items would show a person's full name and email.

The two-columns directive would decorate the options object passed to the kendo widget and add a "template" property to it that would contain the markup to display the 2 columns.