I am looking at the first demo on the row grouping page of the ag-grid documentation and the drag and drop behavior does not seem to be correct.
I am able to remove columns from the Row Groups section, but I cannot add them back again. I have tried this both on firefox and chrome. I am on a mac.
I also see the following warnings in my console:
ag-Grid: count not find callback onExpandClicked
(anonymous) # ag-grid-enterprise.min.js:
ag-grid-enterprise.min.js:2 ag-Grid: count not find callback onSelectClicked
(anonymous) # ag-grid-enterprise.min.js:2
ag-grid-enterprise.min.js:2 ag-Grid: count not find callback onFilterTextChanged
So, it looks like some callbacks are not being registered, and this is preventing drag and drop to work.
I also created a plunkr here, which may make things easier to verify. Please not that this plunkr is unchanged from the demo linked to above.
I have tried with ag-grid versions 15.0.0 and 17.0.0 on both firefox and chrome.
So, why is drag and drop not working?
Looking at the plunkr, it seems like there might be a typo and/or an outdated config demo. You "enableRowGroup:true" not "rowGroup:true".
Related
I am using a very similar platform to codesandbox for adding/editing code where I simply need to open code tab and update some content, like in the example below - update "PING" to something like "PONG". This has to be done through JS code (for now I am just trying from chrome console), to be more precise - I will be using my chrome plugin to find and update text.
While my plugin finds and updates element in the code tab just fine, the save is not triggered, if I am doing this manually using my keyboard, then autosave is working just fine. I understand code container fires some events when I type in some text and then saves it, but I have no luck finding what has to be triggered in order to call autosave, tried various el.dispatchEvent(...keyup/keydown/keypress ..etc ..) methods, no luck yet.
Any assistance is greatly appreciated.
https://codesandbox.io/s/summer-dawn-psdsh?file=/index.html
I'm looking for a way to show a boolean value as a clickable checkbox in the table.
In my current example, I have a value called "charged". Currently this is shown as a check. It would be great to have it as a checkbox in order to update the value really quick, instead of clicking on edit on the specific row and update it there.
Example screenshot
Would appreciate any recommendations.
Thanks
The Backpack team has something in the works for this - a package they call "editable columns". But it will probably be launched in Feb-March 2022.
Until then, you can
(A) create a custom column type that will make an AJAX call. For the javascript, take a look at the delete button for inspiration.
(B) Send an email to hello#backpackforlaravel.com for beta access to that package (includes editable_checkbox, editable_switch and editable_text column types right now.
I have an eclipse plugin and I would like to programmatically disable help content TOC's based on a variable I define. In a nut shell, I want to prevent some help docs from showing up in the help contents if a specific type of user is accessing the plugin.
Preferably I would like to do this in the ApplicationWorkbenchAdvisor somewhere.
One thought would be to modify the "primary" value to be false if the variable were set.
Not sure if it would work, but try using the org.eclipse.ui.activities extension point. The tutorial from Vogella tells it is possible to hide only UI elements like wizards, views and so on, but it is from 2009.. Not sure if hiding TOC is now possible. If you try it out, would be nice to give a feedback ;)
I was reading the documentation of the .on event handler of jQuery and I started playing around with it.
I have a simple <select> element with the multiple attribute set to true.
However, I want the user to be able to select multiple items without having to press the ctrl or shift key(s)
According to the .on documentation, if you specify a selector it will automatically add those event handlers to any new items added inside that container that match the selector specified.
So in my case, I could for example decide to replace the <option> elements available in the listbox, but I still want to have the same functionality for those options without having to rebind those events etc.
One might think that the following snippet should do the trick (atleast, I did):
$('#dropdownlist').on('mousedown', 'option', function(e){
e.preventDefault();
$(this).prop('selected', $(this).prop('selected') ? false : true);
return false;
});
So when a users clicks on an option in that listbox, the default action will be cancelled and depending wether the item is already selected or not, it will invert that selection.
I have created a small fiddle demonstrating this behaviour: fiddle
In that fiddle, the first dropdownlist is behaving as expected, but the functionality is lost when replacing the items. This only works in FF & Chrome.
The second dropdownlist is how I thought it should've been (event handling wise), but that doesn't seem to work besides in Chrome -.-
The functionality is kept when replacing items, because the console will still log '2' when clicking on an item after replacing them.
Can someone explain me why this is happening? Am I doing something wrong?
Please point me in the right direction!
Thanks!
~ Dirk
IE doesn't respect the mousedown event on the option tag itself. You've got to use the OnChange event of the select tag, which is not what you (nor I) want. I was trying to do the exact same thing as you and was stopped at every attempt. I finally gave up and made it a list of checkboxes because I can get the same behavior out of mine that you are trying to do here.
You can see this question for some options, but I never did get it to work the way you are describing.
The object is to Show-Hide text located under their respective Titles, so a User reads the title and shows or hides text belonging to that title if the User wants to read more.
I tried whatever I could find so far on here, we're talking dynamically setting text coming from a spreadsheet, can't use IDs, must work with .class, must be missing something, I have this piece of code:
... html.push('<div class="comments">' + comment + '</div></div></div>');
but when I try this Show-Hide code nothing happens, even if the error console shows nothing. Basically I want to Show-Hide the .comments class divs with a show-hide toggle link located under each of them. I say them because the .comments divs are reproduced dynamically while extracting text coming from Google spreadsheet cells/row (one .comments div per spreadsheet row). I tried .next, child and parent but they all divorced me so I dunno looks like a dynamic issue. So far I only managed to globally toggle all divs to a visible or hidden state but I need to toggle independantly individual divs.
I prefer a jQuery solution but whatever worked so far was achieved with native javascript.
Note: If a cross-browser truncate function which would append a more-less link after a number of words (var) in each .comments divs would be easier to implement then I would gladly take that option. Thx for any help, remember I am still learning lol!
I have been working on an entirely JS UI project and have brought myself to using $('', { properties }).appendTo(BaseElement) to work best for adding HTML elements because it appropriately manipulates the DOM every time.
If you are having good luck with push elsewhere, however, breakpointing on the line where you do your $('.class').hide() and see what $('.class').length is. Alternately, you can just add alert($('.class').length) to your code if you are unable to breakpoint the code. If it is 0, then your elements have not been properly added to the DOM. Changing to append will ensure they are part of the DOM and therefore targetable via JQuery.