I wanted to reinitialize the Slick Slider. For this I wanted a method where I can get any existing instance of slick js. And on a particular case I want to redraw the Slick Slider.
Related
I am using bootstrap calendar inside slickgrid. When calendar popup is opened and use Alt+tab or scope out of slickgrid then calendar gets stuck. I have to reload application to get rid of calendar popup. I want to close calendar pop up as soon as user scopes out of slickgrid. Please suggest way to do it.
Not sure if it's your problem but you can't use just a z-index in SlickGrid that won't work and won't do anything, you need to use position: absolute on your Editor (each editor has a args.position passed to their constructor) that you can use to reposition your editor next to the cell that you clicked, however make sure that you also add a position() method that will be called if it exist and of course you need to add proper code to reposition the DOM element inside that method. Also when you click on a different cell then the previous Editor will call the destroy method, so make sure you remove the Editor properly by adding necessary code in your destroy() method.
All of that position usage can be seen in 1 of the built-in Editor which is the LongText defined in the slick.editors.js on this line
The absolute style is applied here
and the position(cellPosition) method is defined here
If your problem is really that your Editor doesn't get removed from the DOM, then it's because you didn't code the destroy() properly and here is the LongText destroy() method for reference. Also you might want to add an onBlur event that will call your destroy() method after a blur or any other event that you choose.
and here's a print screen of the LongText Editor that is repositioned over the cell you clicked and you can test it yourself in this Example - Editing
I'm using the CKEditor's widget functionality to create my own widget with a jquery component there. However when the widget is dragged and dropped it gets destroyed and all the state in the jquery component gets lost.
Can this behavior be avoided? Is it configurable? Why it is required (maybe the CKEditor team can answer this)?
It is true that the widget is destroyed (and re-initialized) during drag and drop, this behavior can't be avoided.
How do you link your jQuery component with the widget object? What does your widget definition look like? (It is the object that you pass in the editor.widgets.add() call). Do you use Widget.setData() / How do you set this jQuery component as widget data?
If it's hard for you to answer these questions, you might just copy paste here the source code of your widget instance (open the browser's developer tools and look for an element with the data-cke-widget-id attribute - do not confuse with source mode view in CKEditor). Paste it with the whole content.
Widgets store their data in the data-cke-widget-data HTML attribute. A blind guess would be that you either do not set the data correctly on the widget or when it is stringified and then parsed back, it doesn't handle the jQuery object properly. Maybe you could initialize your jQuery component using widget.definition.init and keep the data as a plain object (Widget.setData)?
You might also want to look to CKEditor widget documentation for more information.
I have table that loads relatively un-aesthetically to say the least.
I am looking for way to have the a loading animation over the div that holds the table, as that is the problem, before it loads but I am not sure if jqgrid has the appropriate events. I am looking for something like pre-load or pre-init, and then on-ready un-block or end the animation.
If you are using AJAX to fill the grid, you can use $(yourgrid).ajaxStart(handler) to attach an event while loading data and $(yourgrid).ajaxStop(handler) to hide it. JQGrid have an option to set to not display loading message, loadui.
I have a custom entity which has an entry in the sitemap. When I load the entity in the main window, it opens the grid view on the right - standard behaviour so far.
I now want to change some thins in the DOM of the grid body. Therefor I should execute a Javascript while loading the grid. But I have not found any way to do this yet. I sthis possible?
My second way was to but the grid into an Iframe and then do the task on load. This works, but I loose all the buttons from the entity.
Thank you
The best (and probably only) way I can think of to attach javascript to the load of the homepage grid is to add your functionality to a CustomRule for an EnableRule for any object in the custom homepage grid ribbon, which will execute at the time the ribbon loads.
Only caveats: you probably will have to do some validation to make sure the grid is in the right readyState before changing anything, and you'll need to make sure to return true if you actually want that ribbon object to be enabled.
I need to implement a sought of onRendered() event that would ensure all of the grid is rendered before I do something, which is to .hide() it. My gaol is to have a .hide() and .show() button attached to the div the grid resides in, with the default status set at hidden. The problem is that at the point in which my script executes the initial .hide(), the grid is not fully created yet by the grid.js script. I would rather not do any delay loop. Much rather have a callback.
Any help would be appreciated
Thanks
Pat
This should work without a callback. I have a SlickGrid app where I show and hide the grid in response to UI events. The grid exists as soon as it is instantiated (with new Slick.Grid) and can be manipulated with the .hide()and .show() methods.
I did find one catch though...
If you create the div tag with display: none (so it is initially hidden) the grid columns do not initialise properly. To workaround this I create the div tag with visibility: hidden and remove this style before using the .hide()and .show() methods.
My code looks roughly like this:
<div id="mygrid" style="visibility: hidden"></div>
$grid = $("#mygrid")
grid = new Slick.Grid($grid, gridData, gridColumns, gridOptions);
// Hide grid by default, remembering to remove the visibility style
$grid.hide();
$grid.css("visibility", "visible");
// You can now show and hide the grid using normal jQuery methods
$grid.show();
$grid.hide();
Hope this helps.
The slick grid has implemented an event onRendered event github source. We can subscribe to this event and make the appropriate use of it.