[jQuery] Re: SlickGrid updates!
The SlickGrid source code has been migrated to GitHub: http://github.com/mleibman/SlickGrid
[jQuery] SlickGrid updates!
SlickGrid keeps growing! SlickGrid now has a Google Group where you can get help, provide feedback and ideas for improvement, and ask questions: http://groups.google.com/group/slickgrid NEW FEATURES: - Row reorder support. Column definitions can now be marked with behavior:move property to designate those columns as row drag handles. You can then implement two new events on the grid - onBeforeMoveRows (rows,insertedBefore) and onMoveRows(rows,insertedBefore). The former one lets you return a bool indicating whether or not given rows can be moved to that location also providing an indication to the user via a guide. Rows are either moved individually or as a block (all selected rows). Example: http://slickgrid.googlecode.com/svn/trunk/examples/example9-row-reordering.html - (pseudo)background async post-render. You can still have rich, complex cells rendered against the actual DOM nodes while still preserving the speed and responsiveness. This is achieved through async background post-rendering. SlickGrid exposes a onPostProcessRowNode(rowNode,row,context) event which you can subscribe to and implement your own rendering there. The event is fired one by one for all visible rows in the viewport on a timer so it doesn't impact the UI responsiveness. You should still make sure that post-processing one row doesn't take too long though. SlickGrid will figure out what and when needs to be updated for you. Example: http://slickgrid.googlecode.com/svn/trunk/examples/example10-async-post-render.html - New example demonstrating a completely customized cell rendering. http://slickgrid.googlecode.com/svn/trunk/examples/example8-alternative-display.html
[jQuery] SlickGrid updates
Lots of changes in this one: - Updated jQueryUI to 1.7.2. - Updated jQueryUI theme. - Started putting preliminary support for jQueryUI themes CSS framework. - Removed unminified library files. - New option in SlickGrid: leaveRoomForNewRows. False by default (a change from the previous version). If true and new rows can be added, the grid adds one page of whitespace at the end to make bulk data entry easy. - Implemented paging support in the DataView (slick.model.js). - Implemented pager control to work with DataView (slick.pager.js). - Updated example7-model.html to make use of the pager. Play around with http://slickgrid.googlecode.com/svn/trunk/examples/example4-model.html and let me know what you think.
[jQuery] New SlickGrid example page - AJAX loading
A lot of people have been asking for an example of how to use SlickGrid with remote data stores. I've just added a new sample page that does just that: http://slickgrid.googlecode.com/svn/trunk/examples/example6-ajax-loading.html The page will pull all Apple-related stories from Digg.com and display them in a grid. I've also added an option to set a user-defined row height (something I've meant to do for a long time). Check it out at http://code.google.com/p/slickgrid/
[jQuery] Re: Call for contributors: A simple, fast and flexible grid/spreadsheet component.
I do plan on continuing to develop it - the last month has been really slow since I had little spare time to spend on it. On May 21, 8:47 am, dcam dougie.came...@googlemail.com wrote: Very nice design. I've been looking for a grid plugin for ages and not found anything that comes close to this. Do you plan to continue developing this? I'm sure there are a lot of developers looking for this kind of grid Thanks for your work Michael, Douglas On Mar 31, 1:02 am, Tin michael.leib...@gmail.com wrote: Ryan, Frozen columns is one of the TODOs in the slick.grid.js :) It is definitely something that I think needs to be added in. For the past week, I have mostly concentrated on improving performance and the ability to adjust to the browser's performance and not jump into async rendering mode prematurely. Now that that part is done, it's either working on frozen columns support, or adding another example having to do with AJAX-loading data from the server (which, personally, I think is pretty mundane and not really related to the grid itself). I guess I'll start working on the former now...
[jQuery] Re: A Tree which can be filtered or searched....
Ravish, I've added a collapse/expand example to SlickGrid. Check it out at http://slickgrid.googlecode.com/svn/trunk/example5-collapsing.html On Apr 2, 2:31 pm, Jack Killpatrick j...@ihwy.com wrote: Right, I was thinking maybe treetable combined with the quicksearch plugin... ie: the quicksearch plugin would search the treetable, but the side-effect is that it will show found rows, not correctly expand the tree. (so not good). So yeah, the search continues. I haven't seen a jquery plugin like that ext searchable tree. Maybe ask on the jquery-ui list: there's some tree work going on there. - Jack Ravish Bhagdev wrote: Yes, it is collapsible but it dosen't have the filter or search capability like the filtertree (http://www.extjs.com/explorer/#filtertree) So not quite as useful. Ravish On Thu, Apr 2, 2009 at 9:49 PM, Jack Killpatrick j...@ihwy.com mailto:j...@ihwy.com wrote: The treetable plugin (below) is collapsible. You may hit a snag trying to find something that will open up the found node, though. I'm pretty sure that the quicksearch plugin will just pay attention to table elements, regardless of their visibility, but it would not open the parent(s) up the tree. I'm curious if you find something. - Jack Ravish Bhagdev wrote: Thanks Jack, But I'm looking for a tree that is collapsible. I'm reading jquery documentation to see how difficult it will be to implement something that keeps index of all nodes in when searching hides matching id of node by getting hold of the element. Sounds a bit tricky though :( Ravish On Thu, Apr 2, 2009 at 4:56 PM, Jack Killpatrick j...@ihwy.com mailto:j...@ihwy.com wrote: If the tree is just a list internally, you might be able to use this: http://rikrikrik.com/jquery/quicksearch/ or maybe use that with this: http://blog.cubicphuse.nl/2008/11/12/jquery-treetable-2-0 - Jack Ravish wrote: Hi, I've been looking for a tree widget which can be filtered or searched by typing keyword in a textbox. When trees have thousands of nodes, its very difficult for users to browse manually. Has anyone ever seen such a widget (jquery based ideally but other will do as well). I am surprised to find that none of the available plugins support this feature! Thanks
[jQuery] Re: A Tree which can be filtered or searched....
Actually, the filter works on all nodes, and if the parent (or any ancestors) are filtered out, none of the descendants will show up either. As for the case sensitivity... well, it's an example. Your implementation of the filter function can be better :) On Apr 2, 4:34 pm, Ravish Bhagdev ravish.bhag...@gmail.com wrote: Looks good michael! Couple of minor observations: - Filter only works on root nodes, - Is case sensitive (simple toLower on both vars used in indexof should fix it, so no biggie) I really like the % graph and slider thingy :-) Cheers, R On Thu, Apr 2, 2009 at 11:38 PM, Tin michael.leib...@gmail.com wrote: Ravish, I've added a collapse/expand example to SlickGrid. Check it out at http://slickgrid.googlecode.com/svn/trunk/example5-collapsing.html On Apr 2, 2:31 pm, Jack Killpatrick j...@ihwy.com wrote: Right, I was thinking maybe treetable combined with the quicksearch plugin... ie: the quicksearch plugin would search the treetable, but the side-effect is that it will show found rows, not correctly expand the tree. (so not good). So yeah, the search continues. I haven't seen a jquery plugin like that ext searchable tree. Maybe ask on the jquery-ui list: there's some tree work going on there. - Jack Ravish Bhagdev wrote: Yes, it is collapsible but it dosen't have the filter or search capability like the filtertree ( http://www.extjs.com/explorer/#filtertree) So not quite as useful. Ravish On Thu, Apr 2, 2009 at 9:49 PM, Jack Killpatrick j...@ihwy.com mailto:j...@ihwy.com wrote: The treetable plugin (below) is collapsible. You may hit a snag trying to find something that will open up the found node, though. I'm pretty sure that the quicksearch plugin will just pay attention to table elements, regardless of their visibility, but it would not open the parent(s) up the tree. I'm curious if you find something. - Jack Ravish Bhagdev wrote: Thanks Jack, But I'm looking for a tree that is collapsible. I'm reading jquery documentation to see how difficult it will be to implement something that keeps index of all nodes in when searching hides matching id of node by getting hold of the element. Sounds a bit tricky though :( Ravish On Thu, Apr 2, 2009 at 4:56 PM, Jack Killpatrick j...@ihwy.com mailto:j...@ihwy.com wrote: If the tree is just a list internally, you might be able to use this: http://rikrikrik.com/jquery/quicksearch/ or maybe use that with this: http://blog.cubicphuse.nl/2008/11/12/jquery-treetable-2-0 - Jack Ravish wrote: Hi, I've been looking for a tree widget which can be filtered or searched by typing keyword in a textbox. When trees have thousands of nodes, its very difficult for users to browse manually. Has anyone ever seen such a widget (jquery based ideally but other will do as well). I am surprised to find that none of the available plugins support this feature! Thanks
[jQuery] Re: A Tree which can be filtered or searched....
Ravish, Take a look at SlickGrid at http://slickgrid.googlecode.com (example 4). While it is an editable grid and not a tree, the tree-like expand/ collapse functionality is easily implemented and the DataView allows expanding/collapsing/searching/sorting/etc with 100'000 items with ease even on older machines and browsers. On Mar 31, 8:45 pm, Ravish ravish.bhag...@gmail.com wrote: Hi, I've been looking for a tree widget which can be filtered or searched by typing keyword in a textbox. When trees have thousands of nodes, its very difficult for users to browse manually. Has anyone ever seen such a widget (jquery based ideally but other will do as well). I am surprised to find that none of the available plugins support this feature! Thanks
[jQuery] Re: Call for contributors: A simple, fast and flexible grid/spreadsheet component.
Ryan, Frozen columns is one of the TODOs in the slick.grid.js :) It is definitely something that I think needs to be added in. For the past week, I have mostly concentrated on improving performance and the ability to adjust to the browser's performance and not jump into async rendering mode prematurely. Now that that part is done, it's either working on frozen columns support, or adding another example having to do with AJAX-loading data from the server (which, personally, I think is pretty mundane and not really related to the grid itself). I guess I'll start working on the former now...
[jQuery] Re: Call for contributors: A simple, fast and flexible grid/spreadsheet component.
Zachariah, Thanks for the word of encouragement! Do you have any feedback/ lessons learned from your application? I've made a lot of progress recently in terms of adding a DataView to drive the grid and optimizing the core loop, but formalizing the API and writing the documentation haven't been moving very fast. Unfortunately, without that documentation, a lot of people seem to be dismissing it at first glance without realizing what makes SlickGrid different. +Michael On Mar 27, 4:24 am, Zachariah craniumcomput...@gmail.com wrote: Michael, I am incredibly impressed with the speed of this grid. Last month I began a search for the right grid, and I didn't find it. For my application, I needed formatting flexibility that tables could not offer, and large data-set handling that make most other grids studder. I've been using jquery for quite sometime and yet have never been compelled to post in the forums until now (as I always found my answer before I did). I truly hope an incarnation of SlickGrid makes it into jquery ui and therefore gets all the love and attention necessary to make it the star it deserves to become. -Zachariah On Mar 8, 6:31 pm, Tin michael.leib...@gmail.com wrote: Hey All, I've been working on a grid/spreadsheet control prototype during the last couple of weeks. Seeing how there doesn't seem to be a lot of other choices for this sort of thing, I had to write my own. I've put the project up on Google Code and am looking for experienced developers who can pick this up and turn it into something that everybody can use (a jQuery UI grid plugin?). The project is hosted athttp://code.google.com/p/slickgrid/. Below is a copy of the project home page. Looking forward to your feedback! Michael Leibman michael.leib...@gmail.com Principal Engineer Daptiv Inc. --- --- SlickGrid What it is Quite simply, SlickGrid is a JavaScript grid/spreadsheet component. Some highlights: Virtual scrolling/rendering (hundreds of thousands of rows) Extremely fast rendering speed Configurable customizable Full keyboard navigation Resizable/reorderable columns Custom cell formatters editors Support for editing and creating new rows. GlobalEditorLock to manage concurrent edits in cases where multiple Views on a page can edit the same data. Why? This is pretty much a work-in-progress prototype, so I don't feel like spending a lot of time documenting it at this stage. I do think it is quite promising though, so I'm putting it up for everybody to see and play with. In its current form, it satisfies nearly all of the requirements for the project I am working on where I am utilizing it in an MVC application, so I'm not sure how much time I can afford on turning SlickGrid into something that would work for everybody. If you are willing to help out - let me know, and I'll add you to the project so that you can contribute. Examples Basic use:http://slickgrid.googlecode.com/svn/trunk/example1-simple.html Adding some formatting:http://slickgrid.googlecode.com/svn/trunk/example2-formatters.html Turning it into a spreadsheet:http://slickgrid.googlecode.com/svn/trunk/example3-editing.html A more comprehensive test page:http://slickgrid.googlecode.com/svn/trunk/grid.html Documentation See comments at the top ofhttp://slickgrid.googlecode.com/svn/trunk/slick.grid.js.
[jQuery] Re: Call for contributors: A simple, fast and flexible grid/spreadsheet component.
Sridhar, The grid itself is fairly data-agnostic. It reads the data through the JavaScript array interface, but what drives the datasource is completely arbitrary. The examples on the project home page show several ways of feeding the data to the grid. Examples #1-#3 load the data directly in a client-side JavaScript array - you can adapt that to load the missing parts from the server through ajax. I will add some examples of doing that soon, but it is pretty straightforward. The MUCH more interesting way of feeding the data to the grid is through a Model or, in the case of example #4 a filtered DataView. That allows you to implement search, filter, sort, expand/collapse, etc. and have all of that happen on the client and real-time. It does have limitations on the amount of the data since the browser has to do all the work for sorting, filtering and figuring out the differences between the two consecutive states. Those limitations will really depend on your data, but just to give you an example, on my laptop, example #4 is still quite usable with 50'000 items after yesterday's round of optimizations :) The next logical step is to write a disconnected, AJAX-enabled server- driven DataView for working with extremely large datasets, and that is what I will likely have to tackle soon (btw, this is where some help would be appreciated!). The implementation would be pretty similar, but most of the operations would get moved to the server, and the data will be lazy-loaded. On Mar 19, 9:02 pm, Sridhar dsridha...@gmail.com wrote: Hi, I am not sure how you are loading the data from server side and how you are updating the data. do you have any examples? The grid looks really nice. It is as fast as it can be. I am really impressed with speed. I am still learning jquery. I wish I could have contributed for this. By the way, I am trying to use this in asp.net 2.0 Thanks, sridhar. On Mar 18, 5:25 pm, Tin michael.leib...@gmail.com wrote: Updated the last example (http://slickgrid.googlecode.com/svn/trunk/ example4-model.html) with column sorting (click on column headers). Some grid code refactoring plus multiple bug fixes and performance enhancements (try the slider!).
[jQuery] Re: Call for contributors: A simple, fast and flexible grid/spreadsheet component.
BTW, I *did* mean to say 50'000 items - that's not a typo. The example is set to use 500 rows, but setting it to 50'000 works reasonably well in IE7, which by my benchmarks (http:// slickgrid.googlecode.com/svn/trunk/model%20benchmarks.html) is about 4 times slower than FF3 and Chrome/Safari. The slider can't keep up with the processing, but sorting and filtering by task title works fine. On Mar 20, 1:23 am, Tin michael.leib...@gmail.com wrote: Sridhar, The grid itself is fairly data-agnostic. It reads the data through the JavaScript array interface, but what drives the datasource is completely arbitrary. The examples on the project home page show several ways of feeding the data to the grid. Examples #1-#3 load the data directly in a client-side JavaScript array - you can adapt that to load the missing parts from the server through ajax. I will add some examples of doing that soon, but it is pretty straightforward. The MUCH more interesting way of feeding the data to the grid is through a Model or, in the case of example #4 a filtered DataView. That allows you to implement search, filter, sort, expand/collapse, etc. and have all of that happen on the client and real-time. It does have limitations on the amount of the data since the browser has to do all the work for sorting, filtering and figuring out the differences between the two consecutive states. Those limitations will really depend on your data, but just to give you an example, on my laptop, example #4 is still quite usable with 50'000 items after yesterday's round of optimizations :) The next logical step is to write a disconnected, AJAX-enabled server- driven DataView for working with extremely large datasets, and that is what I will likely have to tackle soon (btw, this is where some help would be appreciated!). The implementation would be pretty similar, but most of the operations would get moved to the server, and the data will be lazy-loaded. On Mar 19, 9:02 pm, Sridhar dsridha...@gmail.com wrote: Hi, I am not sure how you are loading the data from server side and how you are updating the data. do you have any examples? The grid looks really nice. It is as fast as it can be. I am really impressed with speed. I am still learning jquery. I wish I could have contributed for this. By the way, I am trying to use this in asp.net 2.0 Thanks, sridhar. On Mar 18, 5:25 pm, Tin michael.leib...@gmail.com wrote: Updated the last example (http://slickgrid.googlecode.com/svn/trunk/ example4-model.html) with column sorting (click on column headers). Some grid code refactoring plus multiple bug fixes and performance enhancements (try the slider!).
[jQuery] Re: Call for contributors: A simple, fast and flexible grid/spreadsheet component.
Updated the last example (http://slickgrid.googlecode.com/svn/trunk/ example4-model.html) with column sorting (click on column headers). Some grid code refactoring plus multiple bug fixes and performance enhancements (try the slider!).
[jQuery] Re: Call for contributors: A simple, fast and flexible grid/spreadsheet component.
More updates to the Model (DataView). Added: - addItem - insertItem - updateItem - deleteItem Plus a bunch of bug fixes and code cleanup. Demo: http://slickgrid.googlecode.com/svn/trunk/example4-model.html
[jQuery] Re: Call for contributors: A simple, fast and flexible grid/spreadsheet component.
Guys, I've finally gotten around to implementing a sample Model to drive the SlickGrid. As it stands right now, it provides a filtered/sorted view of the data as well as a mechanism to resort or update the filters. Whenever the data in the view changes, the model fires onRowCountChanged and/or onRowsChanged events containing numbers of rows that changed. We then wire the onRowCountChanged to call grid.resizeCanvas() and onRowsChanged to call grid.removeRow() for each changed row and then grid.render() to fill in the blanks. This way, the grid only updates the changed portions and only in the viewport which allows it to do real-time updates to large amounts of data. This is one of the areas where SlickGrid really shines. The test page at http://slickgrid.googlecode.com/svn/trunk/example4-model.html shows an editable spreadsheet of 500 tasks with a filter pane on top. Notice that typing in the search textbox or dragging the slider results in a REAL-TIME update of the grid.
[jQuery] Re: Call for contributors: A simple, fast and flexible grid/spreadsheet component.
Richard, I don't know how well SlickGrid aligns with what most people would expect of a jQueryUI Grid plugin. The key difference is that most of the grid implementations listed on the jQuery UI wiki (jqGrid, DataTables, ...) focus too much on being able to work with data (search, sort, parse, ajax load, etc.) and not enough on being a better grid (or in case of editable grids, a spreadsheet). It's great if all you want to do is to spruce up an HTML TABLE, but too inflexible for anything more. SlickGrid itself only deals with rendering, virtual scrolling, keyboard navigation, loading cell editors when needed, managing validation state, doing common things like column resize/reorder and passing events through to the Controller. The core code is very concise. If you want it to do more, add custom cell formatters, rich cell editors, a Model that implements filtering, expand/collapse, sorting, ajax-loading, etc. You're not locked in to any particular way of doing anything. (Again, I apologize for the lack of design documentation and MVC examples - I'm working on that.) Dojo Grid is somewhat similar in its approach and functionality. The reason I decided to implement my own is because Dojo Grid is way too heavy-handed for my taste. Too complex with too many dependencies. There's no reason you can't have all of that in a small and simple component. The other reason was their implementation of virtual scrolling - it just wasn't responsive enough for me. SlickGrid dynamically switches between synchronous and asynchronous rendering in order to deliver the fastest rerendering possible. I would love nothing more than for this to become part of jQuery UI. If you go over the code and the examples and decide that this is in line with where you want to take GridTable, email me directly at michael.leib...@gmail.com. Thanks, +Michael On Mar 14, 6:35 am, Richard D. Worth rdwo...@gmail.com wrote: Michael and Anatoly (and anyone else that my be interested), I hope you consider joining us with your efforts over here: http://wiki.jqueryui.com/GridTable Thanks. - Richard On Sat, Mar 14, 2009 at 1:19 AM, AnatolyG anat...@geyfman.net wrote: Michael, Great job. I built a prototype of my own table for the same reasons a few months ago. The grid looks good, but for my purposes (and I am sure for many others), while having an array of rows is great and useful, the plugin should be able to create such tables from a regular table element. I am working on an enterprise app that outputs via xslt a table with a bunch of data, and it would be great to run this code as a plugin to convert the table (with rules for each column?) into a spreadsheet like in your last example. Should be fairly straight forward to do that.. I am also looking for sorting (shouldn't be too bad), locking columns, locking header (done) and locking footer. I implemented these in my prototype already, as well as the rendering from table element. Anyway, I would love to help out in some capacity, if you're looking to develop this further. Anatoly On Mar 9, 5:31 am, Tin michael.leib...@gmail.com wrote: Hey All, I've been working on a grid/spreadsheet control prototype during the last couple of weeks. Seeing how there doesn't seem to be a lot of other choices for this sort of thing, I had to write my own. I've put the project up on Google Code and am looking for experienced developers who can pick this up and turn it into something that everybody can use (a jQuery UI grid plugin?). The project is hosted athttp://code.google.com/p/slickgrid/. Below is a copy of the project home page. Looking forward to your feedback! Michael Leibman michael.leib...@gmail.com Principal Engineer Daptiv Inc. --- --- SlickGrid What it is Quite simply, SlickGrid is a JavaScript grid/spreadsheet component. Some highlights: Virtual scrolling/rendering (hundreds of thousands of rows) Extremely fast rendering speed Configurable customizable Full keyboard navigation Resizable/reorderable columns Custom cell formatters editors Support for editing and creating new rows. GlobalEditorLock to manage concurrent edits in cases where multiple Views on a page can edit the same data. Why? This is pretty much a work-in-progress prototype, so I don't feel like spending a lot of time documenting it at this stage. I do think it is quite promising though, so I'm putting it up for everybody to see and play with. In its current form, it satisfies nearly all of the requirements for the project I am working on where I am utilizing it in an MVC application, so I'm not sure how much time I can afford on turning SlickGrid into something that would work for everybody. If you are willing to help out - let me know, and I'll
[jQuery] Re: Call for contributors: A simple, fast and flexible grid/spreadsheet component.
Jack, The only issue I can think of right now is that the current edit isn't committed when a column gets resized/moved. There is also the rerenderOnResize option on a column definition that currently triggers a complete rerender. There's a lot of things I'd like to add to it though. The first item on my list is to add a simple datasource and a Model/Controller to demonstrate how this all works together. On Mar 12, 6:43 pm, Jack Killpatrick j...@ihwy.com wrote: Hmm, this is really, er, slick ;-) ... I'm glad you wrote this extra info up, it caught my eye. Do you by chance have a known-issues list (outside of what would come from maybe making it a plugin or something)? Looks like a great contrib. Thanks, Jack Tin wrote: One more point. While this may not be immediately obvious from what you see in the examples and in the code, the key use of the grid is in MVC applications where the grid is wired to respond to events in the Model. In our application we have spreadsheet component of a Gantt chart, and the Model is a filtered view of the tasks (rows) in the original datasource. Suppose you collapse or expand a parent task or enter some text in a Quick Filter textbox. The Model then recalculates which rows are now visible, compares that with what was visible before and fires two events - onRowCountChanged onRowsChanged. The latter one tells all subscribed Views, such as the grid, that the rows in specific positions changed. The grid then only has to invalidate/remove those rows and call grid.renderViewport() to make sure that whatever is in the viewport is visible. The onRowCountChanged event triggers the recalculation of the virtual canvas - grid.resizeCanvas(). Together, this pattern makes for an incredibly efficient, flexible and, most importantly, scalable implementation. I hope this helps explain some of the design elements behind SlickGrid. +Michael On Mar 9, 6:58 pm, Tin michael.leib...@gmail.com wrote: Ricardo, Not using tables is actually key to making the virtual rendering aspect of the grid work. Each row is an absolutely positioned DIV containing DIV cells set to float:left. Rows can then be easily added and removed without triggering cascading DOM changes. In fact, this is done all the time in SlickGrid - as you scroll, only the content of the viewport plus a small buffer is actually rendered, leaving the browser's DOM nice and small. +Michael On Mar 9, 5:40 pm, ricardobeat ricardob...@gmail.com wrote: Looks great. I like how the editing works. One thing: why are you using DIVs instead of a table? That's precisely the only case where tables should be used, to display tabular data. It's semantically correct and can offer performance improvements, as table elements have native properties like their index and direct access to their children. cheers, - ricardo On Mar 8, 9:31 pm, Tin michael.leib...@gmail.com wrote: Hey All, I've been working on a grid/spreadsheet control prototype during the last couple of weeks. Seeing how there doesn't seem to be a lot of other choices for this sort of thing, I had to write my own. I've put the project up on Google Code and am looking for experienced developers who can pick this up and turn it into something that everybody can use (a jQuery UI grid plugin?). The project is hosted athttp://code.google.com/p/slickgrid/. Below is a copy of the project home page. Looking forward to your feedback! Michael Leibman michael.leib...@gmail.com Principal Engineer Daptiv Inc. --- --- SlickGrid What it is Quite simply, SlickGrid is a JavaScript grid/spreadsheet component. Some highlights: Virtual scrolling/rendering (hundreds of thousands of rows) Extremely fast rendering speed Configurable customizable Full keyboard navigation Resizable/reorderable columns Custom cell formatters editors Support for editing and creating new rows. GlobalEditorLock to manage concurrent edits in cases where multiple Views on a page can edit the same data. Why? This is pretty much a work-in-progress prototype, so I don't feel like spending a lot of time documenting it at this stage. I do think it is quite promising though, so I'm putting it up for everybody to see and play with. In its current form, it satisfies nearly all of the requirements for the project I am working on where I am utilizing it in an MVC application, so I'm not sure how much time I can afford on turning SlickGrid into something that would work for everybody. If you are willing to help out - let me know, and I'll add you to the project so that you can contribute. Examples Basic use:http://slickgrid.googlecode.com/svn/trunk/example1-simple.html Adding some formatting:http://slickgrid.googlecode.com
[jQuery] Re: Call for contributors: A simple, fast and flexible grid/spreadsheet component.
Ricardo, Not using tables is actually key to making the virtual rendering aspect of the grid work. Each row is an absolutely positioned DIV containing DIV cells set to float:left. Rows can then be easily added and removed without triggering cascading DOM changes. In fact, this is done all the time in SlickGrid - as you scroll, only the content of the viewport plus a small buffer is actually rendered, leaving the browser's DOM nice and small. +Michael On Mar 9, 5:40 pm, ricardobeat ricardob...@gmail.com wrote: Looks great. I like how the editing works. One thing: why are you using DIVs instead of a table? That's precisely the only case where tables should be used, to display tabular data. It's semantically correct and can offer performance improvements, as table elements have native properties like their index and direct access to their children. cheers, - ricardo On Mar 8, 9:31 pm, Tin michael.leib...@gmail.com wrote: Hey All, I've been working on a grid/spreadsheet control prototype during the last couple of weeks. Seeing how there doesn't seem to be a lot of other choices for this sort of thing, I had to write my own. I've put the project up on Google Code and am looking for experienced developers who can pick this up and turn it into something that everybody can use (a jQuery UI grid plugin?). The project is hosted athttp://code.google.com/p/slickgrid/. Below is a copy of the project home page. Looking forward to your feedback! Michael Leibman michael.leib...@gmail.com Principal Engineer Daptiv Inc. --- --- SlickGrid What it is Quite simply, SlickGrid is a JavaScript grid/spreadsheet component. Some highlights: Virtual scrolling/rendering (hundreds of thousands of rows) Extremely fast rendering speed Configurable customizable Full keyboard navigation Resizable/reorderable columns Custom cell formatters editors Support for editing and creating new rows. GlobalEditorLock to manage concurrent edits in cases where multiple Views on a page can edit the same data. Why? This is pretty much a work-in-progress prototype, so I don't feel like spending a lot of time documenting it at this stage. I do think it is quite promising though, so I'm putting it up for everybody to see and play with. In its current form, it satisfies nearly all of the requirements for the project I am working on where I am utilizing it in an MVC application, so I'm not sure how much time I can afford on turning SlickGrid into something that would work for everybody. If you are willing to help out - let me know, and I'll add you to the project so that you can contribute. Examples Basic use:http://slickgrid.googlecode.com/svn/trunk/example1-simple.html Adding some formatting:http://slickgrid.googlecode.com/svn/trunk/example2-formatters.html Turning it into a spreadsheet:http://slickgrid.googlecode.com/svn/trunk/example3-editing.html A more comprehensive test page:http://slickgrid.googlecode.com/svn/trunk/grid.html Documentation See comments at the top ofhttp://slickgrid.googlecode.com/svn/trunk/slick.grid.js.
[jQuery] Re: Call for contributors: A simple, fast and flexible grid/spreadsheet component.
One more point. While this may not be immediately obvious from what you see in the examples and in the code, the key use of the grid is in MVC applications where the grid is wired to respond to events in the Model. In our application we have spreadsheet component of a Gantt chart, and the Model is a filtered view of the tasks (rows) in the original datasource. Suppose you collapse or expand a parent task or enter some text in a Quick Filter textbox. The Model then recalculates which rows are now visible, compares that with what was visible before and fires two events - onRowCountChanged onRowsChanged. The latter one tells all subscribed Views, such as the grid, that the rows in specific positions changed. The grid then only has to invalidate/remove those rows and call grid.renderViewport() to make sure that whatever is in the viewport is visible. The onRowCountChanged event triggers the recalculation of the virtual canvas - grid.resizeCanvas(). Together, this pattern makes for an incredibly efficient, flexible and, most importantly, scalable implementation. I hope this helps explain some of the design elements behind SlickGrid. +Michael On Mar 9, 6:58 pm, Tin michael.leib...@gmail.com wrote: Ricardo, Not using tables is actually key to making the virtual rendering aspect of the grid work. Each row is an absolutely positioned DIV containing DIV cells set to float:left. Rows can then be easily added and removed without triggering cascading DOM changes. In fact, this is done all the time in SlickGrid - as you scroll, only the content of the viewport plus a small buffer is actually rendered, leaving the browser's DOM nice and small. +Michael On Mar 9, 5:40 pm, ricardobeat ricardob...@gmail.com wrote: Looks great. I like how the editing works. One thing: why are you using DIVs instead of a table? That's precisely the only case where tables should be used, to display tabular data. It's semantically correct and can offer performance improvements, as table elements have native properties like their index and direct access to their children. cheers, - ricardo On Mar 8, 9:31 pm, Tin michael.leib...@gmail.com wrote: Hey All, I've been working on a grid/spreadsheet control prototype during the last couple of weeks. Seeing how there doesn't seem to be a lot of other choices for this sort of thing, I had to write my own. I've put the project up on Google Code and am looking for experienced developers who can pick this up and turn it into something that everybody can use (a jQuery UI grid plugin?). The project is hosted athttp://code.google.com/p/slickgrid/. Below is a copy of the project home page. Looking forward to your feedback! Michael Leibman michael.leib...@gmail.com Principal Engineer Daptiv Inc. --- --- SlickGrid What it is Quite simply, SlickGrid is a JavaScript grid/spreadsheet component. Some highlights: Virtual scrolling/rendering (hundreds of thousands of rows) Extremely fast rendering speed Configurable customizable Full keyboard navigation Resizable/reorderable columns Custom cell formatters editors Support for editing and creating new rows. GlobalEditorLock to manage concurrent edits in cases where multiple Views on a page can edit the same data. Why? This is pretty much a work-in-progress prototype, so I don't feel like spending a lot of time documenting it at this stage. I do think it is quite promising though, so I'm putting it up for everybody to see and play with. In its current form, it satisfies nearly all of the requirements for the project I am working on where I am utilizing it in an MVC application, so I'm not sure how much time I can afford on turning SlickGrid into something that would work for everybody. If you are willing to help out - let me know, and I'll add you to the project so that you can contribute. Examples Basic use:http://slickgrid.googlecode.com/svn/trunk/example1-simple.html Adding some formatting:http://slickgrid.googlecode.com/svn/trunk/example2-formatters.html Turning it into a spreadsheet:http://slickgrid.googlecode.com/svn/trunk/example3-editing.html A more comprehensive test page:http://slickgrid.googlecode.com/svn/trunk/grid.html Documentation See comments at the top ofhttp://slickgrid.googlecode.com/svn/trunk/slick.grid.js.
[jQuery] Call for contributors: A simple, fast and flexible grid/spreadsheet component.
Hey All, I've been working on a grid/spreadsheet control prototype during the last couple of weeks. Seeing how there doesn't seem to be a lot of other choices for this sort of thing, I had to write my own. I've put the project up on Google Code and am looking for experienced developers who can pick this up and turn it into something that everybody can use (a jQuery UI grid plugin?). The project is hosted at http://code.google.com/p/slickgrid/. Below is a copy of the project home page. Looking forward to your feedback! Michael Leibman michael.leib...@gmail.com Principal Engineer Daptiv Inc. -- SlickGrid What it is Quite simply, SlickGrid is a JavaScript grid/spreadsheet component. Some highlights: Virtual scrolling/rendering (hundreds of thousands of rows) Extremely fast rendering speed Configurable customizable Full keyboard navigation Resizable/reorderable columns Custom cell formatters editors Support for editing and creating new rows. GlobalEditorLock to manage concurrent edits in cases where multiple Views on a page can edit the same data. Why? This is pretty much a work-in-progress prototype, so I don't feel like spending a lot of time documenting it at this stage. I do think it is quite promising though, so I'm putting it up for everybody to see and play with. In its current form, it satisfies nearly all of the requirements for the project I am working on where I am utilizing it in an MVC application, so I'm not sure how much time I can afford on turning SlickGrid into something that would work for everybody. If you are willing to help out - let me know, and I'll add you to the project so that you can contribute. Examples Basic use: http://slickgrid.googlecode.com/svn/trunk/example1-simple.html Adding some formatting: http://slickgrid.googlecode.com/svn/trunk/example2-formatters.html Turning it into a spreadsheet: http://slickgrid.googlecode.com/svn/trunk/example3-editing.html A more comprehensive test page: http://slickgrid.googlecode.com/svn/trunk/grid.html Documentation See comments at the top of http://slickgrid.googlecode.com/svn/trunk/slick.grid.js.
[jQuery] Re: Deep $.extend() doesn't work with Date objects
I can see why it is working the way it does, but it seems like a clear
and easily fixable bug to me. $.extend() could be made aware of the
intrinsic JavaScript objects so that they are copied (i.e. recreated)
properly.
On Feb 5, 3:11 pm, Stephan Veigl stephan.ve...@gmail.com wrote:
Hi,
this is because jQuery creates anonymous objects for the clones and
copies the object properties. For the Date object there are no public
properties, so only the empty object hull is created.
But you are right, not copying Dates correctly is a bit strange.
If you disable the copy deep flag, your date will be in the clone, but
in this case it's no clone, but a reference to the original date
object.
by(e)
Stephan
2009/2/5 Tin michael.leib...@gmail.com:
Hi guys,
I'm trying to create a deep copy of an object with $.extend(true, {},
obj), but I've noticed that all of the dates get copied as a simple
Object with no properties. Here's a sample code that demonstrates it:
var clone = $.extend(true, {}, {myDate:new Date()});
// clone.myDate returns {}
// clone.myDate.toString() - [object Object]
Any ideas on why this is happening?
[jQuery] Deep $.extend() doesn't work with Date objects
Hi guys,
I'm trying to create a deep copy of an object with $.extend(true, {},
obj), but I've noticed that all of the dates get copied as a simple
Object with no properties. Here's a sample code that demonstrates it:
var clone = $.extend(true, {}, {myDate:new Date()});
// clone.myDate returns {}
// clone.myDate.toString() - [object Object]
Any ideas on why this is happening?
