access header value from ng-grid - javascript

We are currently using ng-grid to display click-able flags in a grid,
ie. cell 1 contain a green flag, cell 2 empty, cell 3 contains a red flag.
The flag represents the status.
To make the flag clickable, we have created a directive within each sell
<gridresultsummary data-ng-click="filterReportByOrderFromSummary()" resultsummaryflag="{{row.entity[col.field]}}" />
the filterReportByOrderFromSummary() function at the moment, simply shows a static alert.
What we are struggling to achieve, it a way to pass the column header into this function.
we have tried many variations of
{{row.entity[col.field]}}
{{row.entity[col.header]}}
{{row.entity[col.headerValue]}}
however, still cant seem to capture it.
What is the syntax to retrieve the column header within a directive?

You can try this :
{{col.displayName}}
It will get you access to the displayName from within the column.
Example here.

Related

How to get button to act as column search filter within ag-grid and search for a set list of items?

SUMMARY: I have a column for ids within an ag-grid table. How can I get a button-click to only display some of the rows (for which I have a list of ids), while not re-writing the whole table?
BACKGROUND: I am using the community version of ag-grid and am using it with Javascript. I have a column with the id numbers in it. When I click a button (or something else eventually, but start with a button for simplicity), is it possible for it to act as a filter within the table, and hence could be undone by clicking another button to clear the filter?
In case that wasn't cleaar, I am looking to do:
1. Click button1
2. Display certain rows within a table whose id numbers are in my list variable
3. Have this button1's action act as a filter that can be undone by a button2 (which could be programmed perhaps like a clear filter button)
Is this possible to do with a quickfilter? Otherwise, if this isn't possible, how could I do this when over-writing the table, whilst still having the option to 'instantly' revert back to the original table
(I don't think I need to add code as I am unsure of how to build in this functionality)
Thanks in advance.

Getting row data on Interactive Report

Morning,
I'm currently using an Interactive Report on APEX that contains several columns, some of them being checkboxes that represent if a certain number is present in the table that is being used to fill the report.
For example, row 1 has a telephone number "99091021", row 2 a provider, and the following 5 rows are checkboxes that should represent branches in certain areas. If a checkbox is clicked, it means that this number is present in that area.
Now, I'd like to create a dynamic action that inserts that number into that table when I click the checkbox (and it becomes checked), and a delete for when it's also clicked (and becomes unchecked). Problem is, I don't know how to access the rest of the data in the row of the IR to use as a comparison for the delete and insert statements.
Say I try to click the Checkbox 3 on the row where the telephone number is "99091021". A dynamic function would get the data row, then a true action would compare the necessary data to perform either an insert or delete, depending on the state of the checkbox. That's the plan.
I've done something similar before, using localStorage, but it didn't quite work, because before I used it on an interactive grid. Is there a similar function for interactive reports?
Also, is there a way to check if a checkbox is checked or unchecked in a PL/SQL Code?
Here's the solution I found:
I had a select that got the necessary data for the Interactive Report, but because I kept getting an error of temporary data table being exceeded and always breaking the server, I had to change the checkbox query to something like this:
apex_item.checkbox (1, '1_'||a.pk, case when max(decode(b.nr,1,1,null)) is null then '' else 'CHECKED' end) as checkbox1
The '1_' part represents me selecting the first checkbox. With the value still there as the selection, I was able to do the following:
$s("P165_GET_PK",this.triggeringElement.value)
The result would basically be "1_PK_number". With this function I was able to get the value (a.pk) hidden in the checkbox to an Apex item, and then continue using it for my insert and delete statements. It's just a matter of separating the value in it with substring functions and so on.
Now I can delete or insert new data inside that table with a simple click.
I hope it helps in case someone tries doing something similar.

JQuery Datatables Responsive extension: column class not retained for cells in expanded rows

I am using columnClass property to assign different rendering (and event processing) to cells belonging to different columns.
When the table fits within the screen every element gets the class as specified by the columnClass property of its column and I can easily hook some rendering/processing functions to the elements.
However, when some of the columns don't fit within the page and I expand the row (by clicking the '+' button) the cells are renedered with no reference to the class of the column. I reviewed the custom renderer for the cells of the expanded columns and also see no way finding out what the column class of a cell is.
Ideally, I would like to use the same custom field renderer as defined in the table. Is there a way I can do it?
Example:
Let's say I have 3 columns: name, dob, salary.
I defined 3 classes for the columns: name_class, dob_class, salary_class.
For each class I use a jquery selector and assign diffrerent rendering/behavior for each cell of that column.
Now, I resize the table so that dob and salary get overflown and click on the '+' button to expand the row of interest.
I would expect to get the dob cell with the dob_class attribute and salary cell with the salary_class attribute, so I am able to link the same cell renderer to them.
However, ****the class attribute is no assigned (not retained) and I cannot link with jquery using the class attribute. ****
**Could you please suggest an solution that would allow me to retain the column class on the cells of the expanded row? **
Sorry, no, that's not currently possible. It has been raised against the code already, see https://github.com/DataTables/Responsive/issues/93, so it is on the todo list. I'm not sure why the OP has been voted down, seems a bit unfair to me, as it is a valid question.

Add dynamic column to table in smart-table [angularjs]

I needed a little help over here on adding dynamic columns to table and I'm using smart-table project https://lorenzofox3.github.io/smart-table-website/
Please look at plunker
https://plnkr.co/edit/uTDa6hfwdgGtGWkYqL7S?p=preview
Click on add new column, it will update the table header, but I can't update the td element because I haven't created or binded any td element for new column.
Need help on two things.
1) Any number of new columns might come in future from server dynamically, so I can't bind any element statically in html like I did right now.
2) This is a little long one(I want to create a only one header as MV and in colspan I want current and next) and How do I accomplish that one ? If I divide like that, how do I go frame the data ?
Additional Note on Question 1: I have tried dynamically showing the data in table. please look at line 27 in index.html. But again, If I go with this approach, the values get binded to different different columns since, data's are framed dynamically on controller. To be simple, there is no guarantee that data will be in in this order.
(SNo, companyName, companyFullName, MarketValueCurrent, MarketValueNext, QuarterCurrent, QuarterNext)
companyName might come first or at last. If I go by dynamic looping using ng-repeat, it binds MarketValueNext in first column, then companyName, etc in whichever the order the data is coming.
Thanks in advance.

Angular ng- grid - hide/remove column input from column menu

When you use the flag 'showColumnMenu' with true value.
the ng-grid is rendered with button on the right end top panel.
Using this button we can hide/show the column on the grid.
In my Case I don't want to make it possible for some column to be visible on the grid - Meaning I want the the column menu box will be rendered with out some column.
Iv'e created plunker which demonstrated my problem
> http://plnkr.co/edit/VXOzBIRfyY3FoCTct9PI?p=preview
In that plnkr - I set column 'Id' to be invisible using (visible: false)
But if the user click on the column menu on the right end panel
he will be able to set it visible..
EDIT
Another scenario that I need to cover is case where there is some other
column say 'name' that I don't want the let the user configure it (by setting it as invisible) inside the column menu - meaning that column 'name' must always be on the grid!
and the user does not need to see it in the column menu..
So, if only i could hide those columns (id,name) inside the column menu
my problem will be solved..
Thanks!
You can do that editing a bit menuTemplate.html in ng-grid source file
Find line starting from :$templateCache.put('menuTemplate.html',
and line
<label><input ng-disabled=\"col.pinned\" type=\"checkbox\" class=\"ngColListCheckbox\" ng-model=\"col.visible\"/>{{col.displayName}}</label>\r" +
change to
<label ng-hide=\"col.colDef.alwaysVisible\"><input ng-disabled=\"col.pinned\" type=\"checkbox\" class=\"ngColListCheckbox\" ng-model=\"col.visible\"/>{{col.displayName}}</label>\r" +
now you can add
alwaysVisible:true
to columnDefs and it's done
Please see here working demo http://plnkr.co/edit/qmoILJ5LTMSlH7Uv9Rw8?p=preview
Why not just turn off the column menu? It sounds like you basically don't want to use it anyway. Is it important for your users to be able to hide the age column, when they can't control any other?
For hiding ID, I'd recommend not putting in the list of columns in the first place. Even if you don't include it in the grid, it will still be present in the data and accessible by your code. The grid is just a place to display information to the user, so don't put info in there that you don't want to display.
Edit: Check out UI-Grid, the updated version of the Ng-Grid project: http://ui-grid.info/
It has a new ColumnDef property, "EnableHiding" for exactly this case.
Here's their documentation for upgrading from ng-grid: http://ui-grid.info/docs/#/tutorial/099_upgrading_from_2

Categories

Resources