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.
Related
I have a grid with ASPxCheckBox in Data Item Template. How to get KeyFieldValue of all rows whose checkbox is checked. I am trying to do this using client-side code and do it for whole grid not on visible index. Is it possible?
Note: I cannot use simple row selection command column as I am using it for some other purpose.
if you dontuse client-side code, you should use detailrow in aspxgridview. And you must use beforeperformdataselect event. if you really need checkbox, you can add checkbox a new field in asapxgridview.
Is there an event that fires after leaving a cell in a grid controls row filter?
The first row of my grid is a filter row, when I type something in the cell of and column in the filter row then select a row I want an event to fire.
What is happening is I have a lot of code in the gridView1s FocusedRow changed event, but when I use the filter then select the first row the Focusedrow event does not fire. If I select anything but the first first row returned the Focusedrow event fires and everything is fine, but I need to capture an event after you type something in a filter cell and select the first row in the grid.
I've tried to reproduce this issue using XtraGrid 9.3.4. but to no avail. Everything works as expected in my tests. So, I would suggest that you create a new ticket in the support center and upload a sample project. We will find the cause of the issue and let you know how to resolve it.
Is it possible to select multiple gridview rows using Ctrl+Click and then delete all the selected rows with a button?
You can have a hidden field on the page that gets updated with each row ID in some sort of delimited list. Using jQuery, you can easily add a click event to each row that will add the ID to the hidden field on the client. After clicking a bunch of rows, the hidden field might look something like "3,65,245,111"
Here is a bit of jQuery to get you started. This will assign a click event to each row of a table with the ID "myTable":
$(document).ready(function() {
$('#myTable tr').click(function() {
//Insert your code to handle the click event and assign the row value to your hidden textbox
});
});
The above will make it so that you can handle each time a row is clicked. You'll need to write a bit of code and be creative to figure out how to get the ID of the clicked row.
A separate "delete all rows" button would take the value in the hidden field, split the string at each comma and then delete each row one at a time.
There are lots of different ways to skin this cat and the above is a quick and simple way to get the job done.
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.
I'm working on a piece of code at the moment that uses an older style DataGrid to allow the user to enter information into the table. It already has an add and delete button. Currently the user enters information into 3 textboxes that are in the footer, and the other rows use labels to display the information.
Essentially what I am wanting to do is take the line that the user has clicked the edit button on, and move the text from there in to the footer (deleteing the row that it was displayed on) so the user can make changes and then click the add button again. At the moment I have tried using FindControls to find the textbox and setting the text that way but it doesnt like it. Any ideas?
A few things need to be clarified - are you referring to the older .NET "DataGrid" control or the newer "GridView" control. Also, is this a web or winforms app?
My suggestions -
Have you tried to programmatically add and set the TextBox controls by handling the GridView1_RowEditing event?
To remove the row that's been edited - remove it from the datasource and rebind the grid.
list.Remove(itemToRemove);
GridView1.DataSource = list;
GridView1.DataBind();
Then, take the data from itemToRemove and use it to programmatically create and set textboxes in the footer.
If the third column of your data grid is called "Name" and contains the name data, you would create and set the third column's footer row TextBox value like this -
GridView1.FooterRow.Cells[2].Controls.Add(new TextBox { ID = "tbName", Text = item.Name });
How are you using FindControl? It always helps to post your code ;)
You should be able to execute a FindControl() on the footer row and get the textboxes with no problem.
GridViewRow row = GridView1.FooterRow;
TextBox txt1 = ((TextBox)row.FindControl,"TextBox1"));
Essentially I changed what I had originally planned. Instead of moving the text from the row to the footer textboxes and deleting the row I instead used the EditCommandColumn to create a link button like so
<asp:EditCommandColumn ButtonType="LinkButton" ItemStyle-ForeColor="Blue" EditText='[edit]' UpdateText='[update]' CancelText='[cancel]'></asp:EditCommandColumn>
I also had to add EditItemTemplate to each column, with a textbox in each, and bind the data to the textboxes in the same way that it was bound to the labels in the ItemTemplates.
Then using the ItemCommand event handler I added some code behind to set the EditItemIndex to the row that was being edited.
Private Sub GoodsList_ItemCommand(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs) Handles dgdGoods.ItemCommand
Select Case e.CommandName
Case "Edit"
dgdGoods.EditItemIndex = e.Item.ItemIndex
Case "Cancel"
dgdGoods.EditItemIndex = -1
Case "Update"
dgdGoods.EditItemIndex = -1
'Update details here
Then, at the end of this rebind the data to the datagrid. With the EditCommandColumn it will automatically change from displaying the Edit button to showing the Update and Cancel buttons on the line that is being edited.