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');

How to bind gridview in a textbox and How calculate the total value in asp.net

I am currently working on a project for shopping cart. My program will display a grid view after I have retrieved from the database.
I hit an error when I want to retrieve from Quantity with a text box and a total value of the price.
I tried to use eval but there is an error stating the server tag is not well formed.
Anyone can help me ?
Thanks in advanced.
<asp:GridView ID="gv_Cart" runat="server" EmptyDataText="There is nothing in your shopping cart." CssClass="table table-striped table-bordered" ShowFooter="True" GridLines="Vertical" CellPadding="4" AutoGenerateColumns="False" >
<Columns>
<asp:BoundField HeaderText="ID" DataField="productID" />
<asp:BoundField HeaderText="Name" DataField="productName" />
<asp:BoundField HeaderText="Model" DataField="Model" />
<asp:BoundField HeaderText="Price (each)" DataFormatString="{0:c}" DataField="Price"/>
<asp:TemplateField HeaderText="Quantity">
<ItemTemplate>
<asp:TextBox ID="PurchaseQuantity" Width="40" runat="server" Text="<%# Eval("Quantity") %>"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Item Total">
<ItemTemplate>
<% String.Format("{0:c}", ((Convert.ToInt16(<%# Eval("Quantity") %>) * Convert.ToInt16(<%# Eval("price") %>) )) %>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Remove Item">
<ItemTemplate>
<asp:CheckBox id="Remove" runat="server"></asp:CheckBox>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Here the code behind:
protected void Page_Load(object sender, EventArgs e)
{
string a = Session["customer_Username"].ToString();
List<cart> allCart = new List<cart>();
allCart = cBLL.getUsername(a);
gv_Cart.DataSource = allCart;
gv_Cart.DataBind();
}

I'm not 100% sure where you are saying the error is.. but this looks wrong..
<asp:TemplateField HeaderText="Item Total">
<ItemTemplate>
<% String.Format("{0:c}", ((Convert.ToInt16(<%# Eval("Quantity") %>) * Convert.ToInt16(<%# Eval("price") %>) )) %>
</ItemTemplate>
</asp:TemplateField>
Should be something like this I would imagine..
<asp:TemplateField HeaderText="Item Total">
<ItemTemplate>
<asp:Label id="lblOne" runant="server" text="<% String.Format("{0:c}", ((Convert.ToInt16(<%# Eval("Quantity") %>) * Convert.ToInt16(<%# Eval("price") %>) )) %>"></asp:Label>
</ItemTemplate>
</asp:TemplateField>

Try below code
<asp:TemplateField HeaderText="Item Total">
<ItemTemplate>
<%# String.Format("{0:c}", Convert.ToInt16(Eval("Quantity")) * Convert.ToInt16(Eval("price")) %>
</ItemTemplate>
</asp:TemplateField>

Tag was indeed not well formed. Here is a better version:
<%# String.Format("{0:c}", Convert.ToInt16(Eval("Quantity")) * Convert.ToInt16(Eval("price")) %>
Note that it uses just section of <% %>, there is no inner server tags here. These tags are not supposed to be nested.
Update. As for the Quantity field you just need to correct your quotes. Use single quotes for attribute value and double quotes for Eval:
Text='<%# Eval("Quantity") %>'

Bind only value from KeyValuePair to GridView

In ASPX File
<asp:GridView ID="gvSavedAddresses" runat="server">
<Columns>
<asp:TemplateField SortExpression="AddressType" ItemStyle-Width="9%" HeaderText="Type"
HeaderStyle-ForeColor="Black">
<ItemTemplate>
<asp:Label runat="server" ID="lblAddressType" Text='<%#Eval("AddressType")%>'>
</asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
In CS File
objAddr.AddressType = new KeyValuePair<string, string>(dr["AddressTypeLookupID"].ToString(), dr["AddressType"].ToString());
I want to display only Value in the grid. But in my code it is showing both key and value in grid cell. how to avoid this?

Cast the field to its actual type, and retrieve Value:
<%# ((KeyValuePair<string, string>)Eval("AddressType")).Value %>

How can I compare column data with a String in GridView

I need to hide content of a column based on comparing its data with a string. I like to do it in Page itself (Page does not have code behind)
For some reason I cannot use Eval or Bind to retrieve data for column. I'm looking for something like,
<asp:GridView ID="GridView1" runat="server" >
<Columns>
<asp:TemplateField>
<%
if ([data from row] == aVarContainingDataToCompare){
Response.Write("Hidden");
} else {
Response.Write([data from row]);
}
%>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate><%# Eval("AnotherData") %></ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Can I do this without using code behind

Is it alright to use following instead? Please note the # sign at the start
<asp:GridView ID="GridView1" runat="server">
<Columns>
<asp:TemplateField>
<%# (Eval("TheColumn").ToString() == aVarContainingDataToCompare ? "Hidden": Eval("TheColumn")) %>
</asp:TemplateField>
...
</Columns>
</asp:GridView>

How to make a hyperlink through GridView column value?

I want here that user can see the answer under the question by selecting its heading. The question should be a hyperlink to redirect me on the page Answer.aspx. I mean to say that when user take cursor over the How to do this? it should redirect the user to the desired page. How can I do that?
here is the code
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
DataSourceID="SqlDataSource1" Width="100%" BorderStyle="None">
<Columns>
<asp:BoundField DataField="QuestionHEAD" HeaderText="Question"
SortExpression="QuestionHEAD" HeaderStyle-ForeColor="white" HeaderStyle-BackColor="Brown"/>
<asp:BoundField DataField="Problem" HeaderText="Problem"
SortExpression="Problem" HeaderStyle-ForeColor="white" HeaderStyle-BackColor="Brown" />
<asp:BoundField DataField="Forum" HeaderText="Forum" SortExpression="Forum" HeaderStyle-ForeColor="white" HeaderStyle-BackColor="Brown"/>
<asp:BoundField DataField="Username" HeaderText="Asked By"
SortExpression="Username" HeaderStyle-ForeColor="white" HeaderStyle-BackColor="Brown" />
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:connectionstring %>"
SelectCommand="SELECT [QuestionHEAD], [Problem], [Forum], [Username] FROM [Question]">
</asp:SqlDataSource>

You can use a HyperLinkField for this:
<asp:HyperLinkField DataNavigateUrlFormatString="/somepage.aspx?a={0}&b={1}" DataNavigateUrlFields="Column1, Column2" />

Try something like this
Eval("id") should be the question id and Eval("Question") should be the question field in your database
<asp:TemplateField HeaderText="Question" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<%#Eval("Question")%>
</ItemTemplate>
</asp:TemplateField>