{"action":"created","issue":{"url":"https://api.github.com/repos/Sitefinity/feather/issues/1815","labels_url":"https://api.github.com/repos/Sitefinity/feather/issues/1815/labels{/name}","comments_url":"https://api.github.com/repos/Sitefinity/feather/issues/1815/comments","events_url":"https://api.github.com/repos/Sitefinity/feather/issues/1815/events","html_url":"https://github.com/Sitefinity/feather/issues/1815","id":80071004,"number":1815,"title":"Unable to get Kend UI Grid In Widget Designer Working with Angular Directives","user":{"login":"MerrittMelker","id":11414229,"avatar_url":"https://avatars.githubusercontent.com/u/11414229?v=3","gravatar_id":"","url":"https://api.github.com/users/MerrittMelker","html_url":"https://github.com/MerrittMelker","followers_url":"https://api.github.com/users/MerrittMelker/followers","following_url":"https://api.github.com/users/MerrittMelker/following{/other_user}","gists_url":"https://api.github.com/users/MerrittMelker/gists{/gist_id}","starred_url":"https://api.github.com/users/MerrittMelker/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/MerrittMelker/subscriptions","organizations_url":"https://api.github.com/users/MerrittMelker/orgs","repos_url":"https://api.github.com/users/MerrittMelker/repos","events_url":"https://api.github.com/users/MerrittMelker/events{/privacy}","received_events_url":"https://api.github.com/users/MerrittMelker/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2015-05-24T06:27:20Z","updated_at":"2015-05-24T07:39:22Z","closed_at":"2015-05-24T07:39:22Z","body":"I'm super familiar with using kendo ui with angular, but your designers doesn't seem to work with the kendo grid directives at all. Here's a sample that doesn't work:\r\n\r\n**DesignerView.MyGrid.cshtml**\r\n```html\r\n<div kendo-grid\r\n     k-data-source=\"gridData\"\r\n     k-columns=\"gridColumns\"\r\n     k-selectable=\"true\"\r\n     k-on-change=\"selected = data\"></div>\r\n ```\r\n\r\nand here's the angular module, \r\n**designerview-mygrid.js** :\r\n\r\n```javascript\r\n(function ($) {\r\n    //var designerModule = angular.module('designer', ['kendo.directives']);\r\n    var designerModule = angular.module('designer');\r\n \r\n    //This is basic controller for the \"ManageItems\" designer view.\r\n    designerModule.controller('MyGridCtrl', ['$scope', 'propertyService', function ($scope, propertyService) {\r\n        $scope.feedback.showLoadingIndicator = true;\r\n \r\n        $scope.gridData = new kendo.data.ObservableArray([\r\n          { artist: \"Pink Floyd\", track: \"The dark side of the Moon\" },\r\n          { artist: \"The Beatles\", track: \"I've just seen a face\" },\r\n          { artist: \"Queen\", track: \"Innuendo\" }\r\n        ]);\r\n        $scope.gridColumns = [\r\n          { field: \"artist\", title: \"Artist\" },\r\n          { field: \"track\", title: \"Track\" }\r\n        ];\r\n \r\n        //Makes call to the controlPropertyService to get the properties for the widgets.\r\n        propertyService.get()\r\n            .then(function (data) {\r\n                if (data) {\r\n                    $scope.properties = propertyService.toAssociativeArray(data.Items);\r\n                }\r\n            },\r\n            function (data) {\r\n                $scope.feedback.showError = true;\r\n                if (data)\r\n                    $scope.feedback.errorMessage = data.Detail;\r\n            })\r\n            .finally(function () {\r\n                $scope.feedback.showLoadingIndicator = false;\r\n            });\r\n    }]);\r\n})(jQuery);\r\n```\r\n\r\nAnother thing: I tried to just paste this on the designer view:\r\n\r\n```html\r\n<div id=\"grid\"></div>\r\n<script>\r\n    $(\"#grid\").kendoGrid({\r\n        columns: [\r\n          { field: \"name\" },\r\n          { field: \"age\" }\r\n        ],\r\n        dataSource: [\r\n          { name: \"Jane Doe\", age: 30 },\r\n          { name: \"John Doe\", age: 33 }\r\n        ],\r\n        sortable: true\r\n    });\r\n</script>\r\n```\r\n\r\nAnd it works for the first load of the widget designer view; but once u close the window each subsequent view fails to find .kendoGrid.\r\n\r\nSo I added\r\n\r\n```html\r\n@using Telerik.Sitefinity.Frontend.Mvc.Helpers\r\n@using Telerik.Sitefinity.Modules.Pages\r\n\r\n@Html.Script(ScriptRef.KendoAll)\r\n\r\n...\r\n```\r\nAnd it seems to work. Why?"},"comment":{"url":"https://api.github.com/repos/Sitefinity/feather/issues/comments/104988754","html_url":"https://github.com/Sitefinity/feather/issues/1815#issuecomment-104988754","issue_url":"https://api.github.com/repos/Sitefinity/feather/issues/1815","id":104988754,"user":{"login":"MerrittMelker","id":11414229,"avatar_url":"https://avatars.githubusercontent.com/u/11414229?v=3","gravatar_id":"","url":"https://api.github.com/users/MerrittMelker","html_url":"https://github.com/MerrittMelker","followers_url":"https://api.github.com/users/MerrittMelker/followers","following_url":"https://api.github.com/users/MerrittMelker/following{/other_user}","gists_url":"https://api.github.com/users/MerrittMelker/gists{/gist_id}","starred_url":"https://api.github.com/users/MerrittMelker/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/MerrittMelker/subscriptions","organizations_url":"https://api.github.com/users/MerrittMelker/orgs","repos_url":"https://api.github.com/users/MerrittMelker/repos","events_url":"https://api.github.com/users/MerrittMelker/events{/privacy}","received_events_url":"https://api.github.com/users/MerrittMelker/received_events","type":"User","site_admin":false},"created_at":"2015-05-24T07:39:22Z","updated_at":"2015-05-24T07:39:22Z","body":"Fixed. I read through the documentation:  believe the issue maybe stemmed from:\r\n\r\n```javascript\r\nvar designerModule = angular.module('designer');\r\ndesignerModule.controller('MyGridCtrl', ['$scope', 'propertyService',\r\n  function ($scope, propertyService) {\r\n```\r\nI changed it to:\r\n\r\n```javascript\r\nvar customModule = angular.module('customModule', ['kendo.directives']);\r\nangular.module('designer').requires.push('customModule');\r\n\r\ncustomModule.controller('FilterGridCtrl', ['$scope', 'propertyService',\r\n  function ($scope, propertyService) {\r\n```\r\n"}}