rowdetails or nested grids

[maxim-s-barabash]

Hi team, I need to Grid can show additional information below each grid row. What can you advise? thank.

RowDetails. or Nested Grids

like http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/rowdetails.htm

[6pac]

Not easily. Slickgrid rows are all fixed height. This is not changeable. I do have a SlickCombo control that drops down a cell into a separate grid. But that's my own private control, and it wasn't that easy to create, and I'm not sure it's fully debugged yet.

[maxim-s-barabash]

Slickgrid rows are all fixed height

Now I'm working on changing this, without losing compatibility. I plan to use getItemMetadata for this. I hope for this will need a minimum of changes.

[6pac]

The height calcs are buit into the grid. Imagine if there are a million rows. To work out the grid rendering, the grid has to work out what row we are at, the size of the next x rows and add them.

Ag-grid, probably the best alternative to Slickgrid, has the option for non-fixed-height rows, but only if you switch off the virtual scrolling feature. Slickgrid's virtual scrolling is built in at a low level.

What you may be able to do is assign several rows to create an aggregated row that is a multiple of the standard row height, then use a scroll bar. Even that's going to be complicated.

[ghiscoding]

I'm also looking into this functionality and I was happy to fall on this Stack Overflow - Can SlickGrid's row height be dynamically altered? question today (even though it was posted 2 years ago). That person who answered on the question also posted a JsFiddle example and she also has a very lengthy article describing how she achieved that. I tried the JsFiddle and modified it to work with the row detail and it works, it's quite cool too, so we could easily add a template to make it easier.

I'm totally going to look into it in the coming weeks, her answer was posted in April 2015 and so I'm not sure how different is the grid code since then but it shouldn't be that bad and she said it's 200 line of JS code. If I ever have the time (or anyone else) to add an example demonstrating this, it would be very cool.

[SatanEnglish]

@ghiscoding Have you had a chance to look into this yet? I found that post myself a while back still haven't found any chance either to try and see if it works.

My current project has been using 6pac new SlickGrid and I'm hoping not to have to move away from SlickGrid as I really like using it.

[ghiscoding]

Unfortunately no, I'm more busy trying to wrap up all features of 6pac SlickGrid into an Angular-SlickGrid and Aurelia-SlickGrid, I'd really like to try out this functionality but that won't be until I got all features wrapped up first.

However I'm contributing when I can to 6pac version, since this is the best fork available. I guess that the ideal way of implementing this would be to create a Plugins or a Control so that it would be optional and not part of the core itself. Though I haven't tested anything, so I don't even know if this is doable without core changes.

Anyone tried it?

[SatanEnglish]

@ghiscoding Ok wow I put the 200lines of code in. Works like a charm I'm only using it as a hole pane across the rows. Checked the reordering via a header and the data ends up in the right place. (If pane is closed) Only down fall with the 200 line one is that you would have to close the expanded panes when reordering is used. Just working through the blog to see what's involved to fix the reordering while pane is open.

PS: No change in the core was needed here! I may have a look to see how plugins work if I have time.

[ghiscoding]

@SatanEnglish I would be more interested in her first version, that is with a detail pane without any column shown in it, not sure if that is the 200 lines you said. Anyhow for the reordering, I would simply use a Grid Event like onColumnsReordered would possibly work to just close the pane on reorder trigger.

It would be nice if you can make it a SlickGrid plugin (with demo) that anyone of us could use just by calling a SlickGrid register plugin

[SatanEnglish]

@ghiscoding

Here is a very simplistic Plugin version incase I never getting round to finishing it. It is basiclly the detail pane from the example as a plugin. (using the checkbox plugin example) It is currently just putting in the random data like the example.

Js Plugin slick.detailsView.js.txt

css slick.detailView.css.txt

// Any grid setup can go here I think

// create the selection var detailSelectColumn= new Slick.DetailSelectColumn({ cssClass: "detailView-toggle" });

// push the plugin as first column columns.unshift(detailSelectColumn.getColumnDefinition());

// register the column grid.registerPlugin(detailSelectColumn);

[ghiscoding]

Thanks @SatanEnglish I decided to take a look at your first draft of the plugin. It wasn't working at first, I had to do a couple of changes for it to work (mainly 2 things, it was missing _dataView = _grid.getData(); in the init() function and getPaddingItem() function was missing as well). Also note that the plugin only works with a DataView since that is what's used in the plugin itself.

After that was resolved, I copied some code with a DataView and made a few styling modifications and finally replaced the text from oook (which didn't mean much) to show instead a template with current item detail. The result is show in the print screen below and I also created a fork and a branch to test this out, you can try from this Github branch and here's the commit of the first working draft.

Feel free (or anyone else) to make changes on the branch and/or create your own PR. I was just curious to try it out with the code you gave us, which is rater small with 200 lines of code in a separate plugin :) I think another cool idea would be to possibly pass a template as an option to the plugin (similar to a Formatter I guess). Then the plugin would have some kind of ways to parse the template to replace item info with actual data. I'm not sure how that would work though since the actual item data is from the grid dataset and I would rather pass a lot of more item detail (not just 5 info but rather 10-15 properties, similar to the original question on top). Anyhow, if we could pass a template to the plugin, as well as detail object and possibly some kind of formatter (or parser) to display the row detail that would be amazing.

[SatanEnglish]

@ghiscoding

My apologizes I had updated the JS file to include the getPaddingItem(), But you must of grabed it inbetween my update.

Am I right in thinking that you have also fixed the height in your version to load from the height of the content?

A template would be nice. (Not useful for loads of data) Could we use something like Using pre-compiled micro-templates to render cells

An ajax call that loads in a partial is what i'm needing. (And a spinner while it loads) Also I saw something in that post about caching data if the ones that are loaded via ajax could be stored so they don't need reloading that would make it fast and useful

[ghiscoding]

@SatanEnglish, I found the missing function in the original article describing the code. I copied it and it started working. Then I modified your css to add some icons for expanding/collapsing.

The height of the panel is dependent on the line height and adding a variable to hold the number of rows your pane has seems to be the key. In my case there's 6 lines of detail, so that seems to be the number to use.

Yeah I would also use it with async (ajax) calls as well since I would use the id to call for full row detail.

So, I was thinking of maybe using asyncPostRender, like this example since this is similar to an async formatter. I also think creating some kind of a callback Formatter is the key for creating custom template to provide to the plugin. I'm not too worried about caching or anything, I think displaying a spinner while it's loading would be decent enough.

EDIT

Thinking more about this and I really think using a asyncPostRender with a Formatter (that would equal to the html template of the row detail) is the way to go. No need to re-invent the wheel. Just re-use the same concept and at the end of the day, it is considered as a regular SlickGrid cell, so a formatter use is ideal. The plugin would have to handle the async callback just like a regular async post render formatter would.

[SatanEnglish]

@ghiscoding

Never used the asyncPostRender so not sure how well I'll manage it. I'll have a bit of a play around with it if I can.

Formatter wise would you see this as something you would add to the generic Formatters in the long run?

Or would it just be another file to include like the plugin and css in the case you want to use the plugin?

@6pac Input on some of this would be nice to as he's maintaining the main Repo

[6pac]

This is an interesting innovation to the grid. If it can be delivered as a plugin, then @ghiscoding has commit, and i'm happy for you to workshop it and commit the result, or issue a PR. If it turns out to be too hard to do in a plugin, then I'd have to look at it to see to what degree it complicates the base code. As usual, I'm really busy, and PRs/issues are backing up a bit. I'm in the process of putting together a small Slickgrid website to help co-ordinate new features and changes, and also to try to attract some of the traffic which currently goes to the MLeibman repo.

[ghiscoding]

I gave another go at it, and got a first working proof of concept with a delay. I was totally off the field with using asyncPostRender, it has nothing to do with this since the post renderer will render every single row in a delayed fashion which is not what we are looking for.

Instead everything is in the plugin and how it will handle things. The first working concept is with a manual setTimeout to add a 1 sec. delay in displaying something to the user (which is a real life concept). To the plugin itself, I added a few options, first of is a preTemplate, that acts as a pre-loader if we may say (so in other word, we can display a spinner or a "loading" message in that template). Once the process is over (the delay), it will call another property for the postTemplate which has the item as argument (item will be replaced with your custom object in the future). I also need to use another property called templateRowCount to know how many rows (lines) does the final template has, this might be automated in the future but for now it will suffice for it to work.

A piece of the code

function loadingTemplate() {
    return '<div><h4>Loading...</h4></div>';
}

function postTemplate(item) {
    return filledTemplateRows = [
        '<div>',
        '<h4>' + item.title + '</h4>',
        '<div class="detail"><label>Duration:</label> <span>' + item.duration + '</span></div>',
        '<div class="detail"><label>% Complete:</label> <span>' + item.percentComplete + '</span></div>',
        '<div class="detail"><label>Start:</label> <span>' + item.start + '</span></div>',
        '<div class="detail"><label>Finish:</label> <span>' + item.finish + '</span></div>',
        '<div class="detail"><label>Effort Driven:</label> <span>' + item.effortDriven + '</span></div>',
        '</div>'
    ].join('');
}

// create the row detail plugin
var detailSelectColumn = new Slick.DetailSelectColumn({
      cssClass: "detailView-toggle",
      preTemplate: loadingTemplate,
      postTemplate: postTemplate,
      templateRowCount: 6
});

The next step would be to replace the setTimeout by a Promise or something else depending on what you guys think is the best to use. I assume that I will have another property possibly called process or processing which will contain the async handling with a Promise or whatever else.

You can check where I added a setTimeout in the plugin

And here's an animated gif of the proof of concept. I first open "Task 2" and 1 sec. later you can see the row detail of it.

[ghiscoding]

I had a thought not long after I went to bed, I keep forgetting that SlickGrid is amazing and has everything it needs directly in it. So what we need to complete the code is simply to create a Slick.Event inside the plugin which we will subscribe directly in the plugin since the notify will be called by the client side code and that's it we are in business :)

So now the client side code calls a notify once the row detail item comes back like this

function simulateServerCall(item) {
      // fill the template on delay
      setTimeout(function() {
        rowDetailView.onAsyncResponse.notify({
          "detailItem": item
        }, undefined, this);
      }, 1000);      
    }

// the plugin creation has a new `process` property
rowDetailView = new Slick.RowDetailView({
        cssClass: "detailView-toggle",
        preTemplate: loadingTemplate,
        postTemplate: postTemplate,
        process: simulateServerCall,
        templateRowCount: 6
});

and inside the plugin we suscribe to the event

// subscribe to the onAsyncResponse so that the plugin knows when the user server side calls finishes with it's data back
_self.onAsyncResponse.subscribe(function (e, args) {
      item._detailContent = _options.postTemplate(rowDetailItem);
      var idxParent = dataView.getIdxById(rowDetailItem.id);
      dataView.updateItem(rowDetailItem.id, rowDetailItem);
});

works like a charm 💯

Again you can take a look at the Example 16 - row detail on my branch and test it out. I wish to get feedback out of it. Thanks

EDIT

I've renamed the plugin to be RowDetailView, I think the name is better and more precise. I also renamed the onBeforeRowDetailOpen to onAsyncResponse which is also better and less confusing of what it does.

EDIT 2

Eventually I would like to replace the line height calculation with simply a fixed height that the user can pass to the plugin. The row detail would then use this fixed height and the container would be set with an overflow, so even if user wants to put more than the container size it wouldn't affect the other rows since the detail will be contained. Does that make any sense?

[SatanEnglish]

@ghiscoding

Unfortunately I've been ill this week so I haven't had a chance look at any of this yet. (But looks like u have got a good version going)

Having an overflow sounds smart to me I'd assume this would just make the area scroll-able if there is to much content.

Still wondering if we can get the load to put the view in a hidden get the height and then make the height right size for the view but that will have to be a later addition if it's do-able.

I should be back to it tomorrow then I should get time to try it out and give you some feedback.

I'm actually going to be trying to load tabs in here which will all likely have different size data so I really am going to have to use MAGIC here and remove and add padding on the fly as the tabs are changed.

Thanks for finding time for this.

PS: as you say "SlickGrid is amazing" This is why I'm trying to help implement this so I don't have to go to another grid.

[ghiscoding]

@SatanEnglish oh sorry to hear you got ill, hope you'll be back in shape in no time.

So yes I'd like to work on the overflow first and see if that is doable. Not exactly sure what you mean by

put the view in a hidden get the height and then make the height right size for the view

Did you mean to simply calculate the height of the view pane and keep it hidden until the row detail is ready? If that's the case then I guess I could do that, what I have now is that it does the calculation from the preTemplate (where it shows "Loading...") and so I do have and know the height from the start. If that is what you are looking for, I could add a flag for that (since some user might want to show the pane with a loading, while others might want to only show the pane only when the row detail is ready)

Feel free to do any commit to my fork, it all started from your code and you will most probably be the first one to use it :)

EDIT

If anyone wants to test my fork, make sure to use the branch called "feature/row-detail", that is where the code is, then find and run example16.

Advancement on the plugin...

1. Renamed yet again some of the properties, so templateRowCount is now panelRows
2. Added "Assignee" and "Reporter" populated randomly to the item detail properties to demonstrate (simulate) a real server side call.
3. I can't find a way to replace the row count by a pre-defined height that I wanted to pass to the plugin. Because of all the line-height and other factors to do the height calculation, I don't think it's possible (at this point) to replace it with a pre-defined height, however I don't find it that bad to use since we have visual cue of how height this will become (count the number of rows you want and pass it to the plugin, not a hude deal).
4. I however kinda managed to add an overflow in a detail container. So let say we defined the plugin with panelRows: 4, then if your content is bigger than that it will automatically show the overflow cursor (as shown below).
5. The example doesn't yet test orderBy, but that will probably be next to look into. Typically, we'll close the row detail after an orderBy change (because of some limitation described in the original article)

Demoing the number 3. which shows that if you set a smaller panelRows compare to what you have to display, the container will automatically do an overflow scrolling (calculated by the plugin). In the demo below, I've set a panelRows: 4 but it would probably need 7-8 rows to display it all.

[SatanEnglish]

@ghiscoding

I have actually checked the ordering of the columns and the ordering asyc and desc by column with my orginal plugin and it worked. (Closing the detailView when it does)

I'll double check with your changes that it still works tomorrow.

Nice going on the overflow!

Estimated height by picking a row amount sounds ok to me.

Did you see any issue with the view when two thirds of it is off the top of the screen?

I notice in the version in the blog that if half is on the screen the image disapears. I'm hoping this is only with images and not going to affect the detailView. (Again I'll have a look once I get a chance but worth noting incase you hadn't noticed in the blog)

Example is below images below.

Scroll it down a bit

[ghiscoding]

@SatanEnglish

Since I took your plugin, it does have the closing on orderBy then, which is great thanks. I just need to enable sorting in my example to test it out.

Didn't know about the visual glitch you just mentioned, I haven't read the original article in a while but yes I see the effect on my side too. It might be caused by the buffering (top/bottom) that SlickGrid does. If I scroll back to see the entire row detail, it all show up again, so yeah a little annoying but not a deal breaker.

Can you try using my version and see how it goes on your side. We're getting closer to a first PR with this, you can also take the code and create a PR yourself if you want it associated to your name (I really don't mind, it all started because of you which is great)

[SatanEnglish]

@ghiscoding

Can you give me rights to push to your branch? Just checking stuff now and found a small amount of missing stuff.

I can always just type it here but if it's possible to let me commit to your branch that would work to!

EDIT

Not related but thought this may interest you for later thought. (This video mainly)

[ghiscoding]

I added you @SatanEnglish and @6pac as collaborator to my fork, again make sure to use the feature/row-detail branch. You will most probably be the first person to use it (even before myself), so make any changes that suit your needs, just get it done :) We can also add reviewer and then comments in the code.

[ghiscoding]

@SatanEnglish Kinda new to that too, so let me know if that doesn't work.

[SatanEnglish]

@ghiscoding

I've added some functionality to the detailView. You can now directly load in a page/View.

e.g. rowdetailView.onAsyncResponse.notify({ "itemDetail": item, "detailView": "<div><h4>It's a View</h4></div>"

}, undefined, this);

I've also added a bool for _options.loadOnce Which tell it if it should reload the view or use whats already loaded.

I haven't set up an example of this yet as you may wish to have a look and do some tweaking.

I've check that your example still works and I have an example where I'm getting some view from a server using mine.

PS: Passing and object from the server to your object for the template worked by the way.

[6pac]

PS. I am watching all this unfold, but haven't looks closely at any code yet. Let me know when it reaches a stable point and I'll review. I suppose that will be in the form of a PR :-)
If it's a plugin or has only minor mods to core code, I'm happy to pull the beta and let the refinements come in via successive PRs. That's not going to destabilise any other features.

[SatanEnglish]

@6pac

Currently there are 0 changes to any core stuff it is literally just the plugin and a css file so far.

Just looking at how I would get the height better.

[SatanEnglish]

@ghiscoding

Got an idea for how to deal with the height better would like some input when you have a minute.

Basic example would be to have a div with id = temp (Not actually thinking to call it temp)

Css would be as follows

<div id="temp" style="position:absolute; left:9999999px; top:9999999px;">``</div>

script // Load the view into the tempView $("#temp").html(view); // Get the Height of the view var height = document.getElementById('temp').clientHeight;

Now we have the actual height of the of the view!

We would of course then have to have a maxHeight so that it can be contained better. May have to have some calculation that works out the closest row amount. (Else may break the rows)

Thoughts?

EDIT Cannot find a nice way to use this for now so leaving it but at least I've noted it here as to how we could get the height to update the height.

[SatanEnglish]

@6pac @ghiscoding Is there a way to change/override the "getRenderedRange" function without changing core.js?

Current issue lets say I set the panelRow for how big the detailview is to 10 rows. When the first row goes off TOP of the grid screen we lose our detailView as they are being cleaned up.

The function cleanupRows(rangeToKeep) in slick.grid.js is removing the row because it's off the screen.

Ideally I want to override it so that we keep X rows off the top were X is the 10 rows specified above. The bottom already holds extra rows from what I can tell but not the top.

EDIT

In particular updating the minBuffer seems to fix this issue. var range = getVisibleRange(viewportTop, viewportLeft); var buffer = Math.round(viewportH / (options.rowHeight * 10)) ; var minBuffer = 3;

Aprox line 1914 in slick.grid.js

[6pac]

Not possible to say for me without reviewing the code carefully. If you can make small edits to the core (eg. pass an extra param to getRenderedRange or cleanupRows to trigger different behaviour, I'm good with that. I will go over the code in detail sometime soon.

[SatanEnglish]

@6pac

I've cheated.

Feel free to make it better in the long run with passing an extra param.

init method added => _grid.getRenderedRange = getRenderedRange;

Then I have cloned the getRenderedRange from core and changed var minBuffer = 3; To var minBuffer = _options.panelRows + 3;

Nasty but all contained in the plugin WOOT!

[ghiscoding]

@SatanEnglish yeah I thought the row buffer was the cause of the visual glitch, I think that as @6pac said, it wouldn't be that bad to be able to pass an argument to change the minBuffer without affecting the current default when nothing is set. I'm sure this could be useful for not just this plugin but other things too. If that's the only change in the core, it's not too bad. I always try to avoid touching core as much as possible but in some cases it's just better to go with a change.

At this point, I'm mainly done with the plugin at this point, I don't have much more to test neither do I have data to test with.

EDIT I added the sort and the handleSort throws some errors by the call of _grid.getData().rows which is undefined. @SatanEnglish can you take a look at that since you wrote that part?

[SatanEnglish]

@ghiscoding

I've added an example for the changes that I added. example17-row-detail-view-load.html

This has both the view per row functionality and the onetime loading.

Can you have a fiddle and if you don't see any issues I'm happy for you or me to do the first PR.

Feel free to clean it up a little if you notice any untidy bits.

Please have a fiddle and see if anything breaks!!

[ghiscoding]

@SatanEnglish it's nice to have flexibility I guess, so it's great to support both with/without template.

We need to fix the sorting before creating a PR, not sure if you saw my previous comment about the handleSort throwing an error after I added Sorting in the example16. Could you take a look at it?

@6pac what is your default spacing in your code? I've set my editor to 2 spaces for indentation but I'm not sure what is your default. @SatanEnglish we should use same indentation on all our code, yours seems different than mine

[SatanEnglish]

@ghiscoding Assuming your still doing some stuff here. I've got a magical wrapper that exposes the rows...

The right one for the generic stuff should be the following.

function handleSort(e, args) {      
  var rows = _grid.getData().getItems();        
  $.each(rows, function (i, r) {
      HandleAccordionShowHide(r, true);
  });
}

Feel free to fix this if your going to test this now.

Sorry haven't got GIT ect on this comp.

EDIT

I've check this by downloading the zip and it fixes it for column-reordering and sorting.

[ghiscoding]

@SatanEnglish yes it does fix it however this is extremely slow, it takes like 20sec to do a sort. If I comment out the handleSort in the plugin then it goes back to normal which is sorting in millisecond. That doesn't seem ideal... can we do it on just the rows in the buffer instead of the entire dataset?

EDIT Actually better than that, instead of going through the entire dataset. Just use an array to store the opened viewDetail and if they get closed then remove them for the array. So when you call the handleSort, you just have to close the ones that are in the array and reset the array, that's it.

[SatanEnglish]

@ghiscoding

No sure what the issue is my version is really fast however I am using a better sort than the default. Also I already have the rows in my version. I'll double check where i'm getting my rows from when I get to work tomorrow..

But an array sounds fine. I'll just have to check the onTimeload version still works after a sort. (Or set the item to not being loaded again)

EDIT Under what condition were u getting 20s I've just checked it on the example I was playing with and its still instant!!

[ghiscoding]

I made a commit with the sort and the handleSort fix last night and so you can try it from the example16. However there's huge performance hit looping through the entire dataset. I really think that having an array of the open ones is the way to go. You could also make it a public function collapseAll that would loop through this array of references, it should be instant to do so.

[SatanEnglish]

@ghiscoding

I've check this and didn't SEE a performance issue but I can try implementing a holder of the set

[ghiscoding]

would still prefer to use an array of open references, this is by far the most optimized way of dealing with open/collapse of row details, especially with huge dataset. You could probably see a difference if you put in 500k rows in the dataset (just increase the for loop number in the example16). Your computer is probably faster than mine then, since it really was 20sec. on my side versus half a second when commenting out the handleSort in the plugin.

[SatanEnglish]

@ghiscoding

Done and Done.

• Running of an array
• Added a collapseAll
• Separated into more function for more readability

[ghiscoding]

@SatanEnglish A quick look at it and it seems all nice and sweet. I'll review it more later tonight after work. I didn't even know javascript filter function was supported in IE9+ without a polyfill (sweet). Ahh wait it seems we forgot 1 small thing in the name of the plugin, it should be under the namespace "Slick.Plugins.pluginName" (for example HeaderMenu Plugin and ours is under "Slick.pluginName", if you can fix it that would be great, else I can fix it later tonight.

As for the AutoColumnSizePlugin, I tried the example from this demo page and I'm very interested. Can you make a separate PR for it and I can review it as well.

@6pac, for the PRs that are related to plugins, do you still want to review them all or do you want me to merge them right away (I'm talking about the RowDetailPlugin and possibly AutoColumnSizePlugin)

[SatanEnglish]

@ghiscoding Changed to Slick.Plugins.pluginName

After you look at it tonight I'm happy with the plugin now so feel free to get @6pac to commit it

[ghiscoding]

@SatanEnglish to do a PR is easy when you follow these steps. Do a fork from Github and do a checkout locally, work on the code then push (commit) the code to your Github fork, from the Github page click on the Pull Request button (as shown below). You can all do this on a master branch (from your fork) or what is best is to actually create a different branch so that you won't mix your code with other features if you have multiple PR open.

Here's the PR button

Give that a try, it's nice to see our name in the contributor list of an active project :)

[SatanEnglish]

@ghiscoding Another thing to look into with the DataViewRow. I'm wanting to have an option to have a row tap so that tapping on any item will open the view.

Not sure how I'd go about this any ideas?

[6pac]

@ghiscoding feel free to merge this PR if you like. I've made some small updates to the repo and been halfway through a few extra things for a while, so haven't got around to doing a release yet.
I think it's time to release though, so when you're done, let me know.

[ghiscoding]

@SatanEnglish I've reviewed the code

• added a useRowClick boolean flag as per your request
• added a few Slick Events that user can subscribe to
• added lots of documentation (on top of the plugin)

Here's a couple of things before officially opening the PR

• can you review the docs (on top of the plugin) and see if I missed anything
• would it be possible, if it makes sense, to combine example16 and example17 into 1 html file?
  • we could have 2 grids into the same page
• and lastly what happened with this comment you wrote earlier?

  In particular updating the minBuffer seems to fix this issue. var range = getVisibleRange(viewportTop, viewportLeft); var buffer = Math.round(viewportH / (options.rowHeight * 10)) ; var minBuffer = 3; Aprox line 1914 in slick.grid.js

[SatanEnglish]

@ghiscoding

1) Missing something about being able to use the args.detailView if wanting to add an explicit view for the onAsyncEndUpdate. (Not sure if this is done on purpose if not can u add it )

2) Making making exmaples into one sounds fine is there a way we can add some buttons that toggle on "loadOnce", "loading by template vs loading by view", "Row Tap on/off"

3) I have overrideden the core by changing the function in the plugin e.g.

_grid.getRenderedRange = getRenderedRange; line 79 of plugin

[SatanEnglish]

@ghiscoding @6pac

Hay guys really quick example setup. Example Auto-Resize-Columns

Seems to not work perfectly if using double click on column resize now. (Think there is some change to the nest version that has affected it)

Resize all button works like a charm tho.

Think the issue line in plugin below as I think I read something in the updates that these bits are now editable/variables on grid? clone.style.cssText = 'position: absolute; visibility: hidden;right: auto;text-overflow: initial;white-space: nowrap;';

Anyway have a play.

[ghiscoding]

@SatanEnglish Not sure what you mean by

1. Missing something about being able to use the args.detailView if wanting to add an explicit view for the onAsyncEndUpdate. (Not sure if this is done on purpose if not can u add it )

I added doc and also a console.log example in example16 to demonstrate all 3 new onEvents, isn't that sufficient? or did you see some bugs?

2. yeah I guess we could try with a radio button to active the onLoad, but I'm not sure if we can change the plugin instance after the grid already loaded the plugin. We would have to try, else we'll have to make 2 grids.

For your last comment about the other plugin, I can look at that later but we should try to keep the discussion here about the row detail plugin. I suggest you to open another Github issue about that plugin and we can discuss it there.

[SatanEnglish]

@ghiscoding

1) This is what I mean.

    onAsyncResponse:  This event must be used with the "notify" by the end user once the Asynchronous Server call returns the item detail 
    Event args:
    grid:        Reference to the grid.
    itemDetail:  Column definition.
    detailView:  An explicit view to use instead of template (Optional)

2) Two grids is fine if thats what we need to resort to!

PS I've started deleting comments that are are off topic just leaving the latest ones. (Planning to add another issue some stage)