Get the selected row from the drop-down list for editing and updating

Question

I have an anchor tag to update a row in gridview. I set the checkbox in gridview. When the user checks the checkbox and clicks the refresh button, the existing line should open with a popup window.

A popup window is currently opening, but not with validated rows with existing data. Please read the code for reference: -

<a id="popup" onclick="div_show()" class="btn btn-success"><i class="fa fa-plus-circle"></i>Add new</a> <a href="javascript:;" class="btn btn-primary" runat="server" onclick="div_show()" ><i class="fa fa-refresh"></i>Update</a> 

Also see gridview code for reference: -

 <asp:GridView ID="grdCSRPageData" runat="server" Width="100%" border="1" Style="border: 1px solid #E5E5E5;" CellPadding="3" AutoGenerateColumns="False" OnDataBound="grdCSRPageData_DataBound" AllowPaging="true" CssClass="hoverTable" EmptyDataText="No Records Found" OnPageIndexChanging="grdCSRPageData_PageIndexChanging" DataKeyNames="Id" OnRowDeleting="grdCSRPageData_RowDeleting" PageSize="5" ShowFooter="true" OnRowEditing="grdCSRPageData_RowEditing" OnRowUpdating="grdCSRPageData_RowUpdating" OnRowCancelingEdit="grdCSRPageData_RowCancelingEdit"> <AlternatingRowStyle CssClass="k-alt" BackColor="#f5f5f5" /> <Columns> <asp:TemplateField HeaderText="Select" HeaderStyle-Width="5%" HeaderStyle-CssClass="k-grid td"> <ItemTemplate> <asp:CheckBox ID="chkSelect" runat="server" AutoPostBack="false" /> </ItemTemplate> </asp:TemplateField> <asp:BoundField DataField="page_title" HeaderText="Page Title" ItemStyle-Width="30" HeaderStyle-CssClass="k-grid td" /> <asp:BoundField DataField="page_description" HeaderText="Page Description" ItemStyle-Width="30" HeaderStyle-CssClass="k-grid td" /> <asp:BoundField DataField="meta_title" HeaderText="Meta Title" ItemStyle-Width="30" HeaderStyle-CssClass="k-grid td" /> <asp:BoundField DataField="meta_keywords" HeaderText="Meta Keywords" ItemStyle-Width="30" HeaderStyle-CssClass="k-grid td" /> <asp:BoundField DataField="meta_description" HeaderText="Meta Description" ItemStyle-Width="30" HeaderStyle-CssClass="k-grid td" /> <asp:BoundField DataField="Active" HeaderText="Active" ItemStyle-Width="30" HeaderStyle-CssClass="k-grid td" /> <asp:TemplateField HeaderText="Action" HeaderStyle-Width="15%" HeaderStyle-CssClass="k-grid td"> <ItemTemplate> <asp:ImageButton ID="btnDelete" AlternateText="Delete" ImageUrl="~/images/delete.png" runat="server" Width="15" Height="15" CommandName="Delete" CommandArgument='<%# Eval("Id") %>' CausesValidation="false" OnClientClick="return confirm('Are you sure you want to delete this record?')" /> </ItemTemplate> </asp:TemplateField> <asp:CommandField ButtonType="Image" ItemStyle-Width="15" EditImageUrl="~/images/edit.png" ShowEditButton="True" ControlStyle-Width="15" ControlStyle-Height="15" CancelImageUrl="~/images/close.png" UpdateImageUrl="~/images/update.png"> <ControlStyle Height="20px" Width="20px"></ControlStyle> </asp:CommandField> </Columns> </asp:GridView> 

Please help, it was from two days ago when I was stuck, but could not crack it.

Code for binding gridview: -

 private void BindGrid() { string strQuery = "select Id,page_title,page_description,meta_title,meta_keywords,meta_description,Active from tbl_Pages ORDER By Id DESC"; SqlCommand cmd = new SqlCommand(strQuery); DataTable dt = GetData(cmd); grdCSRPageData.DataSource = dt; grdCSRPageData.DataBind(); } 

Also see the Page_load method; -

 protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { BindGrid(); } } 

Answer 1

Here is a solution using ajax. When you select the checkbox and click the refresh button, the jquery code will look for the selected checkbox in the gridview, and when it finds it, values ​​will be assigned for the text fields that will pop up.

You also need to save the identifier in a hidden field, on the basis of which the update request will be executed, or you can use any field on which the update will take place.

Now, when you click the update button in the popup window, an ajax request will be sent, which will take the updated values ​​from the text fields and send them to the web method.

In the web method, you run your update request. And when ajax succeeds, you will empty the values ​​of the text fields in the popup and reload the page to see the changes in the gridview.

Html popup

 <div id="Popup"> <table> <tr> <td> Category </td> <td> <input type="text" id="Category" /> </td> </tr> <tr> <td> Items </td> <td> <input type="text" id="items" /> </td> </tr> <tr> <td> <input type="button" value="Update" onclick="Openselected()" /> </td> <td><input type="hidden" id="hdnID" /></td> </tr> </table> </div> 

It does not appear as a popup, but you can use any plugin to show it in a popup, such as blockui, fancybox jqueryui or whatever is available.

JQuery code

This function will assign the values ​​of the selected line in the text boxes and will open a pop-up window.

 function Openselected() { $('table[id$=grdTest] tr').each(function () { if ($(this).find('input[type=checkbox]').is(':checked')) { $('#Category').val($(this).children('td').eq('02').text()); $('#items').val($(this).children('td').eq('03').text()); $('#hdnID').val($(this).children('td').eq('01').text()); } }); } 

This function will send an ajax call with updated values ​​to the web method and delete the empty text fields of the popup and reload page to see the changes

 function UpdateGrid() { $.ajax({ type: "POST", contentType: "application/json; charset=utf-8", url: "Default.aspx/UpdateDB", data: JSON.stringify({ category:$('#Category').val() , items: $('#items').val(),id:$('#hdnID').val() }), dataType: "json", async: false, success: function (data) { $('#Category').val(""); $('#items').val(""); $('#hdnID').val(""); window.location.reload(true); }, error: function (err) { alert(err.responseText); } }); } 

Here is the web method

 [WebMethod] public static string UpdateDB(string category, string items,int id) { //Your logic of updating db.Here i am updating on basis of id you can use any feild of your choice return "success"; } 

This is for one line only as per your requirement.

Answer 2

You can try this using AjaxControlToolKit.

In your GridView put this event handler:

 OnRowCommand="grdCSRPageData_RowCommand" 

Put this after the GridView :

 <asp:UpdatePanel ID="upModal" runat="server" UpdateMode="Conditional"> <ContentTemplate> <asp:Panel ID="pnlModal" runat="server" BorderWidth="1" Style="display:none;"> <table> <tr> <td>page_title</td> <td><asp:TextBox ID="txtPageTitle" runat="server" /></td> </tr> <tr> <td>page_description</td> <td><asp:TextBox ID="txtPageDescription" runat="server" /></td> </tr> </table> <asp:Button ID="btnOK" runat="server" Text="OK" /> <asp:Button ID="btnCancel" runat="server" Text="Cancel" /> </asp:Panel> </ContentTemplate> </asp:UpdatePanel> <asp:Button ID="btnModal" runat="server" Style="display:none;"/> <ajaxToolkit:ModalPopupExtender ID="mpe" runat="server" PopupControlID="pnlModal" TargetControlID="btnModal" OkControlID="btnOK" CancelControlID="btnCancel" /> 

In the code behind:

 protected void grdCSRPageData_RowCommand(object sender, GridViewCommandEventArgs e) { if (e.CommandName == "Edit") { GridViewRow gvRow = grdCSRPageData.Rows[Convert.ToInt32(e.CommandArgument)]; txtPageTitle.Text = gvRow.Cells[0].Text; txtPageDescription.Text = gvRow.Cells[1].Text; upModal.Update(); mpe.Show(); } } protected void grdCSRPageData_RowEditing(object sender, GridViewEditEventArgs e) { grdCSRPageData.EditIndex = -1; BindGrid(); } 

I think you do not need to check which row you want to edit, you already have a CommandField in the GridView . You simply click on the edited image, and the modal popup is populated with data from the GridView (from the edited row).

Answer 3

Verify that the rows were selected from gridview in the RowDataBound method. You can check selected lines or, in your case, check marked lines in this method.

They have many links available here. You can use one. How to check if a row is selected from a GridView?

Answer 4

you can take a look at this, maybe you can use the modelpopupextender provided by ajaxcontroltoolkit

check out ASP.NET How to show AjaxControlToolkit Modal Popup from CheckBox

Answer 5

you can use the telerik grid, which automatically allows pasting and editing on the form.

 <MasterTableView EditMode="PopUp" CommandItemDisplay="Top"><CommandItemSettings ShowAddNewRecordButton="true" ShowRefreshButton="true" /> 

See Telerik demo http://demos.telerik.com/aspnet-ajax/grid/examples/overview/defaultcs.aspx