My rows in slickgrid are selected (highlighted) mainly using the arrow keys, but mouse selection is allowed. I have a button outside of the slickgrid, which, when pressed, is to get the row that is highlighted (selected) in the slickgrid. There is no event occurring in slickgrid after the selection (highlighting) has been made (eg grid.onClick, grid.onKeyDown, etc) so I have no idea on how to find the row that is highlighted (selected), specifically when clicking on a button. Could an event be programmatically generated into slickgrid to do this? Any help would be appreciated.
I can only assume that you're not using the dedicated plugin for that which is slick.checkboxselectcolumn and slick.rowselectionmodel.js and you can see this Example and from that you'll get access to onSelectedRowsChanged event and if you choose to make it single click then clicking anywhere on the row will trigger the event (if however you're using multiple row selection then it will only trigger from the left column checkboxes)
import '../plugins/slick.checkboxselectcolumn.js';
import '../plugins/slick.rowselectionmodel.js';
grid = new Slick.Grid("#myGrid", data, columns, options);
grid.setSelectionModel(new Slick.RowSelectionModel({selectActiveRow: false}));
grid.registerPlugin(checkboxSelector2);
grid.onSelectedRowsChanged.subscribe(function (e, args) {
// debugging to see the active row in response to questions
// active row has no correlation to the selected rows
// it will remain null until a row is clicked and made active
// selecting and deselecting rows via checkboxes will not change the active row
var rtn = args.grid.getActiveCell();
var x = args.rows;
});
From the row indexes, there's multiple way to retrieve the associated item object, in my case I use SlickGrid DataView and I retrieve it with the following
for (const row of args.rows) {
const itemObj = dataView.getItem(row);
// do something
}
There's multiple methods for different behavior in SlickGrid and in DataView
// -- DataView --//
/** Get DataView item at specific index */
getItem(index: number) => any;
/** Get an item in the DataView by its Id */
getItemById(id: string | number) => any | null;
/** Get an item in the DataView by its row index */
getItemByIdx(idx: number) => any;
/** Get row index in the DataView by its Id */
getIdxById(id: string | number): number | undefined;
// -- SlickGrid --//
/**
* Returns the databinding item at a given position.
* #param index Item row index.
*/
getDataItem(rowIndex: number): any;
Related
I have two region one form and one interactive grid like a master detail(company and company contact person ) how i can make the interactive grid mandatory ,the user can't submit page ,he/she need add at least one row in interactive grid ,
I can do that or I need to change the interactive grid to collection and count the row in validation
This one is a little tricky because of the way processes and validations work with Interactive Grids (they are executed once per submitted row). To work around this, I'll use a page item and a validation that works with it.
The basic idea of this solution is based on the fact that a new row will not have a primary key value. Here are the steps to reproduce (my example was on page 14, update the following as needed).
Create an Interactive Grid (IG) region. The primary key column should be Query Only (which ensures it's null for new rows).
Create a Hidden page item named P14_NULL_FOUND. Set Type under Server-side Condition to Never so that it never renders on the page.
Create an After Submit (before Validations) process. This process will NOT be associated with the IG so it will only fire once. Set the PL/SQL Code attribute to:
:P14_NULL_FOUND := 'NO';
That will clear out the value of the page item prior to the next process.
Create another After Submit process that runs just after the previous one. Set Editable Region to the IG. Then set the PL/SQL Code to something like the following:
if :PK_COLUMN_IN_IG is null
then
:P14_NULL_FOUND := 'YES';
end if;
You'll need to replace ":PK_COLUMN_IN_IG" with the name of the primary key column in the IG, such as ":EMPNO". This process will be run once for each submitted row in the IG. If a null value is found for the primary key column, then that would mean the user added a new row and the value of P14_NULL_FOUND would be set to 'YES'.
Create a new validation. This validation will NOT be associated with the IG so it will only fire once. Set Type to PL/SQL Expression. Set PL/SQL Expression to:
:P14_NULL_FOUND != 'NO'
Then set Error Message to something relevant.
At this point, you should be able to run the page and verify that the processes and validation are working correctly.
There is an another solution;
Create a page item like PX_ROWCOUNT which will hold the data of the row count of your IG.
Assign a static ID to your IG region.
Write a JS function to count the rows of the grid then set it to the page item. Sample function;
function f_setRowCount(){
var grid = apex.region("staticIDOfYourIG").widget().interactiveGrid("getViews", "grid");
var model = grid.model;
var rowCount = 0;
model.forEach(function (record) {
rowCount ++;
});
$s("PX_ROWCOUNT",rowCount);
}
To submit your page and run this function, change your submit button's behavior to Defined by Dynamic Action. Execute your function when user clicks to that button then submit your page via DA.
Add validation to Processing section of the page and check your page item there; PLSQL Expression => :PX_ROWCOUNT > 0
The solution by Hamit works nicely, except of the case of deletion of a row.
My suggestion is to amend the above code by adding inside the loop an if statement to check whether the row is editable or no.
So the code will be
var grid = apex.region("staticIDOfYourIG").widget().interactiveGrid("getViews", "grid");
var model = grid.model;
var rowCount = 0;
model.forEach(function (record) {
if (model.allowEdit(record)) {
rowCount ++;
}
});
$s("PX_ROWCOUNT",rowCount);
I'm newbie in Ember.js framework, and I have a problem, I need a multiple selection of rows in a table. I'm using jQuery Datatables, with Ember-Data, and I need to have an ID of the selected rows, something like push to the array and I have no clue how to do this.
For multiple selection, make sure you initialize the table with the select option set to "multi":
this.$("#myDT").DataTable({
select: "multi"
});
When you want to get the list of all the rows selected, use a jQuery selector to get all the rows that have the selected class and get their data. In this example, the ID is the first column in the data, hence the [0]
var selectedRows = Ember.$('#myDT tbody tr.selected');
var selectedIDs = [];
Ember.$.each(selectedRows, function (i, element) {
selectedIDs.push(table.row(element).data()[0]);
});
You can read more about DataTables API (for things like getting row data using the row.data() method here: https://datatables.net/reference/api/
I am creating a dashboard with Google Viz and am having trouble with the select event when the data is filtered. It works fine when the page loads and nothing is filtered. However, after filtering the data, it does not select the correct row from the dataTable on 'select' events. Here is my jsfiddle and my listener:
http://jsfiddle.net/5E7zX/1/
google.visualization.events.addListener(rBubbleChart, 'select', function() {
var selection = rBubbleChart.getChart().getSelection();
var item = selection[0];
var school = data.getValue(item.row, 1);
alert('school is: ' + school);
});
When it is unfiltered, the alert box displays the school that was selected. However, when it is filtered on a school, the alert box does not display the correct school (the exception is Air Base Elem because that is the first school in the list).
Any thoughts on how to get the correct row of data once the data is filtered? Thanks.
The selection indices refer to the data as seen by the chart, which is not necessarily the same as your base DataTable, so you need to check against the data used by the chart by calling the getDataTable method to fetch the chart's data, and then referencing that when getting a value:
google.visualization.events.addListener(rBubbleChart, 'select', function() {
var selection = rBubbleChart.getChart().getSelection();
// get the data used by the chart
var dt = rBubbleChart.getDataTable();
// test selection array length, since it can be zero when a user deselects a point!
if (selection.length) {
var item = selection[0];
var school = dt.getValue(item.row, 1);
alert('school is: ' + school);
}
});
I have an Infragistics UltraWebGrid bound to a datasource; I am trying to allow the user to change the value of a few cells in the row, so I am trapping the CellClick event in code behind. While the event's argument gives me the cell key (which is the column name), I still need to have the selected row DataKey so as to make the change in the database. Anyone knows how to get that?
Thanks
Chris
You can use the igtbl_getCellById utility function to get the cell. Once you have the cell, you can get it's row and then it's key:
var cell = igtbl_getCellById(cellId);
var row = cell.getRow();
var key = row.DataKey
The following references may be helpful:
WebGrid utility functions
API documentation for the Cell object
API documentation for the Row object
Alan
I need to modify the contents of the child rows of a hierarchical Infragistics web grid when it is expanded. I can get the parent row from "e.Row" in the following code. But how do I get its child rows to edit?
For that matter, how can I get the rows from any band other than band 0?
protected void CustomerActivitiesGrid_ExpandRow(object sender, RowEventArgs e)
{
UltraGridRow expandedRow = e.Row;
}
It's quite easy, just access the row's rows.
foreach(UltraGridRow childRow in e.Row.Rows)
{
// your code
}
Subsequently, you can access the children rows of those rows the same way
childRow.Rows
You can also access a specific row using its key
UltraGridRow specificChildRow = e.Row.Rows.FromKey("ChildRowKey");