I've been using jqGrid ASP .Net and really happy with it but I required a permanent blank new row at the top of the grid which allows a user to enter a new row on the fly rather than using the add row dialog.
From looking at the trirand forums, this is currently not supported 'out of the box'.
I have seen this forum post http://www.trirand.net/forum/default.aspx?g=posts&t=212 but it doesn't work (alert is shown but nothing else happens) and also requires the user to click the New button rather than the new row always being at the top of the grid.
Any help would be greatly appreciated,
Cheers
Additional Information:
I am wanting a permanent blank row at the top of the grid where the user enters every new row, below this row would be the data already entered (loaded from the database on page load). As the new row is added (when the user hits enter) the row is displayed in the grid (which I gather would also fire the OnRowAdding event for me to insert into the sql server) and the permanent new row would clear its values ready for new entry. I am also using inline editing (which is working fine) and committing the changes to a sql server database. I am populating the grid on load of the page by setting the datasource to a datatable and calling DataBind()
Look at this example which I created for the answer. The example works with local inline editing and fill the grid with empty data at the beginning. You can modify it and fill only in the first line empty data and all other rows fill with "real" data.
Another way: you can just place "New" button above the rows (see Add toolbar in the bottom of the header using jqgrid which describes how to do this) on the second navigation bar. So users will see it immediately. You can also place custom button instead of a standard "New" button. This custom button (for example "+") could just insert a new row and goes in the inline editing mode.
If all this is not what you want, you should include in your question more detailed information which kind of editing you use (inline, cell or form), where you hold the data (local, only on the server or use loadones:true to have a mix data holding).
Ended up solving this problem by inserting a new row to the datatable when I populate the grid as follows:
DataRow dr = dtTimesheets.NewRow();
dtTimesheets.Rows.InsertAt(dr, 0);
grdTimesheet.DataSource = dtTimesheets;
grdTimesheet.DataBind();
Then on the RowEditing method I check if it is the in fact the new row and perform my insert instead of an edit and then reload the grid which puts a new empty row at the top of the grid again.
Related
I have something like this to enter staff details list. Above is the table list. User click button below the table to add new list record. Then fill in the list details on the form beneath it.
My question is how can I just allow user to enter/fill in the list details directly on the table itself. Not only that, also user able edit record whenever the user clicks the records and wanted to change them.
The example I am providing is specifically for a datasource in autosave mode, so you will need to make some adjustments since it appears that your datasource is in manualsave mode. First you will either want to recreate your table and in the table creator choose 'Editable' which will automatically place inputs in your table row vs labels. Alternatively you can just replace all your labels with Textboxes, Dropdowns, or whatever your input should be. See the image of the table creator below:
Since in my example I used a 'Insert Only' form I moved my 'Create Button' and my 'Clear Changes' button inside the formbody, then set the flow direction of the formbody to horizontal and then matched the spacing of the form fields to the same as my table row and dragged the formbody to be between the tableheader and the tablebody(list) element. See the image below:
Again you will want to make adjustments to fit your needs such as rearranging where your 'Save' and 'Reset' buttons appear and in manualsave mode you may be able to skip the formbody entirely since your 'Add Details' button should automatically create a new table row anyways which you will then be able to edit directly in the table, you may just need to find it first but generally new rows should just be added on the bottom of your current datasource page.
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.
I have two grids. The first displays keys, and the second displays a list of related items in another table. Since the grids are on different tabs, I put a filter on the pageActivated method for the second grid's tab.
Some pseudo code to get my point across without posting 200 lines of x++
override page2Activated() {
dataSource2_ds.removeFilter();
dataSource2_ds.filter using grid1Field.valueStr();
}
This works nicely, as long as grid1 has rows in it when the form is opened. If there are no rows when the form is opened, even after adding a row to grid1, something doesn't get updated, and grid2 will always be blank.
Then, I tried looking at the datasource instead of the grid fields.
override page2Activated() {
dataSource1 firstTable;
firstTable = dataSource1_ds.getFirst(true);
dataSource2_ds.removeFilter();
dataSource2_ds.filter using firstTable.recID;
}
The problem with this one is that it only works if you click the checkbox next to a record.
I'd like to to work with a highlighted record in grid1, without having to click the checkbox.
Any suggestions?
Question answered in comments above. Posted as answer so the question can be marked closed.
Rather than using code to manually filter the records, link the tables using the datasource properties JoinSource and LinkType. Set JoinSource to the linked table and LinkType to Active.
I have an ASP .net grid view. It has some template columns like a command button, a text box, and a dropdown control. When I click the command button, a new row needs to be inserted below the current row (from where I hit the command button).
If I have rows 1 and 2 and I hit the command button in row1 a new row needs to be inserted between rows 1 and 2
Now in the new row I should be able to select values from dropdown and enter some value in a text box and finally hit my save button. (Which should work fine as I am expecting)
The grid view is bound to some data source say for instance a datatable for now.
Oneway that I could think about is when Command button is clicked, I can add a new row to the datatable in my server side code and rebind the grid. But I am not sure that, from a UI perspective how I can make sure that the new row goes exactly below the row from where I hit the command button.
Any thoughts or comments?
I think a much easier approach will be if you try to add the row in your data source and then bind to the GridView again. This is easy if you have DataSet or a custom entity collection. Since, you are using DataTable this will also work. Handle the click event and find the row that the user clicked. Go back to the dataTable and add an empty row there. This will make sure that the controls inside the GridView are persisted and you don't have to worry about adding DropDown controls etc.
You have to sort the datasource by an virtual index saved in an invisible column. On first databound(perhaps you take a DataView because of ots sorting capability) it will set to the original rowindex. After first hit of the save button you get the datatable again from database and add the additional row with an index after the "selected" row. Then you bind the GridView again with the sorted DataView.
I think you need another invisible column to detect the "temporary" row. If you dont need to edit the "normal" rows then you can use edititemtemplate for this. Otherwise you can make the dropdown and textbox visible and the other controls invisible in GridView.OnRoawDataBound.
There is a code sample that is used for adding a new row in between rows in a grid view.
I have a Listview in my aspx page with Insert template and Edit template. and a Add New LinkButton.
When a user clicks on Add New LinkButton I am able to specify Insertitem Position so that the Insert TEmplate appears at the bottom of the listview. But how to I make the edititem template to appear at the bottom like the Inserttemplate
Its not available for the EditItemTemplate.
You'd have to actually save the original position, move the item in the data source itself (probably IList compatible), rebind the view, trigger editing on the new position, then swap the data item back to the original position.
I wouldn't recommend it. It's nonintuitive behaviour for users anyway; when I decide to edit something I should either be able to edit in place or edit on an entirely separate form. It's very rarely good UI design to shuffle items around while users are working on them, especially if you have any sort of scrolling/paging going on.