|
|
Rank: Member
Groups: Member
Joined: 6/2/2008
Posts: 27
|
I want to have the dropdown display the value that was saved to the database. When the grid is loaded the dropdown is empty. Is there a way for me to set the select dropdown with a default value?
TIA
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi Tim,
The default value when you enter the edit mode is the cell value. So the easiest way for you is to provide the default value when you populate the grid. You can usually use an IIF in your select statement to provide a default value if the value in the DB is null.
Thanks
|
|
Rank: Member
Groups: Member
Joined: 10/4/2008
Posts: 28
|
Could you explain this in more detail? I am populating my dropdown values from a database table and reading in row data values from a database. By following your examples, this all works fine except the initial vaue displayed in the dropdown is always <Click to edit>. I need to display the value retrieved from the database before editing.
Thanks,
James
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi James, Your situation mostly has to do with your EditorTemplate and ClientSideOnBeginEdit routine. In order to work with these two elements, you will need to know how CustomItem works in general. I will try to give you a brief summary below. But you will definitely want to go over the full thing here: http://www.essentialobjects.com/ViewDoc.aspx?t=Grid%2fcustom_column.htmlThe above topic explained how CustomItem works in great detail. It will be very helpful especially when you want to customize the advanced samples. The key for a custom column is that the underlying cell data and the visual representation for the data can be different. For example, it can displays "Good" when the underlying data is 1, and "Average" when the underlying data is 2, etc. This requires a two way translation: 1.a. When the Grid needs to display data, it needs to translate "1" to "Good", "2" to "Average", and so on; 1.b. When the Grid needs to edit data, it needs to translate "1" into an HTML element that supports editing, for example, an HTML textbox element, a dropdown list box, etc; 2. When user finishes editing the data, it needs to translate whatever in the editing element back to "1", "2" and so on; This two way translation process is what you are really "customizing" with a custom column, and the whole translation process is totally on you. Because user often wants to edit a grid cell, the grid allows you to provide two different translations from data to visual representation. One translation for displaying, one translation for editing. For example, translating "1" literally to "Good" would be sufficient enough for displaying (1.a). However, in order to support editing, you must translate it into an HTML element that supports editing (1.b). For example, a select element with multiple items and with the correct item selected. Obviously in order to do this you need to know basic HTML well. The Grid provides several "connection points" for you to implement your own #1.a, #1.b and #2 logics and allow you to hook your logic to the Grid through these "connection points". EditorTemplate and ClientSideOnBeginEdit routine is what affects #1.b. So that would be where you need to look. Hope this helps. Thanks
|
|
Rank: Member
Groups: Member
Joined: 10/4/2008
Posts: 28
|
OK, I got the dropdown working. Thanks.
Next question. How can I implement validation of data entered into the grid?
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi, That would again be up to you when using custom column. :) Based on the same steps outlined above, filling the dropdown from your data is #1.a and #1.b. Getting the data from your drop down back to the Grid is step #2. Since the whole process is done by you, you will need to perform whatever validation logic there. Note there is no notion of "refusing new value" for custom column. When user exits edit mode, you are responsible to provide a value to the Grid based on user's input. If the user's input is valid, you return the user's input, otherwise you would usually return the old value as demonstrated here: http://www.essentialobjects.com/ViewDoc.aspx?t=JSDoc.Public.Handlers.grid_customcolumn_endedit.htmlThe key at here is that you need to give the Grid a value no matter what. The Grid doesn't care whether and how you validate your data. It asks for a value for the specific cell and will happily take whatever you give to it. This also means you can not prevent the Grid cell from leaving edit mode and force user to change their “wrong” value. You can also do validation on the server side. It’s a totally different matter though. Thanks
|
|
Rank: Member
Groups: Member
Joined: 10/4/2008
Posts: 28
|
Sorry, I didn't mean validation of the dropdown, but validation of data in general. For instance, is it possible to validate a textbox or datetime column against a valid range, etc when the user exits a cell?
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi,
The Grid does not carry any kind of validation logic in general. Validations are performed by the corresponding "cell editors". In case of a custom column, it is done by your custom column code; In case of a DatePicker, it is done by the DatePicker. For example, you can set the DatePicker's MinValidDate and MaxValidDate to restrct the range of the date user can choose. For textbox, you can use a MaskedEditColumn to restrict what user can enter.
If such built-in logics can not meet you need, you will need to implement some sort of "do over" logic. This means you let the Grid to accept whatever "wrong" value first, then prompt the user and put the Grid back into edit mode. You can do this either on the server side or client side. When you do it on the server side, you would set EditItemIndex and EditCellIndex to a row or cell into edit mode; When you do it on the client side, you would call the Grid object's editItem or editCell method to do the same.
Hope this helps.
Thanks
|
|
Rank: Member
Groups: Member
Joined: 10/4/2008
Posts: 28
|
Another question. I can't seem to navigate from one cell to another in the grid using the tab or arrow keys. Does this work with FullRowMode="False"?
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi,
Have you set EnableKeyboardNavigation to true?
Thanks
|
|
Rank: Member
Groups: Member
Joined: 10/4/2008
Posts: 28
|
Yes. If I hold down the down arrow key long enoght the grid will scroll down, but no cell is ever highlighted for editing.
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
No. It will never automatically highlighted for "editing". When you use arrow keys, it changes the current selected row or cell ---- which has nothing to do with editing. If you do have EnableKeyboardNavigation set true but do not see the current selected row or cell changes, then most likely it's because you have not set the grid's SelectedStyle. When SelectedStyle is not set, the selected row/cell will still change, but since visually they still appear no different than any other cell, you won't see the change.
I believe the default Windows Vista template have SelectedStyle set, but Windows XP template does not. So try to play with different template and you should be able to see how it works.
Thanks
|
|
Rank: Member
Groups: Member
Joined: 10/4/2008
Posts: 28
|
I am using Style 1. When a column is selected using the mouse it has a blue border. It is just like your Excel Style sample. If I add EnableKeyboardNavigation="true" to your sample it acts the same as mine. You can select a cell with the mouse, but when you press an arrow key, nothing is selected anymore.
|
|
Rank: Member
Groups: Member
Joined: 10/4/2008
Posts: 28
|
By trial and error, I just discovered that if I press the Enter key each time after I move using an arrow key, the new cell is highlighted for editing. Is there any way around that?
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi,
I do the following:
1. Open our demo project with Visual Studio;
2. Open Demos -> Grid -> Designs -> Style 2;
3. Set the Grid's EnableKeyboardNavigation to true;
4. Run the page and you will be able to use arrow key to move the current row;
Open the page again and then set the Grid's FullRowMode to false. Run the page again and you will be able to use arrow key to move the current cell;
The same would not work for Style 1 because Style 1 does not have SelectedStyle set.
You need to forget about editing. Keyboard navigation is all about selected item/cell. You will want to try the feature without editing first and you will immediately see how it works.
Thanks
|
|
Rank: Member
Groups: Member
Joined: 10/4/2008
Posts: 28
|
I see how that works, however, I can't "Forget about editing" That is why I need an "Excel" style grid - so the user can easily edit data. Is there any way to put the cell into edit mode automatically when it is "selected" by navigating to it via the keyboard, just like when I use the mouse to "select" a cell? Is an event fired when a cell is "selected"? Otherwise, what good is keyboard navigation?
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi, You can do that with ClientSideOnCellSelected. It will be something like this:
Code: JavaScript
function on_cell_selected()
{
//Use setTimeout to delay our action until the Grid has
//finished it's own internal works
setTimeout(
function()
{
//Get the grid object
var grid = eo_GetObject("Grid1");
//Get the selected cell
var cell = grid.getSelectedCell();
//Put the selected cell into edit mode
if (cell)
grid.editCell(cell.getItemIndex(), cell.getColIndex());
}, 10);
}
Code: HTML/ASPX
<eo:Grid ClientSideOnCellSelected="on_cell_selected" ...>
....
</eo:Grid>
Note that every cell that has entered edit mode, regardless whether user has actually made any changes, will be marked as "edited" when the Grid is posted back to the server side. So there is a performance penalty if you move around a lot but only modifies very few. That's also why by default, you need to hit enter to put the cell into edit mode. Hope this helps. Thanks
|
|
Rank: Member
Groups: Member
Joined: 10/4/2008
Posts: 28
|
Thanks. That is what I needed to know.
One more question... I have 2 datetime columns in an excel type grid which are populated when the grid is created. Why does one column go blank when I select it and the other shows the pre-populated date correctly when I select it?
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi,
That almost certainly has to do with your code. The Grid does not treat one DateTime column differently than the other. Thus I would recommend you to compare the code/data source/data field for those two columns and it should not be difficult to find out why.
Thanks
|
|
Rank: Member
Groups: Member
Joined: 10/4/2008
Posts: 28
|
Thanks, I found the problem. It was in the date format used in sql.
Now I need help using the tabstrip. Is there an example showing how to respond to selection of a new tab? Such as do some validation or send a message if something needs attention before moving to the next tab.
|
|