We are using Enterprise AG Grid in our react application. I could not find anything on below in official docs of Ag Grid.
How can we hide all columns at once, not using column api but user should be able to do it, may be a hide all check box in tool panel?
Is there any way to customize tool panel? So that we can add more options specifically for #1.
Once we hide all the column and then add it back from toolpanel. Is there a way that we can force new column to be added in the last instead of its original position as per coldefs?
Any help is appreciated, apologies for long text here.
Update 1.
I was able to add workaround for #1, by using Grouped columns and setting groupheaderheight to 0. Added all columns in one group and then a check/uncheck for all is available in tool panel.
Update 2:
Most of it is supported by Ag-Grid now. Please refer their latest build.
Most of these features are supported by AG-Grid (latest build) out of the box (except #3, which is very specific to our application). Please refer AG-Grid's documentation for more details:
Tool Panel Component
Related
I'm trying to author my very first plugin for tinymce. Now, how do I make an element selectable? With the official image-plugin for example the user can click on a already inserted image, it visually gets focused and the image-plugin-button gets focused as well - see gif. Let's say I want to write a plugin that inserts a „Bootstrap Card“ which basically is just a div element. How do I make an already inserted Card selectable plus of course editable once the users clicks my new plugin button? Bonus question: ;-) Any suggestion for a comprehensive tutorial on tinymce plugin authoring?
To answer the bonus question first, there is an article on the TinyMCE blog that walks through creating your own TinyMCE plugin, with the example being an HTML to Markdown transformation
In the article, under the "Add the plugin to the editor" heading, Shahed Nasser writes the steps for adding the custom plugin button to the toolbar. Check under that heading for more information on getting the custom toolbar icon up and running.
For the Bootstrap Card item question – so it sounds like when your users select the Card, you need the following:
Focus on the existing cards in the document
Enable the ability to edit, adjust, or modify the cards in to get what they want written or expressed in the card done.
The first step would be to identify the card items. The TinyMCE.html.DOMparser API has a method that will filter for a specific node within the editor, and allow you to run a function on any nodes that match the filter. You can find the API docs here - https://www.tiny.cloud/docs/tinymce/6/apis/tinymce.html.domparser/#addNodeFilter
That's reaching the limits of my knowledge of what to do, hopefully the docs and article help give you the first steps to get your custom plugin going.
I am currently using the Ag-grid enterprise angular version 20.2.0 in a project and we cannot find an option to deselect already selected cells during the range selection. In addition to that, I cannot find any information about that option in the given doc. https://www.ag-grid.com/javascript-grid-range-selection/.
Is there any possibility to deselect cells with ctrl and another key or do I have to create a feature request, so that they may implement that?
Just as further information, we use the api.getRangeSelections() to process and visualize the given values in a custom status bar component. We expect that customers demand to exclude unexpected data instead of deselecting everything and restart from scratch.
Thank you in advance for your assistance :)
Very good question. After a quick research on the doc, I can recommend you to enable advance range selection, and prompt users that they can exclude their selection only if they go around the cells they want not to select.
For example:
Here above, I selected cells with 'advance range select' ( CTRL + selection ) and remained a cell none-selected. Before I start to select with range, I figure it out which one I am not going to select, so it becomes easier to manage cells to be none-selected.
Go and experience yourself with this link: https://www.ag-grid.com/javascript-grid/range-selection/#example-range-selection-advanced
Apologies in advance, I cannot share the code. I do have a screenshot.
[Screenshot][1]
I am using VizFrame vizType 'combination' which is a combination of columns and lines. I want to be able to hide/show just the line charts for the user to have an option. I have looked everywhere but cannot find a way. All I am able to do is hide data point labels which is not my requirement.
But please let me know if this is possible? If so, how can I can hide/show a line chart on click of a toggle button I have in my toolbar.
I'm using ui5 version 1.52
I'm afraid that if you cannot find a way to do that it means that it's not possible with the standard version of the control.
You have two options:
Extend the current VizFrame control you're using in order to
override/implement what you need
Use a third-party control to
display charts. I would recommend you to check out my implementation
of openui5-chartjs
Is there a way to add a custom column menu tab with my own favourite icon which on click would render my custom react component?
something like
myColDef.menuTabs: ['generalMenuTab', 'filterMenuTab', 'myCustomMenuTab']
FYI I'm using v12.0.2
What you're after can't be done I'm afraid. The grid supports React components in all sorts of ways (renderers, editors, filters etc), but not via the column menu.
I've updated the docs page to remove the gibberish issue - it'll be fixed properly in the next release, thanks for highlighting this.
This would be helpful to have. In particular for us, we'd like to filter based off row properties, and not row values. Creating our own tab to filter by cell colors that we have assigned with our own set of labels would be useful.
I agree that it would be a nice feature to have. Apparently, there's no quick out-of-the-box solution to do it. The only workaround I see is to implement your own custom Header component which would display any buttons your want.
There you can put a button to open your own custom menu, which you can implement as any regular UI component. It also means you'll need to manually implement all standard menu options that Ag-Grid provides out of the box if you need them.
Hie
the demo shows you can click on any column and update the value.
can someone share the code how it has been implemented?
Hi You can use GwtExt or SmartGWT Editable grid and it also gives components for implementing Paging in it.
link to editable grid in GwtExt is here
You can also find paging that is also local and remote both