I have a hierarical grid with single save button to save new and updated parent and child rows. After making changes to any child row if I click on add new row button, I get the new row but lose past changes. This is because addRow triggers rebinding of data and I lose my edits from other child rows. Any help is appreciated.
First you need to get a reference to the client-side object of the grid
var grid = $("#grid").data("kendoGrid");
Then you need to call the add method of the grid data source.
grid.dataSource.add( { name: "Name", value: "2" } );
Taken from here
There is a demo showing it in action here
1 - Save the editted grid data in a tempArray
2 - Add new row
3- Rebind the grid with latest tempArray data
Related
After a lot of search in SO without any particular solution, I am compelled to ask this question.
In Simple words - I want to collapse or hide a specific row using Javascript in ag-grid. I have tried several methods explained in ag-grid documentation and also in SO, but none has worked till now.
All the following methods have been tried and none of the codes worked.
Let rowNode = gridOptions.api.getRowNode(params.value);
Method #1. params.api.getDisplayedRowAtIndex(2).setExpanded(false);
Method #2. params.api.getRowNode(params.value).setExpanded(false);
Method #3. gridOptions.api.setRowNodeExpanded(rowNode,false);
Method #4. gridOptions.api.getRowNode(rowId).style.visibility = "collapse";
I have also tried using plain CSS, like this - Data has disappeared but the white blank row is visible
rowNode.setDataValue('class', 'hidden'); //Where “class” is a field
const gridOptions = {
//Other grid options...
getRowClass: params => {
if (params.data.class === "hidden") {
return 'hidden';
}
},
https://stackblitz.com/edit/js-nvtqhz?file=infoCellRenderer.js
setExpand / setRowNode Expanded only works on collapsible rows, i.e it will collapse an expanded row. it will not hide it.
I edited your stackblitz,
I made a couple of changes to make it work.
Selectable Rows
So, when you click a row, I'm marking it as selected. There is a property on ag-grid rowSelection: 'single' | 'multiple. If you want to hide only one row at a time, use 'single' if you can hide multiple rows use 'multiple'
External filtering
So, ag grid can filters rows if we provide a criteria.It can be a check on any of data property as well. For your problem, I have added a filter that says if any row is selected, remove it from the grid.
Following are the changes
/// method called on clicking the button
function hideRow(params) {
let rowNode = gridOptions.api.getRowNode(params.value); // get the clicked row
rowNode.setSelected(true); //mark as selected
gridOptions.api.onFilterChanged(); // trigger filter change
}
Triggering the filter change will call this method for each row
function doesExternalFilterPass(node) {
return !node.selected; // if row node is selected dont show it on grid.
}
You can access the rows hidden any time using
gridOptions.api.getSelectedRows() //Returns an array of data from the selected rows. OR
gridOptions.api.getSelectedNodes() //Returns an array of the selected nodes.
And, if you want to show a row again, just filter from this above mentioned method and do these steps
rowNode.setSelected(false); //mark as unselected
gridOptions.api.onFilterChanged(); // trigger filter change
This will automatically show the row on grid.
Hope this helps! :)
I am trying to access an individual row from a grid in Kendo UI so that I can run operations on the selected entries in the row. However, my code is not correctly grabbing the row itself and I do not know how to resolve this.
I've tried binding the grid to an event that, when changed, will fire my method in order to grab whichever row was toggled.
const row = arg.sender.element.closest("tr")
const grid = $("#ECUs").getKendoGrid()
const dataItem = grid.dataItem(row)
Results:
I.fn.init [prevObject: I.fn.init(1)]
length: 0
prevObject: I.fn.init [div#ECUs.k-grid.k-widget.k-display-block]
__proto__: w
(Sorry, I apparently don't have enough reputation to post images)
Ideally, I would expect to get a tr object back in the first method, but I'm getting absolutely nothing instead. Does anybody know how to correct this to access the row?
If you have a click event on one of the columns, you can access the table row using some jquery.
function onClickListener(e) {
e.preventDefault();
var row = this.dataItem($(e.currentTarget).closest("tr"));
}
Option 1:
You can use the edit event of a grid to get the currently selected row model.
edit: function(e) { console.log(e.model); }
Here, e.model contains the row data and you can access the particular column value by e.model.columnName.
Option 2: You can get the row model data like below from the other functions.
https://stackoverflow.com/a/56478061/8733214
I have a Grid Panel which has a checkcolumn as its selection model and a few rows. I need to have a model where in on a buton click, a new window opens containing a grid wherein all the selected rows from the previous grid appear .
How do I go about achieving this? I have tried loading the rows into a new Store and passing this store to the new Grid. Also a store to store transfer of data seems infeasible?
You can pass value to new created component. So you can use passed value for load the store.
basicly you can pass value to your custom component like this;
Ext.create('AppName.yourCustomComponent',{
yourCustomField : yourCustomValue
});
And you can handle this passed data in your custom component like this;
Ext.define('AppName.yourCustomComponent', {
extend : 'Ext.window.Window', //in your stuation
initComponent : function(){
alert(this.yourCustomField); // your custom value here
this.callParent( arguments );
}
});
I also tried to implement your problem at the fiddle here.
I need to add a new row at a specific index inside the ui-grid.
So I figured out how to add a new row inside the grid but the problem is that I need to add the new row after the selected row and not on the top of the grid.
Basically I do not know how to get the index of the clicked/selected row
$scope.addNew = function() {
$scope.gridOptions.data.unshift({});
};
here is the plunker with what I have done so far
I don't see anything inside the code to help you, but you can do it using simply js methods.
You just need to now the entity of the selected row (for example if you're using celNav's gridApi.cellNav.on.navigate(scope,function(newRowcol, oldRowCol){}) you could get it from newRowCol.row.entity), then you could find its index in gridOptions.data by calling:
gridOptions.data.indexOf(rowEntity)
You can see how I did in a new version of your plunkr.
I have a grid, which I want to add a button at the top to get the data from a specific column for each row selected in the grid. How would I go about doing this?
Add something like this to the button's click event:
rowsSelected = myGrid.getSelectionModel().getSelections();
for(...){
aRecord = rowsSelected[i];
filedValue = aRecord.get('fieldName');
}