I have an application (using SlickGrid) where I need to get the column name or id at any time when user clicks on a cell (this pulls up a menu specific to the data in that column/cell). Grid works fine initially but if the column is moved (drag/drop), the column name/id does not follow the drop but remains mapped to it's initial column position.
Has anyone else seen this and, if so, how did you fix it?
Thanks
Are you trying to reuse the list of columns defined in your html code? You should get the list of columns from the grid instead. The following code should do what you are expecting (i.e. printout the name of the column in which you clicked a cell):
grid.onClick.subscribe(function(e,args) {
var allColumns=grid.getColumns();
console.log(allColumns[args.cell].name);
});
You can add that code in one of the examples provided with the source code (say "example3-editing.html"), drag-drop some columns around and check the console after clicking on a cell.
Related
I am have been trying to find a solution to my google sheet issue and have tried quite a few workarounds thus far, to no avail. I imagine I may need to use javascript to do the action, however, I am a beginner to javascript.
Here is what I would like the sheet to do.
Check 'sheet#2' and see if an item in the specified range is set to "out-of-stock"
Sheet#2
If the item in the range is set to "out-of-stock", then remove the item from the data validation list on 'sheet#1' and if it is "in-stock" then show the item on the data validation list.
Sheet#1
Here are some things I have tried thus far (if it helps):
on sheet#2 when an item is set to out stock, conditional format it, to make the cell text white (not visible). This works well for that particular sheet. however, data validation lists do not display the data it pulls exactly as it appears (so the text still shows on the dropdown list)
IF statement. I've tried a WHOLE LOTTA IF and IFS statements. This did not work, because you cannot have an if statement in the same cell as a data validation cell and b/c the cell name will likely need to be constantly changed in the future. (But I did, however, find a workaround to another issue I was trying to solve for a day now WHOOP WHOOP!)
Oh and I also tried conditional formating the cell so that if it ='s out of stock white out the cell... however I get an error that conditional formatting does not work across 2 sheets
... so yeah if anyone may know of a solution to get this to work I will forever appreciate it! I'll keep scouring google for solutions in the meantime.
For the sake of simplicity, I've created a sample spreadsheet with two sheets: Sheet 1 and "Stock".
Sheet 1
Stock
Solution
I've created an Apps Script function to set the Data Validation as you have specified.
I've used the Javascript filter and map functions to simplify getting the data, but basically:
I get all the rows from the Stock sheet and load them into "memory"
I then discard from "memory" the rows that do not have their second column (row[1]) equal to "In Stock".
Then I get the remaining rows and grab only their first column (row[0]).
I then create a new DataValidation object (with it's builder) that uses the list we got above and assign it to the range I want to have validated.
//VARIABLES
var rangeToValidate = "B2:B";
var validateSheet = "Sheet1";
var optionSheet = "Stock";
function refreshDataValidation() {
var inStockOptions = SpreadsheetApp.getActive().getSheetByName(optionSheet).getDataRange().getValues()
.filter(function (row) { return (row[1]=="In Stock")})
.map(function(row) {return row[0]});
SpreadsheetApp.getActive().getSheetByName(validateSheet).getRange(rangeToValidate)
.setDataValidation(
SpreadsheetApp.newDataValidation().requireValueInList(inStockOptions).build()
);
}
Also, by adding some code with Apps Script, the sheet will make sure that your drop-down is always up-to-date.
I am refreshing the drop-down every time the sheet is opened and every time there is an edit to the Stock sheet on the B column.
//When the sheet is opened, refresh the data validation
function onOpen(e) {
refreshDataValidation();
}
//When a change is made to the Stock sheet, also refresh validation
function onEdit(e) {
var range = e.range;
if (range.getSheet() == SpreadsheetApp.getActive().getSheetByName(optionSheet) && range.getColumn() == 2) {
refreshDataValidation();
}
}
Hope this helps!
Okay guys I found a solution, anyone visiting this post in the future here you go!!!
So yes, you can use the script as provided above. However, if you already have other scripts, data validations, and other formatting's going then ,like me, you may actually run into a lot of errors and conflicting issues.
As a workaround here is what I did to get everything to work properly. you will need a total of 3 sheets: a main sheet, a 2nd sheet with your options, and a 3rd sheet to house the pulled data.
On the 2nd sheet, be sure to have a column that shows if the item is "in-stock" or "out-of-stock" (I did it as a dropdown menu)
On the 3rd sheet select the cell where you would like the data to show. And use the filter function formula to pull only the rows from sheet 2 that are equal to "in-stock"
Formula syntax: =(FILTER (range, condition1, [condition2, ...])
My Formula: =FILTER( sheet2!G3:R5, sheet2!I3:I5 <> "out-of-stock")
sheet2!G3:R5 = the range of rows/columns I want it to pull from.
sheet2!I3:I5 = the column I would like it to look for the words "in stock" or "out of stock" in
<>"out-of-stock" = show me the data if a cell in column I3 does not equal "out-of-stock" (meaning, only show in-stock options)
As you can see the formula will pull/show you all the rows that = "in-stock", anything you have set to "out-of-stock" will not show on the 3rd sheet.
Last part,
On the main sheet select the column you would like for your drop down list to show in. Add the data validation being sure to list from the range on the 3rd sheet (not sheet 2).
Now you can hide the 3rd sheet as you should no longer need it, unless debugging.
Finally, As you can see now, my main sheet will only show the items in the drop down list that are set to "in-stock", out of stock options are removed from drop down list, unless set back to in-stock. (see how pic3 only shows 2 options in drop list, although pic1 shows that there are 3 options available).
so now basically if I change an item to "out-of-stock" on the 2nd sheet, the item will be removed from drop-down list on the main sheet, AND if I change an item to "in-stock" the item will be added/displayed on the drop list. The 3rd sheet is no longer needed. This solution is perfect if you have multiple users and would only like for them to be able to select an option that is "in-stock"!
Hope this helps someone!!! And thank you to the people of above who gave other possible solutions!!
I want to make pop up windows for each columns in my table component to explain where the numbers in this column come from. The link below is a example of pop up on pie chart. Does anyone know how to do it in a data table?
Popup Component Example in pentaho CDE - Popup on Pie & in the popup showing bar chart or any other CDE component
EDIT 2017:
I'd like to present another way (maybe a better way) to access the rows in a table. Now what I am doing is this:
Dashboards.fireChange('my_variable',e.tableData[e.rowIdx][column_index]);
e.rowIdx returns the index for the row I am clicking. When I use e.tableData[e.rowIdx], I am able to get all the columns in that row, and knowing what column gives me the desired value, I can access it using the column index.
Original post:
I'll relate my experience. I have one table that, when I click in a row, executes another query in my dashboard.
What I did, and I don't know if this is the best way of doing it, was executing a javascript code when I click on the table, and check if the column clicked is the one I need the information from.
In the table component's "clickAction" property, I have this js:
function f(e){
if(e.category == 'COLUMN_NAME_DESIRED')
{
Dashboards.fireChange('my_variable', e.value);
}
}
And I have another table component listening to 'my_variable'. So, when the value changes, the dashboard loads this other component.
In your specific case, I would do this:
function f(e){
if(e.category == 'COLUMN_NAME_1')
{
alert('this row represents X');
}
if(e.category == 'COLUMN_NAME_2')
{
alert('this row represents Y');
}
}
Now, if you want to use a pop-up dialog and not a js:alert, look for some css examples. I think it would help you.
I have a panel that contains two grids, both of which are editable using the cell editing plugin. Within the grids, users can use the tab key to move between editable fields. However, I can not seem to find the right way to get the tab key to allow the user to move from the last editable cell in the first grid to the first editable cell in the second (there are no components between the two grids). The user is just stuck in the last editable field of the first grid.
I tried using FocusManager, but this made keyboard navigation far more complex, rather than less, requiring use of the arrow keys to get into and out of each form element and grid.
I added this code to the parent panel:
var nav = new Ext.util.KeyNav(Ext.getDoc(), {
tab: function(e) {
console.debug('TAB HIT!', arguments);
},
scope: this
});
nav.enable();
just to see what tabs were detected, but it only activated when the tab key was clicked and a form element in the parent panel itself had focus.
I guess there are a few elements I need to learn, how to I pass focus from element to element, and how do I detect the first and last element in a grid? Or is there some way to do this built into ExtJS? Any suggestions or advice would be greatly appreciated.
I would use the new cellkeydown event for grid panels.
Implement a handler for that event which checks the key type, and whether the cell is the last column in the grid, then starts a cell edit in the first column of the corresponding row in the other grid.
You can find out if it was a TAB key from the 7th argument passed by this event.
You can find out if it is the last cell in the grid from the 3rd argument passed by the event.
The rowIndex is the 6th argument - use that so you know which row to start editing in the other grid.
Event handlers can be added to components using the on method by the way.
You can also look up the functions that need to be called to start cell editing in the API here.
If you had more code and maybe a bounty I might be able to get more specific but that's the gist of how I would do it.
I am trying to add rows dynamically inside a grid using a button and remove individual rows using an action column function. I have two text fields (name, email) inside the grid on each row. So when the user hits the add button, a new row should appear with name and email fields. The third column would be an action column and when the button in the action column is clicked the entire row should be removed.
It would greatly help me out if somebody could share some sample code for me to get started.
There are some great code examples in the docs. This is where you have to head first, before asking here.
Look at this row editing example.
I am trying to find the proper way to dynamically add/remove columns in a GridPanel that uses CellEditing plugin in Ext JS 4.0
I tried to add/remove columns dynamically in a GridPanel, using the HeaderContainer add(), insert(), remove() methods
The problem is that CellEditing plugin stops working correctly when I try to add or remove more than one column:
when existing cell in edit mode the text and cursor is not visible
first newly added column is not editable at all
second added column is editable
Steps to reproduce:
start the page
select cell in the column to insert column position before which to add new column
click add column button and type Name1 in dialog press ok
repeat steps 2-3 Using Name2 as column name
try to edit text in existing Company column and in column Name1 and Name2
You can find the full source code and example here:
http://jsbin.com/otorix/edit#source / http://jsbin.com/otorix/edit#preview
Can you reproduce this behavior?
Can you confirm this as bug?
Or what am I doing wrong?
I will be grateful for any help you can provide
you were right, there was a bug, but apparently it was induced by the way you reconfigured your grid, I added some modifications to your code ( just for the add column) i guess the remove should be fairly easy, so my corrections:
the memory data for the store rangeData was an array , while the reader was expecting an Object with an array inside an items attribute (this didn't seem to cause any errors but it's much clearer this way)
The column reconfigure was the main issue, i removed the part where you create a new column and just write the config for the new column, after that added the new column at the end of your column array, or somewhere in the middle using splice. The reconfigure function on the grid offers the posibility to reconfigure the store and the columns so is safer then adding the newly created column in the header container.
you have the modified code here http://jsbin.com/otorix/17/edit