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

Asp panel visible setting not changing

I'm trying to change the visible setting of a panel with a button click. I need the second panel become visible when the button at the bottom of first panel is clicked.
<asp:Content ID="Content3" ContentPlaceHolderID="cphContent" runat="Server">
<asp:Panel ID="pnl1" runat="server">
<asp:GridView ID="gv1" runat="server" AutoGenerateColumns="False" CellPadding="0"
AllowSorting="True" CssClass="grid" Visible="true">
<Columns>
//gv1 columns here
</Columns>
</asp:GridView>
<asp:Button ID="btnModAdd" class="btn btn-primary" runat="server" Text="Ekle" OnClick="btnModAdd_Click">
</asp:Button>
<br />
<div class="dataTables_paginate" id="example_info">
<uc1:PagingControl ID="pcBottom" runat="server" PagingPosition="Top" />
</div>
</asp:Panel>
<br />
<asp:Panel ID="pnl2" runat="server" Visible="false">
<asp:GridView ID="gv2" runat="server" AutoGenerateColumns="False" CellPadding="0"
AllowSorting="True" CssClass="grid" Visible="true">
<Columns>
//gv2 columns here..
</Columns>
</asp:GridView>
</asp:Panel>
And this is C# code of the button, quite simple.
public void btnModAdd_Click(object sender, EventArgs e)
{
pnl2.Visible = true;
}
I can't understand what I'm missing to see here...
EDIT: Ok I noticed I missed to add the bind method to pageload. Noob mistake on my part but well, still learning :)

ASP.NET C# datagridview paging inside second tab when click next goes to the first tab

When I tried clicking the page 2 or any page of the DataGridView inside the second tab, it will go to the first tab which includes some of my textboxes. What I would like to have is every time I clicked the next page of the DataGridView, it will show the second tab which includes the second page and not the first tab.
Can someone please help me with this?
Below are my codes:
page.aspx
<div id="tabs-2">
<asp:GridView ID="GridView1" runat="server" AllowPaging="true" PageSize="10" class="table table-striped table-bordered dataTable table-hover table-responsive"
OnPageIndexChanging = "OnPaging" DataKeyNames="Employee No.">
<RowStyle CssClass="rowStyle" />
<HeaderStyle CssClass="headerStyle" />
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox ID="chkDelete" runat="server" onclick="Check_Click(this)" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
<FooterStyle CssClass="footerStyle" />
</asp:GridView>
Previous Tab
<br />
<br />
<asp:HiddenField ID="hfCount" runat="server" Value = "0" />
<asp:Button ID="btnDelete" runat="server" CssClass="btn btn-warning" Text="Delete"
OnClientClick="return ConfirmDelete();" OnClick="btnDelete_Click" />
</div>
page.aspx.cs
protected void OnPaging(object sender, GridViewPageEventArgs e)
{
GridView1.PageIndex = e.NewPageIndex;
GridView1.DataBind();
SetData();
}

Seems currently selected tab page resets during the page post back. This can be done pretty easily if you are using jQuery.
You might need to store the selected tab page on tab page changed event (maybe within a hidden field) and restore the selected tab on the pageload method.

Ajax ModalPopupExtender is not firing

I am having an issue getting the popup to appear at all. Once I can get the popup to show at all, I can troubleshoot from there. Basically, I have a gridview and I want a detailsview to appear in a popup when I select a link. This is all being done using an objectdatasource.
Note:The grid and the detailsview work just fine if I don't try to use a modalpopupextender.
My question is whether anyone can tell me what I am doing wrong in my code, or offer a better solution for implementing the ajax modalpopupextender.
~This is a shortened version of my markup~
<asp:Content ID="Content2" ContentPlaceHolderID="MasterContentPlaceHolder" Runat="Server">
<asp:ScriptManager ID="script1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="updatePanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false"
DataSourceID="ObjectDataSource1" AllowSorting="True"
CssClass="grid" CaptionAlign="Left" DataKeyNames="APP,ENV" OnSelectedIndexChanged="GridView1_SelectedIndexChanged"
>
<Columns>
<asp:TemplateField ShowHeader="False" Visible = "false">
<ItemTemplate>
<asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False"
CommandName="Select" Text="Select" Visible ="false"></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="APP" SortExpression="APP">
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server" Visible = "false" Text='<%# Bind("APP") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:LinkButton ID="Label1" runat="server" CausesValidation ="false" CommandName="Select" Text='<%# Bind("APP") %>'></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="ENV" HeaderText="ENV"
SortExpression="ENV" />
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Panel ID="pnlPopup" runat="server" Width= "700px" style="display:none;">
<asp:UpdatePanel ID="detailspanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button ID="btnShowPopup" runat="server" style="display:none" />
<ajaxToolkit:ModalPopupExtender ID="mdlPopup" runat="server"
TargetControlID="btnShowPopup" PopupControlID="pnlPopup"
/>
<asp:DetailsView ID="DetailsView1" runat="server" AutoGenerateRows="False"
DataSourceID="ObjectDataSource2" CssClass="detail"
>
<Fields>
<asp:BoundField DataField="APP" HeaderText="APP"
SortExpression="APP" />
<asp:BoundField DataField="ENV" HeaderText="ENV"
SortExpression="ENV" />
<asp:TemplateField ShowHeader="False">
<EditItemTemplate>
<asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="True"
CommandName="Update" Text="Update"></asp:LinkButton>
<asp:LinkButton ID="LinkButton2" runat="server" CausesValidation="False"
CommandName="Cancel" Text="Cancel"></asp:LinkButton>
</EditItemTemplate>
<ItemTemplate>
<asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False"
CommandName="Select" Text="Edit"></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Fields>
</asp:DetailsView>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
<asp:ObjectDataSource ID="ObjectDataSource2" runat="server"
SelectMethod="GetApplication"
TypeName="Applications.BusinessServices.AppService"
DataObjectTypeName="Applications.Entities.Application"
UpdateMethod="Update">
<SelectParameters>
<asp:ControlParameter ControlID="GridView1" Name="APP"
PropertyName="SelectedDataKey[0]" Type="String" DefaultValue="Null" />
<asp:ControlParameter ControlID="GridView1" Name="ENV"
PropertyName="SelectedDataKey[1]" Type="String" DefaultValue=" Null" />
</SelectParameters>
</asp:ObjectDataSource>
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server"
SelectMethod="GetAllApplication"
TypeName="Applications.BusinessServices.AppAvailService" SortParameterName="sortColumn">
</asp:ObjectDataSource>
</asp:Content>
To sum it up, when the linkbutton label1 is clicked, the modalpopup should appear and show the detailsview.
~This is my codebehind~
protected void Page_Load(object sender, EventArgs e)
{
if (GridView1.SelectedIndex == -1)
{
GridView1.EnablePersistedSelection = true;
}
}
protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)
{
this.DetailsView1.Visible = true;
this.DetailsView1.DataBind();
this.detailspanel.Update();
this.mdlPopup.Show();
}
}
I have confirmed via debugging that that mdlPopup.Show() does execute when the link is clicked, and visual studio does not register any errors. It is simply that nothing happens.
Also, Btnshowpopup is just a fake button. The popup should still show if I call mdlpopup.show(); from codebehind. Even if set the panel and btnshowpopupp to visible and then click the button, nothing still happens.
Any help would be appreciated. Thanks.

I've resolved my issue. I figured that I would share it for anyone that has a similar issue.
I've seen 12 examples on various sites that show this not to be an issue, but I took the modalpopupextender outside of the updatepanel and the issue was resolved. So at least for me, the modalpopupextender has to be outside of the updatepanel in order for it to fire.

BackgroundCssClass not being applied with ModalpopupExtender

I am trying to create this webpage that shows a database with a "Master-Detail" type view. To do this I am following this tutorial http://mattberseth.com/blog/2008/04/masterdetail_with_the_gridview.html.
The only difference is that I am not using ObjectDataSource, instead I am just using my SQL - DataBase.
Here's the problem: When I click on the link to show the modalPopup, the BackgroundCssClass is not being applied, and the popup just shows up in the corner of the screen without changing the background and opacity. Anyone know whats going on?
Here's the code:
CSS
<style type="text/css">
TR.updated TD
{
background-color:yellow;
}
.modalBackground
{
background-color:Gray;
filter:alpha(opacity=70);
opacity:0.7;
}
</style>
Modalpopup part (right above this is the gridview that shows the "Master" section of the Database, this works fine so I didn't include it.
<asp:UpdatePanel ID="updPnlReservationDetail" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button id="btnShowPopup" runat="server" style="display:none" />
<ajaxToolKit:ModalPopupExtender ID="mdlPopup" runat="server"
TargetControlID="btnShowPopup" PopupControlID="pnlPopup"
CancelControlID="btnClose"
BackgroundCssClass="modalBackground" />
<asp:DetailsView ID="dvReservationDetail" runat="server" DataSourceID="mainTable" CssClass="detailgrid"
GridLines="None" DefaultMode="Edit" AutoGenerateRows="false" Visible="false" Width="100%">
<Fields>
<asp:BoundField HeaderText="LabName" DataField="labName" ReadOnly="true" />
<asp:TemplateField HeaderText="Email">
<EditItemTemplate>
<asp:TextBox ID="txtEmail" runat="server" Text="Hello" />
</EditItemTemplate>
</asp:TemplateField>
</Fields>
</asp:DetailsView>
<div class="footer">
<asp:LinkButton ID="btnSave" runat="server"
Text="Save" OnClick="BtnSave_Click" CausesValidation="true"
/>
<asp:LinkButton ID="btnClose" runat="server"
Text="Close" CausesValidation="false"
/>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>

maybe you are using <asp:ScriptManager runat="server" /> instead of <ajaxToolKit:ToolkitScriptManager runat="server" />
here's a little example of "normal" usage, just in case
<asp:Button ID="btnShow_ClientSide" runat="server"
Text="show client side" OnClientClick="return false" />
<asp:Button ID="btnShow_ServerSide" runat="server"
Text="show server side" OnClick="btnShow_ServerSide_Click" />
<ajaxToolKit:ModalPopupExtender ID="mdlPopup" runat="server"
TargetControlID="btnShow_ClientSide"
PopupControlID="pnlPopup" CancelControlID="btnHide_ClientSide"
BackgroundCssClass="modalBackground" />
<asp:Panel ID="pnlPopup" runat="server"
BackColor="White" BorderColor="Black">
<asp:Button ID="btnHide_ClientSide" runat="server"
Text="hide client side" OnClientClick="return false" />
<asp:Button ID="btnHide_ServerSide" runat="server"
Text="hide server side" OnClick="btnHide_ServerSide_Click" />
</asp:Panel>
and in the code behind
protected void btnShow_ServerSide_Click(object sender, EventArgs e)
{
mdlPopup.Show();
}
protected void btnHide_ServerSide_Click(object sender, EventArgs e)
{
mdlPopup.Hide();
}

I had a completely different cause of this problem, and here's the solution, which I found on this very helpful walk-through page.
BackgroundCssClass: The name of the CSS class which needs to be applied to the background of the popup. One thing to note here is that if you don’t provide a CSS class then the modal popup will not function like a modal dialog i.e. One will be able to interact with the controls in the back of the popup control, so its imperative to provide a valid CSS class name value to the BackgroundCssClass property. In the above e.g. we have defined a CSS class called “backgroundColor” in the header section of the aspx page. Please note in the CSS class definition we have applied “filter” property to make the background transparent.
I had made a typo in the .css file, which prevented reading the background style. As soon as the CSS was working, the popup became modal and had its proper background.