I am using ui-grid. The use-case is such that on clicking a button, a new row is added. I want to make this newly added row editable. i.e. as soon as the row is added, the edit mode is on for at-least the first cell in the row. Any suggestions on how to do it ?
Tried so far:
var newobj = {"id": "","name":"" };
$scope.gridOptions1.data.unshift(newobj);
$scope.gridApi.core.notifyDataChange(uiGridConstants.dataChange.ROW); //set focus to the new row
$scope.gridApi.selection.selectRow($scope.gridOptions1.data[0]);
here's a plunker for the same
http://plnkr.co/edit/6zyZ5q?p=preview
Related
I have a react-table being loaded with 1 blank editable row. I have a button where I'd like to add a new blank editable row to the table.
I can add the new blank row to the data, but the Table is not updating. The table only updates with the correct amount of rows after I've changed a value from an existing textbox.
Here's the codesandbox link:
https://codesandbox.io/s/wandering-forest-u7r7lx?file=/src/App.js
I want the checkbox to be checked when I right click on the row in the grid. My application supports only javascript. It does not support jquery. So please send in your answers in javascript.
I used the following code to activate the right click event and get the ID value of the row that I have right clicked on. Please help me to check the checkbox of the corresponding row.
this.gridConnections.push(aspect.after(this.grid, "onRowContextMenu", lang.hitch(this, function(evt) {
var rowID = evt.rowId;
console.log("right click");
event.stop(evt);
}), true));
once you have the row object, you can also get the checkbox on that row like
this.yourcheckbox or dijit.byId("yourcheckbox"). Then use
this.yourcheckbox.set("checked",true) or
dijit.byId("yourcheckbox").set("checked",true);
While clicking "Add Row" button, it added a new row in the top of ui-grid with focus of first column. After pressing Tab button its not going to Next Column of same row instead its going to next row column.
http://plnkr.co/edit/VYhhIpdUAUzoXr2RiYKG?p=preview Here is my code in [plnkr]
Pls Advice.
You are trying to focus too fast. If you are using a timeout, everything works as expected.
setTimeout(function(){
$scope.gridApi.cellNav.scrollToFocus($scope.gridOptions.data[0], $scope.gridOptions.columnDefs[0]);
}, 100)
Also you need to focus data[0] instead of the first index.
Here is your updated Plunkr.
How to create empty editable row when user click add button.![enter image description here][1]
i am new to ext js,here iam sharing my requirement.i tried in related retirement in search engines.i didn't get any code.
below i am sharing requirement image.
here my requirement is when user click "addlayer" button the editable new row will cretaed.After user enter layerid,polictnum,limit values click "calculate losses" button calculate the partof,attachment,expectedlosses values.and how to impleemnt edit and delete button.
any one please share related code.
here i am using visual studio 2012
Here is a sample code:
var grid = this.lookupReference('grid reference'), // you can even do it differently if grid component or it's view is passed to your handler function
store = grid.getStore(); // get the store
var rec = store.insert(0, {}); // insert an empty record to your store
grid.getPlugin('celleditor').startEdit(0, 0); // enable editing at the first column of the new record in your grid.
I am using the checkboxselectcolumn plugin for Slickgrid, and I want new rows to be selected automatically.
I tried getting the current selected rows and adding the new index, and when i get selected rows, my row is in the list, but the checkbox is not actually selected and the row highlighted. I can't seem to find the code to "click" the checkbox.
_grid.dataView.addItem(item);
var selectedItems = _grid.grid.getSelectedRows();
console.log(selectedItems); //Rows selected or empty
selectedItems.push(_grid.grid.getDataLength()+1);
_grid.grid.setSelectedRows(selectedItems);
selectedItems = _grid.grid.getSelectedRows();
console.log(selectedItems); //New rows are all in this list, but checkbox is not selected
I used jQuery to "click" the checkbox (Just setting it to checked wasn't enough)
var nextIndex = _grid.grid.getDataLength();
jQuery('#MyGrid div[row='+nextIndex+'] [type=checkbox]').click();