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
Related
I have a problem I have created a directive which is doing ng-repeat on an array of objects
---Showing the value on gui------
Now I want that if I click on any div of this repeat that particular div's background color should change
I have tried something like this
link:function(scope,element,attributes){
$(element).on('click',function(e){
$(element).addClass('A');
$(element).removeClass('B');
})
}
You can use the ng-class directive to apply classes on specific occurences, in your case in combination with the ng-click:
<div ng-repeat="item in items"
ng-class="{A: item.clicked, B: !item.clicked}"
ng-click="item.clicked = !item.clicked">
<!-- .. content -->
</div>
See this jsfiddle for example
You can try something like this, but this will need more workaround.
<div ng-click=“changeBackground($event)”></div>
// In Controller
$scope.changeBackground = function(event){
event.target.style.background = “#000”;
}
It would be better if you can submit your code.
My html:
<div id="contentDiv">
<div id="headerDiv" ><div id="titleDiv"> Queries</div></div>
<div id="valuesDiv" ><div id="yearDiv"> 2015</div></div>
<div id="graphDiv" ><div id="chartDiv">graph</div></div>
</div>
Like this div, I have another div but the content in the div is different.
How to add a new div horizontally when I click on hyperlink using angularjs?
How can I do this? please help me out regarding this
Looks like what you need is a two way binding with the ng-model directive. So the idea would be that you bind the new div to a variable in your scope which is initially in an empty or undefined state (for example, there are better ways). When the hyperlink is clicked it calls the function specified by an ng-click directive which will fill your bound object, which in turn will cause the new div to be rendered.
EDIT:
Based on your comments here is a simple example.
HTML page:
<div id="newDiv" ng-repeat="item in items">
<!-- Div content -->
<!-- example -->
<input type="text" ng-model="item.name">
</div>
<input type="button" ng-click="addItem()">
Controller:
$scope.items=[];
$scope.addItem = function() {
var newItem = {};
newItem.name = "new item name";
$scope.items.push(newItem);
}
What's happening here is the data for each div is stored in an array of objects. The ng-repeat directive will repeat the div for each object in the array. You can then fill the elements in the div using the object. Adding a new div is as simple as adding a new item to the array and angular will take care of the rest for you. Please note that I have not tested this example, but hopefully it's enough to point you in the right direction.
RE aligning the divs horizontally, this will be done with CSS, using the inline-block display mode. So you could give the div a class of, for example, "horizontalDiv" and add the following class to your CSS file:
.horizontalDiv {
display: inline-block;
}
I have a template here that I want to repeat based on my $scope.dataset.
How do I get ng-repeat to repeat this template for each name?
HTML I have my template as follows
<table>
<tr ng-repeat = "data in dataset">
<td>{{data.name}}</td>
<td>
<div class="progressbar {{data.color}}" ng-style="{width:{{data.width}} + '%'}"
value = "{{data.value}}">
<span id="barValue">{{data.value}}</span>
</div>
</td>
</tr>
</table>
and as you can see, I'm trying to repeat this template inside the table.
dataset is as follows
$scope.dataset=[
{'name':'name1', 'value':34, 'width':34, 'color':'colorRed'},
{'name':'name2', 'value':50, 'width':50, 'color':'colorBlue'},
{'name':'name3', 'value':47, 'width':47, 'color':'colorRed'},
{'name':'name4', 'value':82, 'width':82, 'color':'colorBlue'},
{'name':'name5', 'value':72, 'width':72, 'color':'colorOrange'},
{'name':'name6', 'value':17, 'width':17, 'color':'colorGreen'},
{'name':'name7', 'value':20, 'width':20, 'color':'colorRed'},
]
When I try to use this, nothing pops up.
All I want is for the data to appear for each .name that comes up.
So first question is what am I doing wrong?
Second, is it possible to do all this in a custom directive?
You must be getting $parse error in your console as you are using
{{}} in ng-style
You shouldn't use {{}} interpolation directive inside ng-style directive.
color should be applied as style instead of adding class, you could be applied from ng-style directive.
HTML
<div class="progressbar" ng-style="{width:data.width + '%', color: data.color}"
value = "{{data.value}}">
<span id="barValue">{{data.value}}</span>
</div>
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.
Ok, I have made a really simple grid component. I fetch a column count attribute and add a <br> tag after the end of a row. I do that within the link function.
Her is the directive: http://pastebin.com/U4ckuKJw
grid.html just looks like this: <div class="grid" data-ng-transclude=""></div>
In my first example I have 7 <div> tags inside the grid component and want to have 3 columns. So after every third <div> I want a <br> to be added.
It looks like this and is working:
<div data-grid="" data-cols="5">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</div>
This one is not working: http://pastebin.com/wtcgM2Hv
I think it is because of the directive ng-repeat and that the content of the grid component isn't rendered at the time the link function ist executed.
Any thoughts on how to solve this problem or how to optimise the component?
An easier approach may be to solve the problem with standard angular directives and css. For instance, if you float your cells and clear: left on those cells that start a new row, you can use ng-repeat and ng-class to accomplish this.
I created an example at: http://jsbin.com/idukaz/1
The html looks like this. Note I'm using ng-class to apply the class that formats the cell that needs to start a new row depending on the result of calling the custom columnEnd function. columnBreak is a scope variable for the number of columns you want. $index is a variable generated by ng-repeat:
<div class="table">
<div class="label"
ng-class="{'new-row': startNewRow($index, columnBreak) }"
ng-repeat="item in items">{{ item.name }} ({{ $index + 1 }})</div>
</div>
In your controller:
app.controller('Controller', ['$scope', function (scope) {
// list of grid data
scope.items = [];
// controls the number of columns
scope.columnBreak = 5;
// calculates if current cell is start of new row
scope.startNewRow = function (index, count) {
return ((index) % count) === 0;
};
}]);
In your css if you float your cells and clear left, you'll get your columns to dynamically
reformat when you change the columnBreak value.
.label {
float: left;
}
.new-row {
clear: left;
}
Ok, now I found the solution:
use angular directive to change classes of ng-repeat elements
I mixed it with Marks idea and manipulate the css classes now.
Thanks