OnClick of Checkbox selecting row and Open the Row on Button Click with existing data

Question

I m stucked here very much and it is going some serious.

I have a Gridview which I am using to show the data from the backend. What I did is For inserting the data, I have made a button on top of the Gridview to add the data in the gridview.

Like this:-

<asp:Button ID="btnAdd" runat="server" CssClass="btn btn-prm" Text="Add" Width="75" CausesValidation="true" ValidationGroup="AddNew" OnClick="btnAdd_Click" />

The same is been done for Edit part also.

I have added a checkbox to select the row for the gridview.See my gridview code for better understanding,

<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"
                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="Action" 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>

Now what my requirement is. Whenever I check the checkbox for any row, and click on the Update button, the repsective Row should get open in a popup with the existing data as it is getting for adding the new Row. I tried but couldn't succeed. Please help me with this. Let me know if you need anything else.

Thanks.!

Answer 1

Here is a solution using ajax. When youclick on update button jquery code will look for checked checkbox in gridview. When it finds this will assign values to textboxes placed inside popup div from the row where checkbox is checked.

You have to store id in hidden field on the basis of which update query will run or you can use any field on which update will happen.

Now when you click on update button in popup an ajax call will be sent which will take updated values from textboxes and send to webmethod.

In webmethod you will run your update query.And when ajax executes successfully you will reload the page to see changes in gridview.

Html of 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>

This is not shown as popup but you can use any plugin to show it in popup like blockui,fancybox jqueryui dialog or any one available.

Jquery Code

This function will assign values of selected row in textboxes and open popup.

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 ajax call with updated values to webmethod and on success reload page to see 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 webmethod

[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 only for one row as per your requirement.

Answer 2

On the check box selection associate a modal pop up dialog box and populate the same data on any of the command names.