comments on the editor

[devol]

To further comment on the number editor, a way to set precision and scale similar to "bigdecimal". So someone trying to enter 10.132 as a value for currency will fail validation. I Believe someone on the main page mentioned a precision seperator to replace the "." with ",".

The date selector is awesome, is it possible to restrict dates from being chosen? Does it hook to the validation method for the editor to determine if someone chooses a correct date? That would be a nifty feature.

While we are wishlisting, perhaps a way of displaying double calendars for ranges in two columns? Start Date / End Date style?

I would like an easy way to override the navigation features. For instance I would like shift-tab to go backwards and enter to go down columns.

It would be handy to have a way turn editing mode on and off for a grid globally. Or even better to do it on a per column basis.

It would also be handy to be able to hook tooltips into the grid for existing data (not just validation information.)

I haven't looked to see, but I assume the checkboxes can be made to display as checkboxes and not "yes".

[jack.slocum]

To further comment on the number editor, a way to set precision and scale similar to "bigdecimal". So someone trying to enter 10.132 as a value for currency will fail validation.

That's a good suggestion. I will add it.


The date selector is awesome, is it possible to restrict dates from being chosen? Does it hook to the validation method for the editor to determine if someone chooses a correct date? That would be a nifty feature.


Not currently. However, if you pick a invalid date you do get instant feedback and the date is rejected when you leave the cell. The Yahoo calendar does support that feature and you are able to override the showCalendar method and use the Yahoo! UI calendar. I will look at adding the min/max dates to the DatePicker and see how time consuming it will be and get back to you on this.


While we are wishlisting, perhaps a way of displaying double calendars for ranges in two columns? Start Date / End Date style?


I don't think this is really possible currently. The whole design is based on editing one cell at a time. Implementing editing for two cells at once would require some serious refactoring.

I would like an easy way to override the navigation features. For instance I would like shift-tab to go backwards and enter to go down columns.

The EditorSelectionModel has a method you can override (keyDown) to implement your own navigation. Shift tab is a good idea, I will add it to the default navigation function. Enter is currently captured by editors to stop editing. I will look at bubbling it up to the EditorSelectionModel to implement down on enter like you suggested. That' another good idea.

It would be handy to have a way turn editing mode on and off for a grid globally. Or even better to do it on a per column basis.

//Turns off editing for column 1
colModel.setEditable(1, false);

I haven't looked to see, but I assume the checkboxes can be made to display as checkboxes and not "yes".

All of the editors are implemented as a single control reused for all cells in that column. Rendering is handled by a renderer function. The rendering function I defined just displays Yes or No. You can implement your own render function to put in checkboxes (instead of using the editor) rather easily, but then you will also have to call dataModel.setValueAt(rowindex, colindex) manually when the checkbox's state is changed.

I will implement the suggestions above and let you know when I put up a new test copy.

Thanks,
Jack

I wish I had the free time available to help you out with this project. You sir, are a machine! Such fast progress!

In its current state, and easy fix for me though would be just to make the user press enter twice. Once to update the cell and again to navigate downward.

[jack.slocum]

Haha, yeah I think I like my work a little too much. At least my wife would say so. :)

I put up a new version with shift+tab to go backwards, enter moves downwards when editing, and decimalPrecision functionality. You may need to refresh your browser.

The way I implemented decimal precision was to define it as a property decimalPrecision, and then a decimalPrecisionFcn. The way it works is by cutting off or rounding or whatever any extra precision, but the value is still valid.

Examples:
decimalPrecision = 2 (the default)
decimalPrecisionFcn = Math.floor (the default)
User enters 1.253 and hits enter. The value for the cell will be 1.25

decimalPrecision = 2
decimalPrecisionFcn = Math.ceil
User enters 1.253 and hits enter. The value for the cell will be 1.26

decimalPrecision = 2
decimalPrecisionFcn = Math.round
User enters 1.253 and hits enter. The value for the cell will be rounded down 1.25

You can of course define your own precision function and use it as well.

What do you think of this solution?

It looks good for my purposes. I'm trying to think of a situation where someone would want error text to show up when there are too many digits of precision, but I can't think of such a scenario right now.

One other niggle I just noticed with the editor:
When you click on a field, it goes into edit mode and highlights the text in the field. If I press an arrow key to go to the beginning or end of the selected text, I get jumped out of edit mode and placed in the next or previous cell.

Once again related to bubbling events I'm sure. I don't know what to reccomend as a solution though. Adding event handling into the editor would complicate things a bit wouldn't it?

[Ejetorix]

First of all: Congratulations for that great job, hope you will be enjoying it. Second: Sorry for my bad English, all my life studying it and sniff.........

Well, as you will see, people just ask you for improvings? and bugfixes, and I will not be the one that didn't do. :D

Well, here i go. I would like to see a separate div with conditions that manages the data grid, and order it, this way will be possible to do a seach for a date in an interval and many other things that will make this datagrid one of the best in the net nowadays (free).

I would like to see a footer in the grid that paginates the content of the grid and you can define how much results you want to see in one "page".

I would like to see that the fckeditor or mcedit or similar are linked to a cell to edit it contents as html editor.

I would like to see a first column with checkboxes to select the row that allows us to manage the content (delete, edit).

Another separate div under de grid could be a form that edits or insert content to the grid, not all the functionalities must be in the grid, the grid editable is great but this has any limits, that you can fix this way.

At your actual rithm of work, I know you must have this features working in a couple of days. :D

Another little detail....... What i have to do to make it work in my home? I just downloaded the build .31. How can i get your example running in my apache home server? Am i missing something?

Looking at folder with the archives, yui.js and yui-ext.js together are in 173 Kb without the other ones, it is going a little heavier than it must be? (looking at rico, prototype, etc), that is the reason I told you about not to do all built-in the grid, is not true that the grids are not alone in any page?

Sorry for my english, and congratulations AGAIN.

[jack.slocum]

One other niggle I just noticed with the editor:
When you click on a field, it goes into edit mode and highlights the text in the field. If I press an arrow key to go to the beginning or end of the selected text, I get jumped out of edit mode and placed in the next or previous cell.

Devol:

This is actually the same behavior as MS Excel so hopefully users will be used to it. Unfortunately it's either one or the other. Either you can navigate the cells using the arrows, or you can move through the text using the arrows. There's no way to do both.

[jack.slocum]

Well, here i go. I would like to see a separate div with conditions that manages the data grid, and order it, this way will be possible to do a seach for a date in an interval and many other things that will make this datagrid one of the best in the net nowadays (free).

I leave this part up to you. The grid has a powerful API that you can use to build these type of "remote controls". There isn't really any way I can create something like this that is universal, fitting everyone's individual needs. It is possible that some users will build things like this and hopefully contribute them so others users can learn from their examples and/or just plug them in. I guess only time will tell.

I would like to see a footer in the grid that paginates the content of the grid and you can define how much results you want to see in one "page".

I will soon be working on a remote dataset feature that may meet your paging requirements. A standard grid footer will also be implemented at the same time. Standard paging is pretty easy to do now, you just have to write the UI (links or whatever) yourself. It only takes 1 line of javascript to load new data in the grid. Using something standard like dataModel.load('myscript.php?page=2') will work just fine.

I would like to see that the fckeditor or mcedit or similar are linked to a cell to edit it contents as html editor.

The grid editor is currently limited to cell's height/width. With this limitation this is no room for an HTML editor. However, an idea I have is to implement a standard popup editor component similar to how Visual Studio does in it's properties editor. In the popup editor you could put anything, an HTML editor, a list builder or whatever was required. This will probably come in a later release though.

I would like to see a first column with checkboxes to select the row that allows us to manage the content (delete, edit).

The grid has a full selection model available to manage selected rows. In edit mode it is very odd though when the grid is popping around selecting rows as you edit. One solution I have seen used is to make cells double-click to edit and single click to select a row. I'm not a big fan of this solution. The checkbox idea is a good one, and the way I would implement it is with a renderer function assigned to the first (or last) column that renders a checkbox with that row id as it's value. Then you could accomplish what you are seeking rather easily. Since a function like this would take all of 5 minutes to implement, it makes sense to be done outside of the grid rather than having the grid do it internally (which would be a little more tricky).

Another separate div under de grid could be a form that edits or insert content to the grid, not all the functionalities must be in the grid, the grid editable is great but this has any limits, that you can fix this way.

Yes, this is a good idea. That is up to you to implement though. There really is no way I can implement a universal form that would meet everyone's needs or page layout. The DataModels have an API for adding, deleting and inserting rows that you can call when the user submits the form.

Another little detail....... What i have to do to make it work in my home? I just downloaded the build .31. How can i get your example running in my apache home server? Am i missing something?

The editor feature isn't in build .31 as it's still considered alpha/beta quality and isn't fully documented yet. It will be part of build .32, or whatever the next build number ends up being.

Looking at folder with the archives, yui.js and yui-ext.js together are in 173 Kb without the other ones

My yui.js file includes all the yahoo ui utility classes. yahoo.js, event.js, dom.js, animation.js, dragdrop.js and connection.js. You may not need all those.

yui-ext.js includes the whole yui-ext library in one file. That includes the Animator classes, UpdateManager and TabPanel classes which aren't needed for the grid.

Like yahoo ui, all the yui-ext code is namespaced so it plays nice with others. Other libraries put things on the global namespace, which saves code size but can lead to collisions.

(looking at rico, prototype, etc), that is the reason I told you about not to do all built-in the grid, is not true that the grids are not alone in any page?

The grid code by itself is 40k. The editors add 14k. Considering the Yahoo! UI code to make a simple panel is 60k (container_core.js), I think that's pretty reasonable.

Comparing with Rico+prototype, Rico is 88k and prototype is 45k. That's 133k.

yui.js + yui-ext.js are 173k and includes a custom Animator library, TabPanel and SplitBar widgets which aren't present in Rico+prototype. The Rico grid is a standard table with remote data support and sorting/locked headers. I'm not knocking it, it's a great piece of work. The yui-ext grid is a little different, and supports resizable columns, full selection model and editing. Implementing keyboard shortcuts and navigation, real-time data validation and support for internationalization and similar features missing from other libraries - that takes code.

With all that said, I am going to start exploring ways to compress the code further. One idea I have is after JSMin'ing the code, I will wrap everything in 1 anonymous function and assign a bunch of shorthand local variables. Then I'll use some regular expressions to replace things with the shorthand version and reduce the code. The main problem is this has to be done after building the main file and not while coding because otherwise JSDoc won't pick up the classes. I've tried.

Thanks for the feedback and don't worry about your english. I'm sure if tried to make a post in your native language I'd do much much worse. :)

[Ejetorix]

Hello again.

Me: I would like to see a separate div with conditions that manages the data grid, and order it, this way will be possible to do a seach for a date in an interval and many other things

Jack: I leave this part up to you. The grid has a powerful API that you can use to build these type of "remote controls". There isn't really any way I can create something like this that is universal, fitting everyone's individual needs.

Me: Another separate div under de grid could be a form that edits or insert content to the grid, not all the functionalities must be in the grid, the grid editable is great but this has any limits, that you can fix this way.

Jack: Yes, this is a good idea. That is up to you to implement though. There really is no way I can implement a universal form that would meet everyone's needs or page layout.

------------------------------------------------------------

Well, a little "config" file for the grid lets you know the name, the witdh, the type of field (different controls for each), and if you want the validation for that field and what you need to describe the fields, so if you have this information when you are rendering your grid, just have all the necesary information to get the div with filters and the div with the form, universal form?, just a form with the fields that you have in the "config" file.

Yes, i guess you are just focused in the grid, keep on that, when it finally becomes more stable and definitively in the yui release, I'll try to implement those things. (Hope, i'll be qualified enought to do it).

I know that this can be done with the powerful API that the grid will definitively have, I only told it to you, because you can have a more powerful example to show with this features included, just like http://unspace.ca/livefilter an entry seen in ajaxian.com. The difference is that in place of returning the number of result that your filter will return, this just filter your grid.

I know than with your knowledges of de yui API and the grid it takes a few lines of code, but for the example it will be great. Definitively I don't know if you understand what i mean, if not, simply forget it and have a nice code! :D

At last, your response impressed me, 3:08 am!!!!! WOW what about sleeping a little? your wife will apreciate it. Best regards for you.

[jack.slocum]

The form part does touch on an idea I have. Using the 'live' form fields like the grid has, plus more of course, it's possible I may pull them out of the grid and create a small collection of form controls. I think real-time validation in forms instead of alerts when you submit is definitely the direction the web is going. Maybe that can be a project after the grid.

Currently these controls are bound to the grid. All of the logic is based on a column, fitting a cell, etc. Taking them out and putting them on their own without the grid is possible, but it will take a bit of work. That's why I say possibly another project when the grid is finally released.

I only told it to you, because you can have a more powerful example to show with this features included, just like http://unspace.ca/livefilter an entry seen in ajaxian.com. The difference is that in place of returning the number of result that your filter will return, this just filter your grid.

That can still be done very easily now. You could build your form separate from the grid (since you wouldn't need editing anyway) and post the form to the server using the DataModel and get your results in the grid. The grid related code would be under 15-20 lines and could be done in 15 min, all you have to do is make your search form. In fact the Feed Reader example is doing the same thing, only it's returning an rss feed instead of search results.

At last, your response impressed me, 3:08 am!!!!! WOW what about sleeping a little? your wife will apreciate it. Best regards for you.

The funniest part is I am still up. Too much coffee I guess. ;)

[Ejetorix]

I know that is not the place to do it, but if anybody want to contact me ejetoro a-t h-o-t mail's. messenger included in the offer.

[devol]

As an aside, when I get back from my honeymoon, the project I am working on is linking this grid to the canvas DHTML charting tool from webfx.

[jack.slocum]

Let me know how that goes. I'd love to see it.

FYI, I did implement all kinds of Date selection restrictions like you initially suggested. Since I included regluar expression support too, you should be able to do any kind of restriction you want. The grid on the blog post has been updated with some restrictions.

Jack