Duplicate classes in parent grid div
I am building a slickgrid component for mithril.js and came across this issue -
<div id="gridPane" style="width: 100%; overflow: hidden; outline: 0px; position: relative;" class="slickgrid_467059 ui-widget slickgrid_42992 slickgrid_52894">
Duplicate slickgrid classes get created every time the grid gets new data passed to it with a unique ID. Any Ideas?
Given that the uid is created just once in the constructor, and the container div is passed to init(), i'd suspect that you are either re-passing the same container to several different grids by mistake, or more likely you are calling the grid constructor multiple times.
I'd need to be able to repro the problem, using a minimal example based on the repo simple-example, to comment further. Also 'gets new data passed to it' is ambiguous, that needs to be in the example too.
I've got the same issue on my version not sure the cause. As you say tho could be a double load
I'm open to the fact that this is a bug. Could I get a reproduction test case based on an example from the repo?
If I get a chance I'll see if I can replicate outside of work project
I've found in my case what is happening. I have a reload method that is reloading to the save div. (In my case there is to much changing to just reset the columns and the data ect.)
I've now got a check that gets the old UID and removes it.
Again i'll try and make you a example code. Not sure if the setup should be checking for if there is a slickgrid_UID class present and maybe using that OR remove old class. But this maybe something that is not classed as a bug not sure.
Also this maybe different than @Pheonix929 issue
@6pac and @SatanEnglish Hey Guys so i found that in my case although i reload data and columns the method i had seemed to create a new "instance" of SlickGrid every time, but just updated the data accordingly. It did not create a new grid but it would append a class to the container.
To fix this issue in my case i added this piece of code to completely destroy the grid, this is becasue when i pass new data to the grid, it could be any number of columns and around 1 - 5 million rows at a time, and the data could be completely different on each load.
//Destroy the grid when i want to render new data
if(grid){
grid.destroy();
}
//Then recreate the grid
dataView = new Slick.Data.DataView();
grid = new Slick.Grid(this.gridDiv, dataView, this.columns, this.options);
@6pac im not sure if you know of a better way to do this, i am very new to slickgrid Hope this helps - not really a bug i guess.
@Pheonix929 That is the correct way, to destroy the grid when you don't need it anymore, You could also overwrite the DataView data and Column Definition but that will probably be slower than destroying the grid.
The only other thing I would check in your case is maybe if you have any event that you subscribe to, you might need unsubscribe. I'm not sure if the events from 1st grid still works the same on the 2nd grid. It might work without unsubscribing them, but just keep that in mind.
Agree with @ghiscoding, the if (grid) { grid.destroy(); } is the correct thing to do.
@6pac
If I use the if (grid) { grid.destroy(); }
Then I get issues with the styleSheets.
In my case I remove the old class from the slick Div if I do this instead of calling grid.Destory() then I don't get the exceptions thrown.
Note If calling the Destroy it doesn't affect the use of grid it just throws errors in.
function getColumnCssRules(idx) <== in the slick.grid.js
If you don't do cleanup it's not an issue just wanted it noted here. (Not sure if this was introduced with the new unique ID.)
could you post a snippet of what you do?
perhaps this code should be called at the start of the destroy() method.
closing since no feedback were provided and it was most probably caused by the first grid not being destroyed, feel free to reopen if it's still an issue by providing more details