dgrid ColumnHider: disabling the hide columns menu? - javascript

I have a dgrid with a permanently hidden column that needs to be there, because I need to filter the table on its values. I am using ColumnHider in order to hide it and it works fine.
However, using ColumnHider also shows the small "+" button in the table corner that is used to hide/show columns, and I really don't want that button to show (hiding/showing columns is not a functionality we need to offer). I know I can use the unhideable property on the column, but this simply removes them from the menu. Even if I set all columns as unhideable, the button is still there with an empty menu.
Apart from hiding it with CSS, which I did, is there a way to tell ColumnHider not to show that menu at all?
Thanks, regards.

There's no programmatic way to completely hide the ColumnHider menu. The simplest way is with CSS, e.g.:
.dgrid .dgrid-column-hider-toggle {
display: none;
}
It's also possible to just suppress a column from ColumnHider's list by adding unhidable: true to the column's definition.
However, it's not fully clear to me whether you even need the ColumnHider extension. Regardless of what's in your actual data, if you don't want a particular field to be displayed in the grid, just don't define a column for it in columns (or whichever property you're using, e.g. subRows or columnSets). You'll still have the full data item available to you e.g. for renderCell functions and if you extend renderRow.

Related

Bootstrap-table: Prepopulate Column-Select button: a few selected, most unselected

I want to render a bootstrap-table page, and the dataset has quite a few columns. However on page-load I want to show only a few (2 or 3) columns, but have the other columns "in reserve".
Here is a GUI mockup to show what I mean:
Collapsed
Button Expanded:
Here I have clicked on "Toogle all" to deselect all, then selected the first 3 manually.
I'd like to have the 3 selected on page load. Is there alaready a setting or an option that I can use to acheive this?
Users should see a simple table, and only power-users will click on the button and add more, then do horizontal scrolling, change column selections etc
Answering my own question, because I cannot really revoke or delete it.
This question is a duplicate of "https://stackoverflow.com/questions/41446362/hide-columns-in-bootstrap-table-at-startup/41488928#41488928" from 2017 .
There question has a few alternative answers already.
For my use-case it was sufficient to follow the accepted answer. It recommends to put these HTML data-attributes into the tr of the thead element:
<td data-visible="false" ...>
This is the simplest solution and works well for small tables, and if you have absolute control over the table-generation- and column-selection process.
Columns disabled this way will still be available with the "Select columns" button created with data-show-columns="true" and data-show_columns-toggle-all="true".
It might not work so well in more complicated scenarios, e.g. when you need to access the hidden columns via the DOM. For details see "https://stackoverflow.com/questions/41446362/hide-columns-in-bootstrap-table-at-startup/41488928#41488928"

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.

Determine child-most element clicked on for Javascript event (DataTable related)

It might be that the way I'm approaching this just won't work, but to explain:
I have a DataTable with column sorting enabled via the default column header sorting graphic. In one of the column headers I also have a "select all" checkbox. The sorting and the "select all" both work, but I can't seem to prevent the sort operation from taking place when clicking on the select all checkbox.
The problem seems to be that the DataTables sort function is called ahead of the select all operation - in the capturing rather than bubbling up phase in what I understand to be the correct JS parlance.
I've been back and forward with this between different guides and forum posts, but am starting to wonder if it's going to work. I've added event.stopPropagation() to the select all routine, but because this is only called after the sort routine it seems of little use. I've also gone down the event.target route to conditionally only have the sort operation run if the clicked ID wasn't the checkbox, but for all I can tell the event object holds no reference to the original clicked element (does it?).
So, without editing the DataTables source (I'd really rather keep that off the shelf if at all possible), how do I have the sort routine run only when the column header itself is clicked, as opposed to a child element?
So I want something along the lines of:
function SelectAll(event)
{
event.stopPropagation(); //Doesn't help
...
}
$("#table_id").on("order.dt", function (event, settings)
{
if(event.not_clicked_select_all)
{
table_id.order();
}
});
How might this be done? Thanks.
Edit:
Jsfiddle
You can actually use a little css trickery with the z-index. Just put your inner div on a z-index that is higher than the cell.
th > div {
z-index:9998;
}
That will allow your checkbox (not the SELECT ALL label) to function the way you want it to. If you want to allow users to be able to click on the label too, then (if you are able) wrap the SELECT ALL in a label element and apply the same event.stopPropogation and my css technique to that label as well. Like this:
HTML
<th><div><input type='checkbox' id='select_all' onchange='SelectAll(event, "select_all", "include_")'><label for='select_all'> SELECT ALL</label></div><div>h</div></th>
CSS
th > div {
z-index:9998;
}
th > div > label {
z-index:9999;
}
Javscript
$("#select_all").click(function(event){event.stopPropagation()});
$("label[for='select_all']").click(function(event){event.stopPropagation()});
If you don't have access to the source and cannot wrap SELECT ALL inside a label element, there is probably some other css trick you can do. The key is to be able to target the label text individually and set it's z-index property.
Here is a working sample with both the checkbox AND the label:
https://jsfiddle.net/mspinks/y1g450ng/1/

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

Clicking contained element also effectively (but wrongly) clicks its container

This is the problem page I'm developing.
Consider the leftmost column header, with header text "Undr." Here is the simplified html for that column header:
<th class="underlying" onclick="toggleColSelect(this);">
<img class='ad' onclick="toggleColSortOrder(this);">
Undr
</th>
The user can do two things in the column header:
select and deselect the column, by clicking the column header. EDIT: The column is selected when the column header has a yellow background; and unselected when the column header has a white background.
select ascending or descending sort on the column contents, by clicking the up/down-arrow image.
However, clicking the image also selects/deselects the column, which I don't want. When he clicks the image, I want to toggle the sort order only; I don't want to toggle the select on the column.
My JavaScript function toggleColSortOrder(); does indeed toggle only the sort order; but it seems the function to select the column also gets called (wrongly) when the user clicks the image.
What I've tried: thinking this might somehow be a manifestation of bubble-up at work, I tried all combinations of returning true, false and nothing in each of the two functions. None of this had any effect. I'd like to avoid hacking the JavaScript any further.
Question: how, by changing my html or css, can I prevent the function toggleColSelect(); being called when the user clicks inside the up/down-arrow image?
Your can cancel event-bubbling by adding
event.cancelBubble = true;
to your functions. See this fiddle: http://jsfiddle.net/fcyCz/
Here is my theory, since your <img> tag is INSIDE your <th> tag, you cannot click the <img> without first 'clicking' through the <th>. If there was a way to un-nest these two tags, I would then assume that their functions would be called separately. Possibly using a <div> to align your <img> over the correct spot. I am going to try to do live adjusting of what I just said using firebug and see (if it doesnt break the javascript) if it works, and I will report back.
Good luck.
As Tomalak points out, the click event for the <img> is bubbling up to the parent <th>, and so you must specify otherwise in your function. Also, add a call to event.stopPropagation() for the browsers which have deprecated cancelBubble.

Categories

Resources