Semantic markup to achieve last row editable effect? - xhtml

I'm looking to have a table that can be added to by just typing into the last row and clicking on the "Add" button at the end of the row. All other rows in the table can be deleted by clicking on a button in their rightmost column.
My problem is that forms can't wrap only one row and validate as XHTML. If I make the form wrap the entire table, it'll include the rows which have a form as their last cell too. And forms within forms are definitely not valid.
Suggestions?

Thanks for clarifying the situation. The way I see it you have a few options here:
Are you using (can you use) JavaScript? If so, you can easily modify the submission URI based on which button was pressed. You can thus get rid of all forms except for table-wrapping one.
Alternatively, depending on your requirements, you may be able to replace your "delete" buttons with links (possibly styled like buttons) in which case you won't need forms to wrap them. Note that this approach does not require javascript UNLESS you need to handle a situation when someone begins to fill last row and then clicks on "delete" on some other row and you want to preserve incomplete changes made to last row inputs. In this case you'd still need to use javascript to submit the form so #1 above would probably be better.
Bite the bullet and submit to the same URI. Distinguish what button was pressed by button name. You can always redirect to appropriate URI at that point.
Make your peace with non-validating html :-)

Related

Ag-grid dynamically span entire row

I have a grid that presents database entities one per row with some crud options (the crud options are icons in their own cells). When the delete button is clicked, the design calls for the entire row to be turned into a confirmation message with buttons to continue or cancel.
Apparently you can give a function for colSpan on each colDef. I tried giving the first colDef a span equal to the number of displayed columns in the case that the row data has a property isDeleting === true, while clicking the delete icon would set the row data's isDeleting property to true.
I was unable to get this to work, and even if I were to get it to work, I'd need to be able to dynamically change the cell so that it contains the confirmation message.
Any help is greatly appreciated.
After a very long day of searching, I found this article on "full-width" rows. You can provide your gridOptions with an isFullWidthCell function, plus fullWidthCellRenderer and fullWidthCellRendererParams properties, and the full width of the row will be populated using the renderer according to the params (as is the case with a cellRenderer in a ColDef)
So, my delete button component can set a piece of data that the isFullWidthCell function can check for, and if it finds it, it will use the cellRenderer provided.
AgGrid seems to have thought of everything.

In app maker, how can I clear a column sort?

When app maker creates a table it can make the columns sortable, which is great, but after a user clicks on a column, how can you clear that sort setting to get the table back to either the default settings from when the page first loaded or a specific sort order as in the script below? I am presently using a Refresh button which merely reloads the datasource, but the column sorting remains. Suggestions?
I have tried reloading or navigating back to the page itself, but that had no effect either.
this is the augmented Refresh onClick script that includes the sort order:
widget.datasource.query.sorting.App._ascending();
widget.datasource.query.sorting.Role._ascending();
widget.datasource.query.sorting.Name._ascending();
widget.datasource.load();
Morfinismo gave me the code fragment I was missing, but here's the breakdown:
This will reset any filters and clear out filter fields like dropdowns or suggest boxes:
widget.datasource.query.clearFilters();
This will clear any sorting, so if you want sorting, you will need to add it like so:
widget.datasource.query.clearSorting();
widget.datasource.query.sorting.App._ascending();
widget.datasource.query.sorting.Role._ascending();
widget.datasource.query.sorting.Name._ascending();
which will clear the sorting and reset it to your liking, but will not remove the little arrow graphic on the column heading. For that you will need to navigate back to the page you are already on to refresh it like this:
app.showPage(app.pages.AppRoles);
Here is the complete Refresh button onClick script:
app.showPage(app.pages.AppRoles);
widget.datasource.query.clearFilters();
widget.datasource.query.clearSorting();
widget.datasource.query.sorting.App._ascending();
widget.datasource.query.sorting.Role._ascending();
widget.datasource.query.sorting.Name._ascending();
widget.datasource.load();
This worked for me, but I'm sure there are other approaches and tricks of the trade. Feel free to post them here for future answer seekers.

I need to display a pop up table on clicking a button in vb.net. How do i do this without the gridviews just on plain button click?

I need a table to pop up or flash on the users screen when a button is clicked
It is a reference table, users can go back and check the codes while filling a form. This is to be done vb.net. Please help me i need the simplest solution possible
in my opinion:
1) If you don't insist on formatting and you would like to only display table data, you can simply write the data into string, which you will display in a MsgBox dialog. You'll probably will have to take care about partial string lenghts in columns (trim, or complete with spaces to a specific length) and then it will look OK. Bellow is an example of such data (only a test dialog) without any trimming/completeng:
2) For a serious table, you'd have to either use datagrdiveiw (or such) in a separate form, or draw your table using GDI, which would be a rather complicated and eccentric method.

InfoPath - Delete specific repeating section

I have recently been tasked of extending the add/remove functions for repeating sections within an InfoPath form. Primarily because the default look is pretty ugly and unintuitive.
What I want to do is to place a "remove" button within each of the repeating sections, which when clicked will remove that section. This seemingly simple task does not appear to be all that simple in InfoPath.
Does anyone know how I would go about such a thing?
Removing the whole repeating section? or line in that section?
For the whole repeating section, try hiding rule it by putting it inside another section.
There is no out of the box rule that will delete the section.
You could use code for this - write code that deletes the instance of the group when the button is clicked.
You could also leverage Mekalikot's suggestion - add a field called "hide" or something in your repeating group and when the user clicks "Remove" set "hide" to true. Add conditional formatting to hide the repeating section if "hide" = true.

ASP.net: Complex validation of dynamically created DropDownLists

I have a GridView with records of the database.
I create two DropDown lists dynamically for each selected item. That means, if I click select, two DropDown lists appear, the first one defines a start position, the second one a stop position. Both includes numbers (depending on how many items I have selected). If I have selected 5 items, all DropBox controls include the values 1 - 5. Everything is done by code behind.
Now I want to validate that. The stop Control shall be set to a higher one as the start control. Further more, each area that is already used, is not allowed for the next controls. E. g. if I select in the first pair of DropDown lists the area 1-5, I shall not be able to choose 2-6 with the next pair of controls.
How can I do that. I thought about javascript but that could be very tricky because everything is done with code behind. The validation controls are nice, but I don't know how to validate such a complex thing...
Any Ideas?
thank you for your answers!
I dont wont to do a async postback each time, especially because the lists shouldnt be limited during the changes. I solved it in that way:
The user clicks on save, I create a bool array for each dropdown item, then I loop through all dropdownlists in the placeholder. If there is a area from 3 - 5 I set the values with index 3-5 in my bool array to true. If one of these values is already true, there must be a wrong selection in the start/stop positions.
I think, its not a very nice way but works pretty fast and does everything I want. If someone has a better idea, please let me know... ;)
Thanks!
Stefan

Resources