Grid Customization - Request for Examples

[Ben S.]

How customizable is the Alpha grid control as far as replicating functionality you might see in an Access datasheet or continuous form, Excel, or a .Net FlexGrid. More specifically can it be configured with the following attributes:

• Arrange the fields so there is no gap between them (on all sides).
• Allow the user to use the arrow keys to move between fields in all directions.
• Allow the user to edit multiple rows without having to save between each row movement. Saving can be done with a button or modeless.

I'd like to convert an Access continuous form to Alpha and still preserve the UI features that the users are used to. They need to edit multiple rows at once. They sometimes only have partial information when they enter a new record. In the example image below, they may not have the Cable Length until all of the records have been entered. The ability to enter a value on each row and simply use the down arrow to enter the next one is a most desirable.

11-14-2014 10-31-19 AM.png

It doesn't have to be the grid control if there is another control that works in a web browser. If you have created something like this, can you please share an image/video/link of it?

Thanks,

Ben

[mvaughn]

Re: Grid Customization - Request for Examples

Ben, you could create a table with the rows and columns that you need in html, then put your grid-field placeholders in each cell " {mygridfieldname} "
This then goes into the freeform property of one visible field (the rest are hidden) and you've got your spreadsheet.
I don't think you can get around the row edits, though.

[Steve Wood]

Re: Grid Customization - Request for Examples

From your list, items 2 and 3 are the default condition for a grid, except you need to use Tab to navigate field to field horizontally while using up/down arrow to navigate vertically. Item 1 can be controlled somewhat using "local" CSS and changing padding to 0px for the Table Cells used in the grid. But the browser itself adds some padding for the Input field.

Browser is not the same as Windows GUI (like Access). Your alignment falls apart when the user squeezes their browser, etc.

[Ben S.]

Re: Grid Customization - Request for Examples

What are you using when you need to collect a lot of information? For example, if you had a timesheet system would you require the user to edit one row at a time, or could the fill in information on multiple rows and freely move around the cells before submitting the data?

Is the UX better for data entry than the Grid? Can someone show me an example that they've made? It would be nice if Alpha would make a "gallery" of application screen captures. I'd like to see the types of interfaces that people have built, especially the ones where they don't look like they came right out of the box.

The best example I have found is in the Alpha Anywhere Web Components Demo | UX Components | Repeating Rows | Enter Invoice. Unfortunately the example isn't bound to any tables so I can't really see how it would work.

[Anita Headley]

Re: Grid Customization - Request for Examples

I use a UX to data entry, but grids for data editing. The UX is bound to two tables - one for header and one for repeating section . The editing is two grids bound together. When user clicks on header record, detail records are automatically retrieved.

[Ben S.]

Re: Grid Customization - Request for Examples

Anita,

Thanks for sharing this example. I curious why you are using a UX for one form and a Grid for another. How do they behave differently?
Also, how does the term "data entry" differ from "editing"?

Ben

[Anita Headley]

Re: Grid Customization - Request for Examples

I started out with the Grid for both because of the easy built-in search, but my main data entry user did not like the interface. I have also not had ANY luck with editing in a UX component. Whenever it does a submit, it tries to insert a new record into the database!

[Ben S.]

Re: Grid Customization - Request for Examples

Do you know if it is possible to change the way the fields look in the grid so there is less gap (or no gap) between them and also so they have square corners? In other words, how far can you go in making it look like an HTML table but still using the Alpha Grid component?

[Anita Headley]

Re: Grid Customization - Request for Examples

Each field on the grid has full ability to modify style - Look under TextBox Properties In-line style

[GGandhi]

Re: Grid Customization - Request for Examples

I curious why you are using a UX for one form and a Grid for another

here is my opinion, I have posted this many times in the board and as well as in my blog, listed below my signature.
the dialog is for entering the information, grid is reading the information. ( even though they both can be used for opposite purpose)

the dialog, or ux in version 12, is originating from you to the server. there is no connection to the server and is independent till you need the server, then it will connect and deposit the information or retrieve information as the case may be. so it is not dependent on the time.

on the other hand the grid is initiated by the server and given to you. If editable grid then you make changes and submit or in the case of read only grid you view information. for the editable grid the server is expecting any changes from you, it will wait for sometime but not entire lifetime. anything can happen to the connection and it may be terminated. so the server will walk away after certain time if it did not receive a reply.

that is the important aspect.
for example in a dialog you are entering information and something comes up like a phone call and you spend a good length of time then resume the work in dialog- no problem
same thing in grid the server will refuse to accept the information saying the connection is lost.
they both can be customized to look the way you want, but remember they are all displayed by the browser. they may not look the same in every browser and in every display. so burning long time to get the most appropriate grid the seeing not so good in certain places will be painful.

main two operating systems are going towards mobile base extending to all the browsers. so if you ask me dialog or ux is the way to go. easily customizable the look pretty and very functional.

I would have said my 2 cents but this post looks like 20, in length, at least.

[Steve Wood]

Re: Grid Customization - Request for Examples

The Grid and UX are both perfect for both manipulating information and read-only.

Also, based on experience and testing just now to be sure:

The Grid and UX behave exactly the same way if the connection is lost for "some period of time". In both cases, if the connection is lost the component will NOT save the information to the server and the Submit button will stay active, indicating that the record has not been saved, and when the connection is restored, and the user clicks Submit it will properly submit the information in both cases, no difference between Grid and UX. No error will ever be shown to the user because the connection is lost (unless you do something special to show that). The UX and the Grid have the same relationship with the server, the server has no knowledge whatsoever about the component or web page or you sitting there, and is not "waiting" for anything from either the Grid or UX and it does not abandon the connection because of any action or inaction on the part of the user (there is in fact, no connection in either case OTHER than the few moments the component is doing something like reading, saving, callback, etc.). You can easily test this by unplugging the cable from your computer during the test. The exact same behavior takes place if you turn off the WAS and try to update a record (assuming the record is already on the screen; here if you refresh the page it will come back as a dead page.)

[Ben S.]

Re: Grid Customization - Request for Examples

What is the tightest editable grid that can be made with Alpha's grid control? Can it have vertical lines? Can it look like an Access datasheet or a Google sheet? I don't know enough about CSS to know what properties to adjust.

I found and modified some JavaScript/jQuery that allows the arrow keys to navigate an HTML table in all directions. It relies on the <td> tabindex property. Could it be used in Alpha?

Here is a working sample: http://jsfiddle.net/bsacheri/gsh7nw5f/7/

Ben

[Michael1954]

Re: Grid Customization - Request for Examples

There is a jQuery example here

http://stackoverflow.com/questions/1...t-in-input-box

The jsfiddle is here

http://jsfiddle.net/tppiotrowski/L7cm8/10/

Most of what you want is available out of the box. Up and down arrows work as you described. The tab works as well.
Just the left and right arrows that don't.

A word of warning not all browsers are created equal, what works in one browser may not work in another.

" Allow the user to edit multiple rows without having to save between each row movement "

This is out of the box in Alpha. Alpha requires you to save before you navigate to a new page, it does not restrict the number of rows in a page.


As for styling that is up to you remove border radius if you want the cell to have a square border, remove all padding


Grid.png

[Michael1954]

Re: Grid Customization - Request for Examples

Most of what you want is available out of the box. Up and down arrows work as you described. The tab works as well.
Just the left and right arrows that don't.

This code allows you to navigate to the previous field.

var char = event.which || event.keyCode;

if (char == 37) {

var grid = "GRID1"; // replace with placeholder

var rowNum = {grid.Object}.getSelectedRow();
grid += ".V.R" + rowNum + ".CODE";

event.preventDefault();
document.getElementById(grid).focus();


}

However it stops you using the back arrow to edit the current cell.
You are going to have to write a fair bit of Javascript to find your position in the string.

http://stackoverflow.com/questions/4...-in-html-input

A word of warning not all browsers are created equal, what works in one browser may not work in another.

" Allow the user to edit multiple rows without having to save between each row movement "

This is out of the box in Alpha. Alpha requires you to save before you navigate to a new page, it does not restrict the number of rows in a page.


As for styling that is up to you remove border radius if you want the cell to have a square border, remove all padding


Grid.png

Michael

[Ben S.]

Re: Grid Customization - Request for Examples

Michael,

Thanks for providing this information. I'm trying to create a sample grid to test it out.

1. How do I know the alias name of my grid?
2. What event do I put this code into? onKeyPress, onKeyDown, onKeyUp?
3. Is it possible to know if the entire text of a cell is selected? That might be a way to know if the arrow should move 1 character or move to the adjacent field.