I'm trying to wrap a Kendo grid in a directive that would allow other components to call my new directive and pass in a data-source and the template for the drop down. This way all components will use the same format and layout for the main grid, but different templates for the drop down.
I've successfully passed the data-source through to the kendo grid, however when I use ng-transclude to pass the template in for the drop down on the rows I get an error (Error: [ngTransclude:orphan]). I notice that the <ng-transclude></ng-transclude> in my directives html is getting passed through to the Kendo grid and is then orphaned now that it doesn't have an associated directive.
Here is some test code. I stripped out all of the dependent items.
<!-- accordionGrid.html --> <div> <kendo-grid options="gridOptions"> <ng-transclude></ng-transclude> </kendo-grid></div>
// accordionGrid-directive.js function accordionGridDirective() {return { controller: 'accordionGridController', replace: true, restrict: 'E', templateUrl: 'templates/accordionGrid.html', transclude: true, scope: { source: '=', columns: '=' } };}angular.module('accordionGrid.accordionGridDirective', ['kendo.directives']) .directive('accordionGrid', [accordionGridDirective]);
//testController.html <accordion-grid data-source="data" columns="columns"> <div k-detail-template> <kendo-tabstrip> <ul> <li class="k-state-active">Orders</li> <li>Information</li> </ul> <div> <div kendo-grid k-options="detailGridOptions(dataItem)"></div> </div> <div> <ul> <li>Information:</li> <li>Other Kendo Tab</li> </ul> </div> </kendo-tabstrip> </div> </accordion-grid>function testController($scope) { // Init scope variables.$scope.data = new kendo.data.DataSource({ data: [ { text: 'Foo', id: 1 }, { text: 'Bar', id: 2 }, { text: 'Baz', id: 3 } ] }); $scope.columns = [ { field: 'text', title: 'Text' }, { field: 'id', title: 'Id' } ]; // Init scope functions. $scope.detailGridOptions = function(dataItem){ return { dataSource:[ { text: dataItem.text, id: dataItem.id }, { text: 'blah', id: 4 }, { text: 'blah2', id: 5 } ], filterable: true, pageable: false, groupable: false, sortable: true, scrollable:{ virtual: true }, selectable: 'row', columns:[ { field: 'text', title: 'Text' }, { field: 'id', title: 'Id' } ] }; }; } angular.module('testApp.testController', ['kendo.directives']) .controller('testController', ['$scope', testController]);// test-directive.js function testDirective() { return { controller: 'testController', replace: true, restrict: 'EA', // Path must be relative to index.html. templateUrl: 'templates/testController.html', scope: { } };}angular.module('testApp.testDirective', ['kendo.directives']) .directive('testDirective', [testDirective]);Hi,
I have started to evaluate kendo ui for a project I'm working on. I have problems getting multiple select working with drag and drop.
After searching I have come to a solution that works for Chrome(tested in version 41) and Firefox(tested in version 36) but NOT in IE (tested in version 11)
(reference http://stackoverflow.com/questions/29502643/drag-and-drop-row-on-kendoui-grid-with-angularjs )
The goal is to be able to select multiple rows in a grid, and drag the selected rows to a treeview.
A test can be found here:
http://dojo.telerik.com/IHUYa/3
How can I get this to work with IE?
In Chrome and Firefox, the "area selector" sometimes makes the drag fail as well. Is it possible to disable area-selection when dragging(drag start) from a already selected item somehow?
This is a must have for our application any help will be appreciated.
Best regards
Erik Mellegård
I want to initialize my grid from an existing table AND I want to have aggregates computed for me and shown on the table as well. How can I do that? All the Demos show aggregates using a data source.
Thanks,
--John
Hi,
I am using the slotTemplate to display preferred event types by color. I have the <script> version working, but I am wanting to use an angularjs directive to handle the javascript logic instead. I have tried the obvious ways:
slotTemplate: '<directive-element></directive-element>' and slotTemplate: '<div directive-attribute></div>'
It seems to ignore it.
Is there anyway for me to avoid <script> or literal strings containing both js and html?
Thanks,

Hello everyone! I have a few custom grid filters that I've been using in my code that broke when I updated to the newest release of Kendo UI (2015.1.429). By broken, I mean that they don't load the optionLabel immediately and they are squashed on load. (See attached screenshot.) If I click on the dropdown, it does still load the information and the optionLabel shows, as well as it becomes the correct size, just not on load. Below is the code (js) I use for a State Filter and the grid it goes with:
$(document).ready(function () { function stateFilter(element) { element.kendoDropDownList({ dataTextField: "Name", dataValueField: "Name", dataSource: new kendo.data.DataSource({ schema: { model: { id: "StateId" } }, transport: { read: { url: "/Helper/GetStates", dataType: "json" } } }), optionLabel: "--Select Value--" }); } $("#CompaniesGrid").kendoGrid({ dataSource: new kendo.data.DataSource({ schema: { model: { id: "CompanyId", fields: { IsActive: { type: "boolean" } } } }, transport: { read: { url: "/Company/GetCompanies", dataType: "json" } }, filter: { field: "IsActive", operator: "eq", value: true }, pageSize: 100 }), sortable: true, pageable: true, scrollable: false, columns: [ { field: "Name", title: "Company", template: "<a href='/Company/Detail/#:CompanyId#'>#:Name#</a>" }, { field: "City", title: "City" }, { field: "State", title: "State", width: "90px", filterable: { ui: stateFilter, operators: { string: { eq: "Is equal to" } } } }, { field: "Phone", title: "Phone Number", filterable: false }, { field: "PrimaryContactDisplay", title: "Primary Contact", template: "#if(PrimaryContactId == null){##}else{# <a href='/Contact/Detail/#:PrimaryContactId#'>#:PrimaryContactDisplay#</a> #}#" }, { field: "IsActive", title: "Active", template: "#: IsActive ? 'Yes' : 'No' #", width: "90px" }], filterable: { extra: false, messages: { isTrue: "Yes", isFalse: "No" } } });});Note that there are two custom filters on this page: The Site Filter and the Status Filter. The Status Filter works just fine. It's just the Site Filter (and all of the other filters I use that are used similarly.) Any help here would be greatly appreciated. It's a small thing, but it bugs me. (See what I did there? :) )
Thanks!
Anna
Our app is fully localized/globalized, supporting (some of the few) en-US and de-DE.
In our DB, some of the currency values are stored in USD, some of the currency values are stored as Euros. Obviously, we want to keep the currency straight between the two - formatting as USD, when in fact it is Euros, would be a big mistake.
So, following this example, we can format for USD/Euros, given the proper locale.
My issue is: Given data (12345.67) in the DB in Euros and the user logged into the en-US locale, I want to have the Euro symbol show up properly (including location of symbol relative to numeric value) and the commas/decimals to be proper as well (i.e. 12,345.67 €). And the reverse, given data (98765.43) in the DB in USD and the user logged into de-DE, I want to have the USD symbol show up and the commas/decimals to be proper as well (i.e. $ 98.765,43).
How can I achieve this?
Thanks,
--Ed
var data1 = [{OrderId: 1, CreateDate: "/Date(1412228341970)/"}, {OrderId: 2, CreateDate: "/Date(1412233734310)/"}] $(document).ready(function() { $("#grid").kendoGrid({ dataSource: { data: data1, schema: { model: { fields: { OrderId: { type: "number" }, CreateDate: { type: "date", format: "{0:dd/MM/yyyy}",}, } } } }, height: 540, sortable: true, reorderable: true, groupable: true, resizable: true, filterable: true, columnMenu: true, pageable: true, columns: [ { field: "OrderId", title: "Order Id", }, { field: "CreateDate", title: "CreateDate", format: "{0:dd/MM/yyyy}", type: "date", } ] }); }); var updateGrid = function() { $("#grid").data("kendoGrid").dataSource.data(data1) }