I am using ui-grid. The use-case is such that on clicking a button, a new row is added. I want to set focus on the first cell of the newly added row Any suggestions on how to do it ? Here's a plunkr for the same.
http://plnkr.co/edit/6zyZ5q
$scope.addNew = function() {
var newobj = {"id": "","name":"" };
$scope.gridOptions.data.unshift(newobj);
$scope.gridApi.core.notifyDataChange(uiGridConstants.dataChange.ROW);
//set focus to the new row
$scope.gridApi.cellNav.scrollToFocus( $scope.gridOptions.data[0], $scope.gridOptions.columnDefs[0]);
};
$timeout(function() {
$scope.gridApi.cellNav.scrollToFocus(
$scope.termGridOptions.data[0],
$scope.termGridOptions.columnDefs[0]
);
});
I hope it helps.
Related
I encountered this bug where the column filter is incorrect if the grid has a locked column
Here's the fiddle: sencha fillde
Steps to reproduce:
(Do not apply any filter)
Open the "Email" column menu
Open "Name" column menu (this is the locked column)
Open "Phone" column menu (notice that the filter menu is incorrect, it is showing the filter for "Email" column).
For grid that has no 'locked' columns the filter menu is working fine, thanks for anyone who can help!
Okay, this one was a bit tricky. It turns out that for a locked grid, the Ext.grid.filters.Filters:onMenuCreate gets hit twice... one for each side of the grid's menu that shows. The problem is that in the onMenuCreate, the framework doesn't account for the 2 menus. It only cares about the last menu that gets created and destroys the previous menu's listeners. In onMenuBeforeShow, the framework does account for each side of the grid, so I extended this idea into an override. I would encourage you to create a Sencha Support ticket for this, and if you don't have access, let me know, so I can submit one. Fiddle here.
Ext.override(Ext.grid.filters.Filters, {
onMenuCreate: function (headerCt, menu) {
var me = this;
// TODO: OLD BAD CODE... this would destroy the first menu's listeners
// if (me.headerMenuListeners) {
// Ext.destroy(me.headerMenuListeners);
// me.headerMenuListeners = null;
// }
// me.headerMenuListeners = menu.on({
// beforeshow: me.onMenuBeforeShow,
// destroyable: true,
// scope: me
// });
// Just like in the onMenuBeforeShow, we need to create a hash of our menus
// and their listeners... if we don't, we remove the 1st menu's listeners
// when the 2nd menu is created
if (!me.headerMenuListeners) {
me.headerMenuListeners = {};
}
var parentTableId = headerCt.ownerCt.id;
var menuListener = me.headerMenuListeners[parentTableId];
if (menuListener) {
Ext.destroy(menuListener);
me.headerMenuListeners[parentTableId] = null;
}
me.headerMenuListeners[parentTableId] = menu.on({
beforeshow: me.onMenuBeforeShow,
destroyable: true,
scope: me
});
},
destroy: function () {
var me = this,
filterMenuItem = me.filterMenuItem,
item;
// TODO: ADDING THIS AND REMOVING FROM THE Ext.destroy on the next line
var headerMenuListeners = this.headerMenuListeners;
Ext.destroy(me.headerCtListeners, me.gridListeners);
me.bindStore(null);
me.sep = Ext.destroy(me.sep);
for (item in filterMenuItem) {
filterMenuItem[item].destroy();
}
// TODO: ADDING THIS AND REMOVING FROM THE Ext.destroy on the next line
for (item in headerMenuListeners) {
headerMenuListeners[item].destroy();
}
this.callParent();
}
});
I have created a datatable in which one of my column has a checkbox element and other column has a textbox element. The ID's for each of these are generated dynamically based on what data in the rows are populated.
What I have been trying to do with this is enable the textbox when a corresponding checkbox is checked. This datatable has pagination.
Issue:
Using the code below I am able to enable the textbox when the checkbox is checked on a certain page (page 1 for example). However, when I try to enable the textbox on page 2 after a few of the texboxes are enabled on page 1, it doesn't allow me to do so. What am I doing wrong ?
var table = $('#example').DataTable();
table.$("input:checkbox", { "page": "all"}).change(function () {
var someObj = {};
someObj.Checked = [];
table.$("input:checkbox", { "page": "all" }).each(function () {
if ($(this).is(":checked")) {
someObj.Checked.push($(this).attr("id"));
document.getElementById("ID_" + $(this).attr("id")).disabled = false;
}
});
//console.log(someObj.Checked);
});
Instead of looping through the checked boxes, I wrote the enable textbox on change event itself. This worked for me:
table.$("input:checkbox", { "page": "all" }).change(function () {
var checkedID = {};
checkedID.Checked = [];
if ($(this).is(":checked")) {
checkedID.Checked.push($(this).attr("id"));
document.getElementById("ID_" + $(this).attr("id")).disabled = false;
}
console.log(checkedID.Checked);
});
http://plnkr.co/edit/WFONNlAEIeN8K9DEJCqV?p=catalogue
i traying to delete/remove only the selected row
but no success.
remove function
$scope.removeTrainee = function(trainee){
var removeTrainee = $scope.trainees.indexOf(trainee);
$scope.trainees.splice(removeTrainee, 1);
};
the select function
$scope.selectedRow = null; // initialize our variable to null
$scope.setClickedRow = function(index){ //function that sets the value of selectedRow to current index
$scope.selectedRow = index;
};
tried to implement the selectedrow in ng-if or ng-click with && sign
no nothing
the remove function works, but not with selected one.
help please
To take the row selected you $scope.selectedRow so your funcion should be something like this:
$scope.removeTrainee = function(trainee){
var removeTrainee = $scope.trainees.indexOf(trainee);
$scope.trainees.splice($scope.selectedRow, 1);
};
Anyway I recommend you inplement the delete function in another way, more intuitive, for example adding a class to the selected row after clicking in it or adding a new row with a checkbox, to know which row is selected.
And you could also inprove your addTrainee function:
$scope.addTrainee = function(){
$scope.trainees.push(
$scope.newTreinee
);
$scope.newTreinee = {};
};
Hope this solution helps you.
I need to set selection to a newly added row.
When $scope.gridApi.selection.selectRow(newObject) is entered, the grid's row model does not have the new row and thus can not select it.
After method addRow is finished, the grid shows the new row (and the data) but no selection was made.
My test code:
$scope.addRow = function() {
$scope.gridOptions.data.unshift({
// my new data object
});
var newObject = $scope.gridOptions.data[0];
$scope.gridApi.selection.selectRow(newObject);
};
How can I achieve this behavior?
Is there an event like 'rowAdded' in angularjs ui-grid I have to listen to?
Is there anywhere a comprehensive list of events fired by ui-grid?
Thanks for help!
You can event listeners on row, column and so on. The documentation is here http://ui-grid.info/docs/#/api/ui.grid.class:Grid
You can add the data listener in onRegisterApi like below,
onRegisterApi : function(gridApi)
{
if(!$scope.gridApi)
{
$scope.gridApi = gridApi;
$scope.gridApi.grid.registerDataChangeCallback(function(data)
{
$scope.gridApi.selection.selectRow($scope.gridOptions.data[0]);
}, [uiGridConstants.dataChange.ROW]);
}
}
and select any row you want to select.
Here is a working plnkr. http://plnkr.co/edit/NjnMb65w86L0bKmkkJp0?p=preview
My team have been trying the following:
$scope.addTest = function () {
var TestRow = {
"name": "xx",
"description": "xx",
"subjectId": 15
};
$scope.gridOptions.selectAll()
var testRowLength = $scope.gridData.push(TestRow);
$scope.gridOptions.selectItem(testRowLength - 1, true);
}
However the last selectItem does not correctly do a select. So we tried the following:
$scope.$apply(function () {
$scope.gridData.push(TestRow);
$scope.gridOptions.selectItem(testRowLength - 1, true);
});
Now we get an error message saying:
Error: $apply already in progress
This problem is posted as an issue on the ng-grid blog but it's only just been posted and we need help with this as soon as possible. I hope someone can give us advice on how we can
You're selecting the row too soon, use ngGridEventData event instead. I push new rows to the beginning of the grid, so scrolling is a little easier:
$scope.add = function(){
var emptyContact = Utilities.newContact();
var e = $scope.$on('ngGridEventData', function() {
$scope.contactsGridOptions.selectItem(0, true);
window.scrollTo(0,0);
e();
});
$scope.contacts.unshift(emptyContact);
};
More about scrolling: How do I scroll an ngGrid to show the current selection?
Related ng-grid issue: https://github.com/angular-ui/ng-grid/issues/354