I have this template inside of my datagrid:
<div id="grid" data-ng-controller="UsersCtrl" data-ng-init="initGrid()" >
<script type="text/x-kendo-template" id="preparedViewsToolbar" ng-init="initPreparedViews()">
<div class="toolbar">
<!-- SAVE CUSTOM VIEW BTN -->
<a class="k-button k-button-icontext k-grid-save-changes"
data-ng-controller="UsersCtrl"
ng-click="showCustomViewModal();">
Add actual selection to custom views
</a>
</div>
</script>
</div>
I injecting template inside of the datagrid toolbar:
{ template: kendo.template($("#preparedViewsToolbar").html()) },
Template is correctly displayed in datagrid but after click is not firing predefined action on controller.
I tried to find any working solutions for a few hours, but without luck.
Thanks for any advice.
Related
I am building a cross platform application using Angular Kendo Mobile.
I have a Kendo list using "kendo-list-view".
<div kendo-list-view >
I want to get an event when user scrolls this list, in my controller.
I also tried to get the scroll event by using pure angular code, as mentioned in below question.
Bind class toggle to window scroll event
But in my case nothing happens and code inside the directive is not getting called.
UPDATE
I have my HTML with list view as below:
<kendo-mobile-view id="myListScreen" k-transition="'slide'" k-title="'My List'" k-layout="'default'" ng-controller="myListCtrl">
<kendo-mobile-header >
<kendo-mobile-nav-bar style="background-color: gray">
<kendo-view-title style="color: white"></kendo-view-title>
<kendo-mobile-button k-rel="'drawer'" href="#navDrawer" k-align="'left'"><img src="img/menu.png"></kendo-mobile-button>
</kendo-mobile-nav-bar>
</kendo-mobile-header>
<div class="myListMainDiv">
<div kendo-list-view
id="myListViewDiv"
class="myListViewDiv"
k-template="templates.myListViewItem"
k-data-source="myService.listDataSource"
ng-show="showListSelected"
></div>
</div>
<script id="myListViewItem" type="text/x-kendo-template">
<div id="{{dataItem.id}}" ng-click="onSelected(dataItem.id)">
{{dataItem.name}}
</div>
</script>
</kendo-mobile-view>
I am loading this page in my root page when user selects to navigate to this page using kendo.mobile.application.navigate("MyList.html");. And when controller for this page loads I have created list using new kendo.data.DataSource and I have attached new kendo.data.ObservableArray to my data source.
You can get the scroll event from the Scroller of your Kendo Mobile View,
For example if you have a view with id="myListScreen":
var kendoView = $('#myListScreen').data().kendoMobileView;
var scroller = kendoView.scroller;
scroller.bind("scroll", function(e) {
console.log(e.scrollTop);
console.log(e.scrollLeft);
});
You can find more info about the kendo scroller here on their documentation
I'm using AngularJs and ngModal plugin (https://github.com/adamalbrecht/ngModal) in my project. When the Modal is shown, it disables the browser scroll bar. How do I enable it in the instance it is shown?
My html code is below:
html
<body ng-controller="MyMgtCtrl">
<div class="container-fluid" >
<div class="section">{{gapSection.headerID}}.{{gapSection.sectionID}}</div>
<label ng-click="showMenu()" class="label label-primary">Toggle</label>
<modal-dialog show='data.showMenu' class="showMenuStyle">
<p>SOMETHING GOES HERE</p>
</modal-dialog>
</div><!-- /.container -->
</body>
In the ng-modal plugin there was a property:
document.getElementsByTagName("body")[0].style.overflow = "hidden"
I set to "hidden" to "" and the scroll bars were present
I'm trying to build a directive which will display a kendo window with a kendo tab strip in its body content.
It's a component I need to be reusable since I use it a lot in my web app.
Here is the flat html representation that I want to turn into a directive
<div style="padding:20px;" kendo-window="test" id="test" k-title="hello" k-options="popupOptions">
<div kendo-tab-strip k-content-urls="[ null, null]">
<!-- tab list -->
<ul>
<li class="k-state-active">View</li>
<li>Edit</li>
</ul>
<div style="padding: 1em">
This is the view tab
</div>
<div style="padding: 1em">
This is the edit tab
</div>
</div>
</div>
1) First step is creating the directive that wraps the kendo popup and this si where I'm having an issue
So basically, my directive includes the kendo-window widget in its template and has transclude="true", since the content of the popup will different each time.
It seems "transclude" and "scope" cause some issues.
Please have a look : http://plnkr.co/edit/c7qoKlh75s8aS7fazYSo
I'm using the AngularUI bootstrap library with templates. I'm wainting to call a custom method inside the template and I was wondering what I need to do in order to get this working? I guess what I'm wanting is to replace the ng-click="isOpen = !isOpen" with my own custom method if possible.
Thanks in advance.
<div class="panel panel-default">\n <div class="panel-heading">\n
<h4 class="panel- title">\n
<a class="accordion-toggle" ng-click="isOpen = !isOpen" accordion- transclude="heading">{{heading}}</a>\n </h4>\n
</div>\n
<div class="panel-collapse" collapse="!isOpen">\n <div class="panel-body" ng-transclude></div>\n
</div>\n</div>
Since clicking on the toggle changes the value of isOpen,
you can watch it and apply your logic without changing the ng-click attribute
$scope.$watch('isOpen', function(value) {
if (value) {
// your code
}
});
I'm quite happy with the Angular UI Bootstrap Accordion, but I encountered a problem when creating a Accordion Group with no body. The Accordion will always create an empty body and I couldn't find a way to prevent this. Is there a way to prevent the creation of the accordion body or can the accordion group be created in a way that it is not expandable?
Plunker with example
Accordion Directive
The accordion directive builds on top of the collapse directive to
provide a list of items, with collapsible bodies that are collapsed or
expanded by clicking on the item's header.
As I stated in the comment, just use the Collapse directive and style it like an accordion.
Update:
Not styled to perfection but try this
HTML
<div ng-controller="CollapseDemoCtrl">
<div class="accordion-group" ng-click="isCollapsed = !isCollapsed">
<div class="accordion-heading">
<a class="accordion-toggle">Group with body</a>
</div>
</div>
<div collapse="!isCollapsed" class="collapse">
<div class="well well-large">Some content</div>
</div>
</div>
Controller
function CollapseDemoCtrl($scope) {
$scope.isCollapsed = false;
}
plunkr