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');
}
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 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
I've table with with 3 column with the following name
name <----input field - first column
user <----CheckBox -second column
address<----CheckBoxv-third column
I've in the table in-line create and if user click on edit for specific row and
change the name /user/address and instead of save do cancel I want to restore the previos data,I was able to do this for the input property but not sure how to do it for the checkBoxes,any idea how?
This is how I restore the data for the name property
var $firstCell = $row.find("td:first"),
checkBox = $row.find("input[type=checkbox]"),
....
$firstCell.text(previousData.name);
In the previosData I store all the data when the user just click on edit
I think what you might be looking for is something like this:
var $checkboxUser = $row.find('input[name=user]'),
$checkboxAddress = $row.find('input[name=address]');
previousData.statusUserCheckbox = $checkboxUser.prop('checked');
previousData.statusAddressCheckbox = $checkboxAddress.prop('checked');
// ...
$checkboxUser.prop('checked', previousData.statusUserCheckbox);
$checkboxAddress.prop('checked', previousData.statusAddressCheckbox);
http://api.jquery.com/prop/
How to get the particular jqgrid cell value using java script?For example the jqgrid having four columns like id,name,subject1,subject2.now I click the particular row and I need to get the id.how to achieve this?I use the onSelectRow in jqgrid I get the solution but I need to get the javascript?
I use the Jqgrid onSelectRow
onSelectRow: function(id){
var rowData = jQuery(this).getRowData(id);
var temp= rowData['name'];
alert(temp);
}
As #ClydeFlog showed in the example, try this:
var Id = jQuery('#gridName').jqGrid('getGridParam','selrow');
See the result below in the console:
Page example on the 'Get Selected Rows' button click.