Develop Reference

ASP.NET Using JQuery with nested, editable GridViews with expand/colapse features

One part of my application uses nested GridViews in order to display data. I have clients' orders, and each order consists of 1-or-more products. Now, in order to present data to the user, I used the order data GridView with a button in each row, which allows you to expand/collapse the child Gridview.
When designing this I followed the tutorial presented on this page:
https://www.aspsnippets.com/Articles/ASPNet-Nested-GridViews-GridView-inside-GridView-with-Expand-and-Collapse-feature.aspx
with some modifications, since my situation is a little bit different (E.g. I don't use a database since data is imported from the external API).
However, the problem is that in the original code the child GridView data is only displayed, while in my solution it has some DropDownLists that allows user to edit the data:
<asp:GridView ID="MainTable" runat="server" OnDataBound="MainTable_DataBound" AutoGenerateColumns="false" OnRowCommand="MainTable_RowCommand" class="w3-table w3-centered">
<HeaderStyle CssClass="w3-blue" />
<Columns>
<asp:TemplateField>
<ItemTemplate>
<a class="w3-btn w3-blue button" id="plus">+</a>
<asp:Panel ID="pnlOrders" runat="server" Style="display: none">
<asp:GridView ID="ProductsTable" runat="server" OnRowDataBound="ProductsTable_RowDataBound" AutoGenerateColumns="false" class="w3-table w3-striped">
<Columns>
<asp:BoundField DataField="Name" HeaderText="Nazwa" />
<asp:BoundField DataField="Indexer" Visible="false" />
<asp:TemplateField HeaderText="Parametr 1">
<ItemTemplate>
<asp:DropDownList ID="DropDownList1" runat="server" class="w3-select w3-border"></asp:DropDownList>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Parametr 2">
<ItemTemplate>
<asp:DropDownList ID="DropDownList2" runat="server" class="w3-select w3-border"></asp:DropDownList>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Parametr 3">
<ItemTemplate>
<asp:DropDownList ID="DropDownList3" runat="server" class="w3-select w3-border"></asp:DropDownList>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Usuń">
<ItemTemplate>
<a class="w3-btn w3-blue verify">V</a>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</asp:Panel>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="ID" HeaderText="ID" />
<asp:BoundField DataField="Client" HeaderText="Klient" />
<asp:BoundField DataField="Phone" HeaderText="Telefon" />
<asp:BoundField DataField="Comment" HeaderText="Komentarz" />
<asp:TemplateField HeaderText="Zatwierdź">
<ItemTemplate>
<asp:Button class="w3-btn w3-blue" Text="Zatwierdź" runat="server" CommandName="Verify" CommandArgument="<%# Container.DataItemIndex %>" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Now, the JQuery used in the original code creates a copy of child GridView, which is removed when the user clicks the "-" button. Because of that, I can't access DropDownLists in the code and the changes made by user are not saved. I also found out that the buttons in the child GridView (class .verify) aren't working properly (This, however, might be my fault since I'm not really fluent in JQuery).
$(document).ready(function () {
$(".button").on("click", function () {
if ($(this).attr('id') == "plus") {
$(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>");
$(this).html("-");
$(this).attr('id', 'minus');
}
else {
$(this).html("+");
$(this).closest("tr").next().remove();
$(this).attr('id', 'plus');
}
});
$(".verify").on("click", function () {
$(this).closest("tr").css("background-color", "#ffffff");
});
});
So my question is - how to maintain the current look and page design of the application (opening child GridView outside of the cell), while still being able to access DropDownLists in the code behind? is it possible to do it with JQuery? If not, do you have any other ideas on how to resolve this?
[EDIT] Here are some pics of how it looks:

You can also use hide() instead of remove(). Like so:
$(this).html("+");
$(this).closest("tr").next().hide();
$(this).attr('id', 'plus');

Bind checkbox with Images and Dropdownlist in Grid view

I have a gridview which contains images (populated dynamically from database) and dropdownlist which contains two values. First column contains checkbox. I want to insert selected checkbox's images and dropdown values to a new table on button click. What may be the suitable way?
Here is the grid view:
<asp:GridView ID="gvDetails" runat="server" AutoGenerateColumns="false" AllowPaging="true"
EmptyDataText="No images found" OnPageIndexChanging="gvDetails_PageIndexChanging" PageSize="5">
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="true" OnCheckedChanged="CheckUncheckAll"/>
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID ="CheckBox2" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Image">
<ItemTemplate>
<asp:Image ID="imgPreview" ImageUrl='<%#
"ImageHandler.ashx?imgID="+ Eval("ID") %>' runat="server"
Height="80px" Width="80px" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Dropdown" ItemStyle-Width="50px">
<ItemTemplate>
<asp:DropDownList ID="dpdListEstatus" runat="server" OnSelectedIndexChanged="dpdListEstatus_SelectedIndexChanged" AutoPostBack="true">
<asp:ListItem>A</asp:ListItem>
<asp:ListItem>B</asp:ListItem>
</asp:DropDownList>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />

Loop with gridview rows
Find for the checkbox control
Check if its Checked property is true
If yes, call insert statement
Set the values you want to get from image and dropdownlist. Of course you need to use findcontrol on it too.
Dim cbSelect As CheckBox, imgToInsert As Image, ddlStatus As DropDownList
For Each r As GridViewRow In gvDetails.Rows
cbSelect = r.Cells(0).FindControl("CheckBox2")
If cbSelect.Checked Then
imgToInsert = r.Cells(1).FindControl("imgPreview")
ddlStatus = r.Cells(2).FindControl("dpdListEstatus")
'Insert statement goes here...
End If
Next r

How to add EditForm for editing row

How can I add edit form row in Asp.NET GridView control like this RadGrid!
When I click on the Edit button, I want to add an edit form row under the edit button row.
Here my Grid
<asp:GridView ID="gvEG" runat="server" AutoGenerateColumns="False">
<Columns>
<asp:TemplateField>
<EditItemTemplate>
<asp:DropDownList runat="server" ID="ddlPersonnel" />
</EditItemTemplate>
<ItemTemplate>
//..
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<EditItemTemplate>
//..
</EditItemTemplate>
<ItemTemplate>
//..
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<EditItemTemplate>
<asp:LinkButton ID="lnkUpdate" runat="server" CommandName="Update" />
<asp:LinkButton ID="lnkCancel" runat="server" CommandName="Cancel" />
</EditItemTemplate>
<ItemTemplate>
<asp:LinkButton ID="lnkEdit" runat="server" CommandName="Edit" />
<asp:LinkButton ID="lnkDel" runat="server" CommandName="Delete" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
<EditRowStyle></EditRowStyle>
</asp:GridView>

In your GridView attributes add AutoGenerateEditButton and a custom event handler for OnRowEditing like this:
<asp:GridView ID="gvEG" runat="server" AutoGenerateColumns="False" AutoGenerateEditButton="True" OnRowEditing="gvEG_RowEditing">
Then in your code-behind make a new event handler method called "gvEG_RowEditing". Have your method add a panel under the row that is being edited. Add the necessary fields to the panel as well as an update button. Create a click event handler for the update button and have it save all the fields to the database and then rebind the GridView.

How To change Command Text and ImageButton of ItemTemplate in TemplateField

I have a column that has an ImageButton. my database field has bit data type. I want when my record has true value in that column show True.jpg and my command become MakeFalse and when it has false value show False.jpg and my command become MakeTrue. How I can do this?Is it possible to do it with one TemplateField?
thanks

You could include two ImageButtons in a TemplateField and evaluate Visible from your bit_field
<asp:TemplateField HeaderText="YourField">
<ItemTemplate>
<asp:ImageButton runat="server" ImageUrl="True.jpg" Visible='<%# (bool)Eval("bit_field") %>' />
<asp:ImageButton runat="server" ImageUrl="False.jpg" Visible='<%# !(bool)Eval("bit_field") %>' />
</ItemTemplate>
</asp:TemplateField>
I'm not sure how you'd want your Command to tie in.

This is the remaining part of the above Brissles code
<asp:TemplateField ShowHeader="False">
<ItemTemplate>
<asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False"
CommandName="Select" Text='<%#(bool)Eval("bit_field")? "Make False":"Make True" %>'>
</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>

Conformation window on delete in gridview?

how to make a conformation on boundfield in gridview in delete ....event

As far as I understand you want to add confirmation on deleting in your grid, correct?
Here is a simple example of grid:
<asp:GridView runat="server"
<Columns>
<asp:TemplateField ShowHeader="False">
<ItemTemplate>
<asp:LinkButton runat="server"
CommandName="Delete"
OnClientClick='return confirm("Are you sure?");'
Text="Delete" />
</ItemTemplate>
</asp:TemplateField>
<!-- your bound fields here -->
</Columns>
</asp:GridView>
The trick is in adding client-side confirm to the OnClientClick property of the delete button.

Can you do something like this?
<asp:linkbutton id="btnDelete" runat="server" commandname="Delete" onclientclick="return confirm('Are you sure you want to delete this item?');"
text="Delete" />