Using the Tab key to navigate form inputs - asp.net

I am having some problems with tabbing within my asp.net pages. This project was developed with Visual Studio 2008.
Case 1
I have two html tables. The first table has two rows; the second table has four rows. Within the cells are of each table are asp.net fields, text boxes and radio button lists. I set focus to the first field of table one. I then press the tab key multiple times. The focus moves through the field of table one and then through the fields in the first row of the table two. Then instead of goes to the second row of the table two it return to the table one.
But if I set focus to the last cell on the first row of table two, it tabs through the remaining cells of table two properly. Can you tell me how to get the tabbing to behave properly and go to the cells in there natural order? Note that I am setting the tab index property in the order that I want.
Case 2
On another page I have an html table with a single row followed by a gridview control. The gridview control is writeable and has the following columns: Check Box, Radio Button List, Text Box, Text Box, Text Box and a Check Box List. If I click on one of Check Box, Radio Button List or Check Box List., then press tab, the cursor pops out of the grid and sets focus on the first field of the table outside the grid. But if I set focus on one of the text boxes and tab; then the tab goes through the fields of the grid left to right one row at a time. This later behavior is what I want in both cases. I don’t know why my cursor pops out of the grid when I start with a field other than a text box.
Please help if you can.
Bob

funny, you explain in details your case but you didn't explain what it needs to be explained in order to someone can understand you :)
first of all, is table1 located in the first tab and table2 in second tab?
what do you used for tabs: asp.net tab control, jquery ui tabs...?
what do you mean by 'press the tab key multiple times'? same tab? do you have postback on tab click? what is the focus in your case, and so on and on...
cheers

Have you checked the order of the input elements in your HTML? Generally the tab order follows the order of controls.
If that all looks right, then make sure nothing is setting the TabIndex property - as this will also mess up the tab order.

I pretty much resolve this and I wanted to add the answer for anyone who viewed this thread. The problem was the autpostback on certain fields. Once I disabled autopostback, the problems went away.
Bob

You need to use Javascript and I referred for your a very good example of navigating through Gridview rows with Up/Down keys.
http://www.codeproject.com/Articles/25675/GridView-Rows-Navigation-Using-Arrow-Up-Down-Keys

Related

Is it possible to duplicate a row in grafana?

I want to have many rows on the same dashboard which are very similar, so row duplication would prove very handy.
However from what i can see it's only possible to duplicate a panel.
So is it possible to duplicate a row (consisting of multiple panels)?
Or you can use wizzy to duplicate a row on a Grafana dashboard
wizzy copy row 1 2
Here are the links for getting starting with wizzy:
https://github.com/utkarshcmu/wizzy
https://utkarshcmu.github.io/wizzy-site/home/getting-started/#installation
You can. First create a template: On your dashboard click settings, Templating and create your template variable.
Next, in your panel click on the green bar, Row Editor, select Repeat Row and put your template-variable there.
There is a nice gif-example here underneath "Repeating Rows and Panels":
http://docs.grafana.org/guides/whats-new-in-v2-1/
Per How to automatically repeat rows and panels in dynamic dashboards
Edit the panel by clicking the title of the panel, and click Edit.
In the panel editor, open the Repeat options section.
In Repeat by variable, select the instance variable.
In Repeat direction, select Horizontal to lay out the repeated panels horizontally.
Apply your changes to go back to the dashboard.
Click Add panel, and then click Convert to row. The panels you created earlier are automatically assigned to the row you created.
Hover your cursor over the Row title and click the gear icon to open the Row Options.
In Title, enter $service.
In Repeat for, select the variable you want to repeat rows for. For this example, select service.
Click Update.
Select multiple services from the service drop-down menu. Grafana creates a row for each selected service, each within its own set of repeated panels.
Find the left-most panel in the top-most row and edit it.
In the text area for the Text panel, enter $instance and $service.
Save the dashboard and refresh the page.

TableView Enhancements

The TableView still leaves a lot to be desired. Does anyone have a more complex example of a TableView that you would like to share? Here's what I'm missing:
Insert and Delete row:
Possible solutions:
press TAB on the last cell and new row gets inserted automatically
right mouse button -> context menu -> insert line (or delete line)
a table footer with table navigation and insert/delete buttons (like MS Access)
keyboard shortcut
...
Insert and Delete should be either at the current row position or at the bottom of the table. Of course the new row should be highlighted.
Copying / Duplication of rows inside the TableView
Copy selected cells to the clipboard
(solution exists: copy multiple cells to clipboard, paste into table is missing)
Insert a row with default values
Type to Edit: I don't want to have to doubleclick on a cell first in order to edit it. When you type on a cell, the table should automatically go into edit mode.
Navigation options like e. g. TAB = cell in next column, ENTER = cell in next row
Filtering should be possible via components inside the tableview, not via components (TextField etc) outside of it. A filter indicator (like the sort indicator) would be nice.
Changing the visibility of columns should be convenient, not via multiple clicks of the tableview menu button (for every column you have to click the menu button separately to show the available columns). The tableview menu button should be customizable
(solutions exist with reflection and without reflection)
Row and column headers should be possible
Validation of cells, so that when you are in edit mode and enter text instead of digits into a numeric cell you get the option to cancel the edit mode and revert to the default value
A (fixed) table footer which could e. g. show the sum for each column would be nice
Freezing of columns (there's already a Jira task for this)
Some of these were covered partially years ago from what I've seen. But I couldn't get a clear How-To impression and maybe things have changed with JavaFX8.
In case someone likes to contribute to any of these mentioned features, please share your thoughts. Thank you very much.

Powerbuilder Excel-Cell like edit functionality on Datawindow Grid

I've been given a very unusual request of emulating excel-like editing functionality for my grid.
Here's the scenario: The users would like to be able to immediately change the content by clicking on the cell and typing whatever they wish. Currently, they have to double click on the cell to block select the content, and then type in their desired text to overwrite the cell contents. They'd like the intermediate step of double clicking to block select the text to be taken out. The editable cells hold only numbers.
So I have two options:
1. Automatically block select the cell contents as soon as the user clicks on it
2. Make the cell selection/edit behave the same way as excel
Given Powerbuilder's inherent limitations, I'm fairly convinced this is impossible without some wacky hack, but I'd like to hear ideas.
PowerBuilder does handle this with ease but you can look like a hero to your end-user now.
:)
Auto Select Text in Datawindow Edit Fields
In your datawindow painter, choose the column, then check the "auto select text" property. This will cause your text to be selected as soon as the field gets focus. Now the problem is that PB doesn't provide this feature for edit mask controls but you can get around that yourself using the below example.
Auto Select Text in Edit Mast controls in Datawindow
Add code to your datawindow control that checks for an edit mask field and highlights the text. The example could be put into the itemfocuschanged event of the datawindow control, or in your datawindow control ancestor.
// only if row present
if row > 0 then
if describe( dwo.Name + '.Edit.Style' ) = 'editmask' then
// we found an edit mask so select the text in it
this.selecttext(1,len(string(getitemstring(row,dwo.Name))))
end if
end if
Did you try the Auto Selection edit property?

Looking for a vb.net code to add existing buttons/text boxes/drop down lists, etc. to a container, or holder?

I'm using vb.net. Basically, I have a drop down list, text box and a submit button. You choose a movie director from a drop down list, then type in a movie, click button and it adds the data to my database.
There's another button which hides/shows drop down list, text box and submit button using Visible = True and Visible = False, but what I don't like about it is when it hides the things I said before, it leaves some white/empty space like if they are still there, but not visible.
Is there anyway to put some kind of holder/container and place a button which when clicked could add my drop down list, text box and submit buttons to that place?
Cheers,
E.N.
I assume that you are working with WinForms in Visual Studio. In the Toolbox the controls which could help you out of this situation are in the "Containers" section. Among others, there is a Panel, a FlowLayoutPanel and a TableLayoutPanel (see this video on msdn for a TableLayoutPanel Demo). They can help you to organize controls. Especially the FlowLayoutPanel places the controls automatically. But you can always change the Top and the Left properties of any control, to move them around to the desired place or group some of them on a Panel and change the Location of this one one.
You can add a control to a container by using the Add method of its Controls property. However, if the control is already on the form (since you are asking how to add an existing control) you must remove it from the form before.
Me.Controls.Remove(myButton)
panel1.Controls.Add(myButton)

List Component that acts as if control was permanently pressed

I have a list control and i want the user to be able to select many items at a time. Thus I want it to act that if the control key is pressed while he is clicking. Eg if he clicks on a selected row it should become unselected and if he clicks on a unselected row it should become selected.
Do you have any idea how to do this?
Thanks,
Dennis
If you want to follow standard UI Precedent; then set allowMultipleSelection to true and teach your users to use the control and/or shift button to select multiple items.
If you want to select multiple items without having the using press the shift or control button you'll have to extend the List class. I did a sample a while ago using the DataGrid:
http://www.flextras.com/blog/index.cfm/2009/7/23/Flextras-Friday-Lunch--Episode-22--07032009--Auto-Select-DataGrid
http://www.flextras.com/labs/AutoSelectDataGrid/
http://www.flextras.com/labs/AutoSelectDataGrid/srcview/index.html
You can probably use the same technique with a List. But, I don't recommend this approach.

Resources