I just want to insert A new row in gridView Footer On button click, which is out side Of gridview. every time user click On button There is New row will be inserted In gridview footer for data entry with text box. GridView data row shows the data from database and in footer row which contain text box For new entry. user can add more than one Footer row with text box on by clicking on the button.
Please help me...
Thanks...
We had a similar situation, however we were adding rows dynamically to the body of the table. No reason a similar approach wouldn't work. Note that if you need to submit this data back to the server then some additional functionality needs to be implemented.
Some code is below.
$('button').click(function () {
var newRow = $('table tfoot').First('.Row').clone(); // If you need to insert dynamically you can create the elements in code
$('table tfoot').append(newRow);
});
Related
I have a gridview that has a checkbox (inside TemplateField). I would like to grab all the selected rows and reassign them to a new gridview. Any ideas on how I can go about doing this?
Thanking you in advance.
If I understand your question, the easisest way to do it is to wrap the second grid in a separate grid. Assuming you have named the checkboxses the same id for your second grid, you can use jquery plugin to detect selection of the first grid's check boxes, loop through the results and set check boxes of your second grid inside that other div to "checked" since the names of the chck boxes match.
Something like that:
$(document).ready(function () {
$('#BaseDiv > input[name=checkboxlist]:checked').each(function() {
//TODO: Retrieve the checkboxes from the second div using the combination of second div id and search for it's children check boxes.
});
});
just fetch all the checked rows from the first gridview and add them into a datatable. Now assign this datatable to another gridview as datasource and bind 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 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'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.