To check/uncheck the check box value, when the sweet alert cancel event is selected.
here in the call back function, not able to reset the check box value.
$scope.updateRow = function(row) {
SweetAlertService.confirm('Are you sure?','', function(isConfirmed) {
if (isConfirmed) {
}else{
if(row.entity.employed == "Y"){
row.entity.employed = "N";
}else if(row.entity.employed == "N"){
row.entity.employed = "Y";
}
});
Code here . http://plnkr.co/edit/Sd7Uk5yTkhPFnzrsDknp?p=preview
The changes needed to run this are as follows:
In SweetAlert.js set the timer to some bigger value. Current is 1500, set to timer: 150000.
Include onRegisterApi in grid definition and after resetting the value of checkbox on click of cancel just refresh the grid using $scope.gridApi.core.refresh()
Updated Plunker code: Here
Hope this helps!
Related
EDIT PLUNKER EXAMPLE: http://plnkr.co/edit/WuiCAmMwbQnC0n197LSJ?p=preview
In the examples "sa" shoulbe checked and remain as checked. It is checked for a short time and then it looses its check status. I dont now why?
I am using a classical old fashion radio-button-based-navigation-tab-menu with Angular-UI-Router, it works well. Each click on a tab gets its URL.
If a user puts the URL manually into the adress bar of a browser and presses enter, the proper URL's content will be shown, it is also OK.
But my tab menu doesn't react on the manually changes at the adress bar. The correponding radio button should be checked. Therefore I've written a directive:
.directive ('checkIfMe', function (){
return {
link: function (scope, e, a) {
////////////////
if (currentUrl == currentNaviElement) {
console.log("Yes it is");
a.$set("checked", true);
}
}
}
I can detect the correct radio button, I see "yes it is" and I want to set its checked attribute to true. I've tried:
e.g. The ID of the current radio button is "navRadio_sa"
a.$set("checked", true);
a.checked = true;
$('#'+a.id+'').prop("checked",true);
All of them didn't work. But it I try it in the firebug console
$('#navRadio_sa').prop("checked",true);
it works. Where is my mistake?
Last but not least, that is a:
Try this
.directive('checkIfMe', function ($timeout) {
return {
link: function (scope, e, a) {
scope.my.info.e.push(e);
scope.my.info.a.push(a);
console
$timeout(function(){
if(a.id == "navRadio_sa") {
e.prop("checked", true);
var me = (a.id).replace("navRadio_","");
}
}, 10);
}
}
});
The e variable is a jQuery object of the element itself. You can work with it the same way that you'd normally work with jQuery objects.
I wrapped it in a timeout of 10 ms to give the ng-repeat time to complete before manipulating the dom. IT looks like ti was not working before because of a race condition. By setting the timeout, it should alleviate the issue.
I have an HTML page built using AngularJS. The page has a form containing a number of fields.
I have a Save, Back and Cancel button. When you click the back button I would like to be able to tell if changes have been made to the field and prompt the question "Would you like to save your changes?".
If you click the Cancel button, I want to ignore any changes made and go back to the previous page. How can this be achieved in Angular?
fYou can use "$locationChangeStart" https://docs.angularjs.org/api/ng/service/$location
$scope.$on('$locationChangeStart', function(event, newURL) {
if (newURL.lastIndexOf("#/") >= 0) {
$scope.locationToMove = newURL.substring(newURL.lastIndexOf("#/") + 1); // here you can store the location to move for future use
} else {
$scope.locationToMove = "/";
}
if ($scope.form.$dirty && !goToBack && !saved) {
$scope.displayConfirmationModel = true; // any alerts you want to show here
event.preventDefault();
}
else {
// you can move to that location
}
});
In the if you can check any change condition , its just for example I have given. You can do this for any location change , but if you want to do this on cancel or back button then you can have the same condition on the button click method and check for change .i.e if the form filed is dirty.
There are two combo boxes and a button.I want a validation i.e. if "combo1" is selected then "combo2" should get enabled and when i select "combo2" then browse button should get enabled.
Mabe something like that (insert text on first combobox):
The combobox2 and button must have this configs:
hidden:true,
disabled:true,
On combobox1:
listeners:{
change: function(combobox,newValue, eOpts){
var combo2 = Ext.ComponentQuery.query('#combo2ItemId')[0];
var button = Ext.ComponentQuery.query('#buttonItemId')[0];
if(!Ext.isEmpty(newValue)) {
combo2.setHidden(false).setDisabled(false);
button.setHidden(true).setDisabled(true);
}
else {
combo2.setHidden(true).setDisabled(true);
button.setHidden(true).setDisabled(true);
}
}
On combobox2:
listeners:{
change: function(combobox,newValue, eOpts){
var button = Ext.ComponentQuery.query('#buttonItemId')[0];
if(!Ext.isEmpty(newValue)) {
button.setHidden(false).setDisabled(false);
}
else {
button.setHidden(true).setDisabled(true);
}
}
I hope this helps!
I guess you may want to disable the second combo and button when the page first shows.
Then You could listen for the change event for each combo and in your handler code disable\enable which ever controls you need to based on the values passed into the handler function arguments.
I'm setting the selection of my ngGrid from JavaScript, calling gridOptions.selectItem(). I have multiSelect set to false, so there is only ever one row selected. I'd like the ngGrid to automatically scroll to show the newly selected row, but I don't know how to do this: can anyone help, please?
On a related topic: can I disable row selection by mouse click? If so, how?
Edited to add
I'd also like to disable keyboard navigation of the selected row, if possible.
What worked:
AardVark71's answer worked. I discovered that ngGrid defines a property ngGrid on the gridOptions variable which holds a reference to the grid object itself. The necessary functions are exposed via properties of this object:
$scope.gridOptions.selectItem(itemNumber, true);
$scope.gridOptions.ngGrid.$viewport.scrollTop(Math.max(0, (itemNumber - 6))*$scope.gridOptions.ngGrid.config.rowHeight);
My grid is fixed at 13 rows high, and my logic attempts to make the selected row appear in the middle of the grid.
I'd still like to disable mouse & keyboard changes to the selection, if possible.
What also worked:
This is probably closer to the 'Angular Way' and achieves the same end:
// This $watch scrolls the ngGrid to show a newly-selected row as close to the middle row as possible
$scope.$watch('gridOptions.ngGrid.config.selectedItems', function (newValue, oldValue, scope) {
if (newValue != oldValue && newValue.length > 0) {
var rowIndex = scope.gridOptions.ngGrid.data.indexOf(newValue[0]);
scope.gridOptions.ngGrid.$viewport.scrollTop(Math.max(0, (rowIndex - 6))*scope.gridOptions.ngGrid.config.rowHeight);
}
}, true);
although the effect when a row is selected by clicking on it can be a bit disconcerting.
It sounds like you can make use of the scrollTop method for the scrolling.
See also http://github.com/angular-ui/ng-grid/issues/183 and the following plunker from #bryan-watts http://plnkr.co/edit/oyIlX9?p=preview
An example how this could work would be as follows:
function focusRow(rowToSelect) {
$scope.gridOptions.selectItem(rowToSelect, true);
var grid = $scope.gridOptions.ngGrid;
grid.$viewport.scrollTop(grid.rowMap[rowToSelect] * grid.config.rowHeight);
}
edit:
For the second part of your question "disabling the mouse and keyboard events of the selected rows" it might be best to start a new Question. Sounds like you want to set your enableRowSelection dynamically to false? No idea if that's possible.
I believe I was looking for the same behavior from ng-grid as yourself. The following function added to your gridOptions object will both disallow selection via the arrow keys (but allow it if shift or ctrl is held down) and scroll the window when moving down the list using the arrow keys so that the currently selected row is always visible:
beforeSelectionChange: function(rowItem, event){
if(!event.ctrlKey && !event.shiftKey && event.type != 'click'){
var grid = $scope.gridOptions.ngGrid;
grid.$viewport.scrollTop(rowItem.offsetTop - (grid.config.rowHeight * 2));
angular.forEach($scope.myData, function(data, index){
$scope.gridOptions.selectRow(index, false);
});
}
return true;
},
edit: here is a plunkr:
http://plnkr.co/edit/xsY6W9u7meZsTJn4p1to?p=preview
Hope that helps!
I found the accepted answer above is not working with the latest version of ui-grid (v4.0.4 - 2017-04-04).
Here is the code I use:
$scope.gridApi.core.scrollTo(vm.gridOptions.data[indexToSelect]);
In gripOptions, you need to register the gridApi in onRegisterApi.
onRegisterApi: function (gridApi) {
$scope.gridApi = gridApi;
},
var grid = $scope.gridOptions.ngGrid;
var aggRowOffsetTop = 0;
var containerHeight = $(".gridStyle").height() - 40;
angular.forEach(grid.rowFactory.parsedData, function(row) {
if(row.entity.isAggRow) {
aggRowOffsetTop = row.offsetTop;
}
if(row.entity.id == $scope.selectedId) {
if((row.offsetTop - aggRowOffsetTop) < containerHeight) {
grid.$viewport.scrollTop(aggRowOffsetTop);
} else {
grid.$viewport.scrollTop(row.offsetTop);
}
}
});
How can I force a user to make a selection from a qooxdoo SelectBox? I would like the SelectBox to initially appear with an empty selection (or better yet, a "Please select..." message). I would like form validation to fail if the user has not made a selection, and the selectBox to appear with the red "invalid" decoration and "required" tooltip, just like a required textField.
Similarly for RadioButtonGroup: is there a way to make the group initially appear with no button selected, and not become valid until a selection is made?
Later... this seems to work for the SelectBox case:
var genderSlct = new qx.ui.form.SelectBox();
genderSlct.add(new qx.ui.form.ListItem("")); // initially selected null item
genderSlct.add(new qx.ui.form.ListItem("Male", null, "M"));
genderSlct.add(new qx.ui.form.ListItem("Female", null, "F"));
...
myForm.getValidationManager().setValidator(function(items) {
var valid = true;
if (genderSlct.getSelection()[0].getModel() == null) {
genderSlct.setValid(valid = false);
genderSlct.setInvalidMessage("Please select your gender.");
}
...
if (valid) {
genderSlct.setValid(true);
...
return true;
} else {
return false;
}
});
Later still... Found a solution for the RadioButtonGroup as well:
To get that initial unselected state, add an invisible first listItem with null model:
myRbg.add(new qx.ui.form.RadioButton("").set({
model: null, visibility: "excluded"
}));
Then add the same style of code as for the selectionBox to the form validator.
Check out this demo which offers exactly which your looking for in the SelectBox case:
http://demo.qooxdoo.org/2.0.1/demobrowser/index.html#data~Form.html
You can simply check for the selection in the validator.