I am using angular button in a ng-grid. I need to know how can i identity which button was clicked from within the grid.
I guess part of the complexity is that the button is clicked before the row is selected (Just my analysis,probably wont help with the solution :)
A snap shot of how the grid looks
A plunker illustrating the problem here
I have been able to find out how to resolve my question,basically pass in "row" as an argument on your function for ng-click. ng-click="save(row)"
Before
.. ng-click="edit(selectedItem)" >Edit</button> '
After
.. ng-click="edit(row)" >Edit</button> '
I have updated the plunker here to reflect the same
row.entity will give me the entity bound to this row of the grid
#Shai Aharoni You can prevent the row from being selected by passing $event as the first argument to the click handler:
.. ng-click="edit($event, row)">Edit</button>
and then calling stopPropagation() on the event from inside the handler.
$scope.edit = function(event, row) { event.stopPropagation(); }
Related
We have a UIform (angular js) which has Edit button in each row. Edit button has a condition that only one row can be edited at a time. I need to insert another button at top to disable edit button in all the rows. Please assist.
Current code: btn ng-disable = disableedit ng-click form-edit > button < /btn
disableedit function disables all edit button except for current row which is being edited. Please assist what should be the code for the new EditDisable button.
As i understand you want to enable edit button only when the user is hovering at that row. Here is my attempt to achieve the same. You can use ng-mouseenter and ng-mouseout events to trigger functions.
mouseenter : The event occurs when the pointer is moved onto an element.
mouseout : The event occurs when a user moves the mouse pointer out of an element, or out of one of its children
<div ng-app="myApp" ng-controller="MainCtrl">
<div class="mb-20" ng-repeat="row in rows" ng-mouseenter="rowid=$index+1">
<span>{{$index+1}}</span>
<span>{{row.value}}</span>
<span>
<button ng-disabled="rowid!=$index+1" ng-mouseout="rowid=0">edit</button>
</span>
</div>
</div>
So , basically check if your row_id is equal to the current index enable the button else let it be disabled.
Here's the jsfiddle link : http://jsfiddle.net/khushboo097/ohvqjdye/
We use textboxes on celltemplates instead using an editableCellTemplate.
http://plnkr.co/edit/M8Do1p?p=preview
<input class="grid_textbox text-center"
ng-blur="grid.appScope.quantityChanged(row.entity)"
ng-model="MODEL_COL_FIELD" style="width:80%"/>
We identify changes by catching ng-blur on the textboxes. However, we noticed that when the textbox is out of view when the user scrolls, it does not trigger the ng-blur on the correct textbox.
To reproduce in plnkr
Click on first textbox.
Click on the second textbox, this will display info on the Blur event. This is the expected behavior
To reproduce the error, click Clear and click on the first textbox again.
Scroll down until up to mid-bottom and click on a textbox. It won't output the same message as above.
Is there a way to fix this or a workaround to get the row that was edited?
Update:
I've tried Guranjan's solution and it worked, but another problem came up. I'm not sure if this should be another question but it's still related to scrolling and blur.
To replicate
Click on 1st textbox and input a number
Scroll until it's out of view.
Click on another textbox and edit.
This time just scroll. You can see the cursor focusing on other textboxes and not triggering blur.
Edit one. Then scroll again (mouse wheel or dragging scrollbar). Edit then scroll.
Click on one textbox to trigger blur. It will not display all of the edits.
This is the plunker of Guranjan to try it.
http://plnkr.co/edit/RWM2y7NLC7821c9vQDO6?p=preview
This is because ui-grid reuses the elements. One way to fix your issue is, store the value of current row on focus and use that on blur. For example, create variable in you app scope:
$scope.currentValue = {};
and then you can update this on input focus:
ng-focus="grid.appScope.currentValue = row.entity"
and you can then use $scope.currentValue to do whatever you need to do with it.
Updated Plnkr
The example "Edit On Focus Cell Selection Example" in ng-grid website works fine on Chrome, but it didn't work on IE 10 and 11, when i lost focus on the edit cell, the cell did not go back to readonly state.
Can anyone help and give me a better work round for it?
Thanks in advance!
http://angular-ui.github.io/ng-grid/
This is because ng-grid has added an 'unselectable' attribute in the template, this attribute only works in IE, it will make the section unselectable.
The newly version ui-grid does not has it.
Just added some removing logic in the controller to remove it is ok.
//Remove unselectable attribute which is added by ngGrid
$timeout(function () {
var ngViewPorts = angular.element.find('.ngViewport');
angular.forEach(ngViewPorts, function(ngViewPort){
if(ngViewPort.getAttribute('unselectable') === 'on') {
ngViewPort.removeAttribute('unselectable');
}
});
});
i am using angularjs to write right click event for selected row in ng-grid.but i want to know is any inbuilt right click event there in ng-grid.if it is there please suggest me.
Thanks
A directive may be used to bind required actions on a right click, by using contextmenu event.
You can also refer to answers to this question.
I think you need to define a celltemplate with the required conditions. Something like this by defining a directive
insert ng-click event into ng-grid
I want to attach a directive to a element. The directive will be responsible for the following:
1. Attach a click event to the element
2. Upon click.. show a drop-down
In order to perform the first activity I have added directive called "sortDirective" to my element below:
<span class="glyphicon glyphicon-arrow-down" style="font-size:0.6em" sort-directive></span>
This is done in the file layout.html
I am facing two issues:
1. the click event is not working
2. the drop-down should be shown only on click event. Right now you will notice that the drop-down (blue in color) is being shown at all the times.
I believe i am missing something here since my directive sort-directive is falling within another directive custom-table.
Am I thinking in the right direction or am I totally off ?
Plnkr Here
I wouldn't call the click event with the directive. My advice would be just to put ng-click to the span that you want to call the function from (and move the function to the controller).
You might want to look at this thread:
trigger click event from angularjs directive
Also a quick css tip - add these rules
cursor:pointer;
padding:0 0 0 5px;
to the class .header-cells.
Finally, don't you think that the arrow is too small to click it? Try binding the click event to the whole container.
i finally managed to lay this out. Those interested in seeing how it is done ..here is a plnkr
http://plnkr.co/edit/TG6aCEu2TgPq28Jcj0nM?p=info
just click on any of the headers (in orange) and you should see the results.