I need to use KendoUI TreeView with MVVM (declarative) binding, and I need to show checkboxes only for some nodes, based on a field in the model.
For this, I want to use checkbox template
However, whatever I do it seems I cannot make it work
Here is the fiddle with the treeview bound through MVVM but without checkbox template
What I want is to use the function checkTemplate as checkbox template, by defining the treeview as below
<div class="files"
data-role="treeview"
data-text-field="name"
data-spritecssclass-field="type"
data-checkboxes="{checkChildren: true, template: checkTemplate }"
data-bind="source: files"
data-template= "ktmpl_Files">
</div>
However, it doesn't work.
Does anyone has any idea what is wrong?
Thanks
The template function used for checkboxes is invoked in a context where your "checkTemplate" function is not visible. Define it global:
<script type="text/javascript">
function checkTemplate(e) {
return "<input type='checkbox' style='display: " + (e.item.checkable ? "inline" : "none") + "'/>";
}
</script>
Check it here: http://jsfiddle.net/OnaBai/K6cbc/5/
Related
I got this code from a Foundation for Apps page template here: Zurb
the code:
<div class="accordion-item" ng-class="{'is-active': active}">
<!-- {{ varialbe }} -->
<div class="accordion-title" ng-click="activate()">{{ title }}</div>
<div class="accordion-content" ng-transclude></div>
</div>
I realize it's easy enough to use an accordion but that's really not my question. After a little research I found that the above code is using Angular tag templating. However, I'm not sure how I can use this in my code Or why I would. This has to do with dynamically naming the title for what will be an active item in the accordion? In what scenario would I define the title variable being used above? Should the content simply be placed in the div?
using foundation template in your own app.
This is the code from foundation-apps.
$templateCache.put('components/accordion/accordion-item.html',
'<div class="accordion-item" ng-class="{\'is-active\': active}">\n' +
' <div class="accordion-title" ng-click="activate()">{{ title }}</div>\n' +
' <div class="accordion-content" ng-transclude></div>\n' +
'</div>\n' +
'');
$templateCache.put puts the template in its memory and you can get to it with $templateCache.get('components/accordion/accordion-item.html').
If you want to use it in a directive, simply point your templateUrl to "components/accordion/accordion-item.html"
angular
.module('app')
.directive('myDirective', function() {
return {
templateUrl: 'components/accordion/accordion-item.html'
};
})
override foundation's template
if you want to use your own template with foundation's javascript, simply use $templateCache.put().
$templateCache.put('components/accordion/accordion-item.html',
'my custom template');
Can I customize the selection in angular-ui-grid somehow?
(to be a <input type="checkbox"> instead of a selected V)
Didn't find any documentation about this...
To modify the actual row header icons:
You can override the template for the selection row header buttons and add custom class css. Inject templateCache in your controller and override the template like this.
$templateCache.put('ui-grid/selectionRowHeaderButtons',
"<div class=\"ui-grid-selection-row-header-buttons\" ng-class=\"{'ui-grid-row-selected': row.isSelected , 'ui-grid-icon-cancel':!grid.appScope.isSelectable(row.entity), 'ui-grid-icon-ok':grid.appScope.isSelectable(row.entity)}\" ng-click=\"selectButtonClick(row, $event)\"> </div>"
);
The template uses a method in your controller scope to identify whether the row is selectable.
Sample plnkr here http://plnkr.co/edit/vaqBY235Lfz7WLvy0FCc?p=preview
How can I make a row in a KendoUI Grid draggable with AngularJs?
The documentation says you have to initialize the draggable component with a filter ie "tbody > tr", but I don't understand how to apply the kendo-draggable directive on just the rows.
This is how I initialize kendo-grid:
<div
kendo-grid
k-options="activityGridOptions"
k-rebind="activityGridOptions"
></div>
The solution is to define a rowTemplate and altRowTemplate on the config object and adding a template inside the html like so:
<!-- Grid row template -->
<script type="text/x-kendo-template" id="grid-row-template">
<tr data-uid="#= uid #" draggable draggable-data="dataItem" draggable-type="'planner.activity'" ng-class="{'current-item': currentActivityId == dataItem.SyncTableUniqueId}" ng-click="setCurrentActivity(dataItem)">
<td>{{dataItem.AvtaleNr}}.{{dataItem.VareLøpenummer}}</td>
<td>
{{dataItem.Date| moment:'ll'}} {{dataItem.Time| moment:'HH:mm':'HH:mm:ss'}}
</td>
<td>{{dataItem.FirstName}}</td>
</tr>
</script>
As you might notice, I am using a non-kendo draggable directive. The rowTemplate and altRowTemplate is assigned inside my controller:
$scope.activityGridOptions = {
dataSource: $scope.gridDataSource,
// ...
rowTemplate: kendo.template($("#grid-row-template").html()),
altRowTemplate: kendo.template($("#grid-row-template").html())
};
In addition to the answer above, you can try to use this angular directive:
https://github.com/neoziro/angular-draganddrop
I'm using the kendo-angular tooltip directive with ng-repeat like so:
<div ng-repeat="thing in things"
kendo-tooltip="tooltip"
k-options="thingTooltipModel"
data-thingname="{{thing.name}}>
</div>
<script type="text/x-kendo-template" id="thingTooltipTemplate">
<span>Thing Name: #= target.data('thingname') #</span>
</script>
As stated in the kendo-angular documentation, the kendo widget isn't notified when I update things, so the tooltip continues to display the initial data. Is there a way to manually tell kendo to re-read the data?
In the controller's method Maybe you should put $scope.$apply(function(){//Your CODE for the Update})
You can use k-rebind:
<div ng-repeat="thing in things"
kendo-tooltip="tooltip"
k-options="thingTooltipModel"
k-rebind="thing"
data-thingname="{{thing.name}}>
</div>
That will destroy the old widget and create a new one.
How do I go about create an element in my controller? e.g. on a click event?
example controller:
function AddCtrl($scope){
$scope.add = function(){
// do stuff to create a new element?
}
}
example view:
<div ng-controller="AddCtrl">
<button ng-click="add()">Add</button>
// create <input type="text" ng-model="form.anotherField">
</div>
Any suggestions much appreciated.
AngularJS is intended to follow MVC - so the controller creating an element in the view doesn't agree with the MVC behavior. The controller should not know about the view.
It sounds as if you want to have a control appear based on some conditional logic. One approach would be to bind to the visibility of the element.
In Angular, your controllers should not be manipulating the DOM directly. Instead, you should describe the elements you need in your templates, and then control their display with directives, like ng-switch, ng-hide / ng-show, or ng-if, based on your model, ie, your data.
For example in your controller you might do something like:
$scope.showForm = false;
And then in your partial:
<div id="myForm" ng-show="showForm">
<!-- Form goes here -->
</div>
By switching $scope.showForm between true and false, you will see your myForm div appear and disappear.
This is a classical mistake coming from jQuery moving to Angular or any other MVC library. The way you should think is to let the view react to changes in the scope.
$scope.items = []
$scope.add = function(){
$scope.items.push({});
}
In the view:
<input type="text" ng-repeat="item in items" ng-model="item.property">
If you want to display an element based on some condition or after the click, use ng-switch: http://docs.angularjs.org/api/ng/directive/ngSwitch
If you want to add multiple elements, create a repeated list of items and add an item to your view-model on clicking the button:
$scope.yourlistofitems = [];
$scope.add = function() {
$scope.yourlistofitems.push("newitemid");
}
And in the HTML:
<input type="text" ng-repeat="item in yourlistofitems" ng-model="item.property">