Dear Mudassar,
I try to make a combination of 2 of your articles
http://www.aspsnippets.com/Articles/Scrollable-GridView-with-Fixed-Headers-inside-ASPNet-UpdatePanel-using-jQuery-Plugin.aspx
http://www.aspsnippets.com/Articles/ASPNet-Nested-GridViews-GridView-inside-GridView-with-Expand-and-Collapse-feature.aspx
It works but the column header width's are not matching the data columns.
When i take out the nested gridview it works fine.
Due to the lack of experiance i get stuck.
Can you help me?
Here's my code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$("[src*=plus]").live("click", function () {
$(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>")
$(this).attr("src", "images/minus.png");
});
$("[src*=minus]").live("click", function () {
$(this).attr("src", "images/plus.png");
$(this).closest("tr").next().remove();
});
</script>
</head>
<body>
<form id="form1" runat="server">
Gebruiker: <asp:Label ID="lblUser" runat="server" Text="Patrick"></asp:Label>
<br />
<asp:TextBox ID="tbxAankomstdd" runat="server" Text="01-08-2014" Width="150px" ReadOnly="True"></asp:TextBox>
<rjs:PopCalendar ID="PopCalAankomst" runat="server" Control="tbxAankomstdd" Format="dd-mm-yyyy" />
<br />
<asp:TextBox ID="tbxVertrekdd" runat="server" Text="15-08-2014" Width="150px" ReadOnly="True"></asp:TextBox>
<rjs:PopCalendar ID="PopCalendar1" runat="server" Control="tbxVertrekdd" Format="dd-mm-yyyy" />
<br />
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="up" runat="server">
<ContentTemplate>
<asp:GridView ID="gvGridview" runat="server"
AutoGenerateColumns="false"
DataKeyNames="OnderkomenId"
AllowSorting="True"
OnSorting="gvGridview_Sorting"
OnRowDataBound="gvGridview_OnRowDataBound">
<Columns>
<asp:TemplateField HeaderText="Details">
<ItemTemplate>
<img alt = "" style="cursor: pointer" src="images/plus.png" />
<asp:Panel ID="pnlBoekingen" runat="server" Style="display: none">
<asp:GridView ID="gvBoekingen" runat="server" AutoGenerateColumns="false" CssClass = "ChildGrid">
<Columns>
<asp:BoundField ItemStyle-Width="150px" DataField="Naam" HeaderText="Naam" />
<asp:BoundField ItemStyle-Width="150px" DataField="AankomstDatum" HeaderText="AankomstDatum" />
<asp:BoundField ItemStyle-Width="150px" DataField="VertrekDatum" HeaderText="VertrekDatum" />
</Columns>
</asp:GridView>
</asp:Panel>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="OnderkomenId" HeaderText="OnderkomenId" />
<asp:TemplateField HeaderText="AccommodatieId">
<ItemTemplate>
<asp:Label ID="lblAccommodatieId" runat="server" Text='<%# Bind("AccommodatieId") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Accommodatie" HeaderText="Accommodatie" SortExpression="Accommodatie">
<ItemStyle Width="250px"></ItemStyle>
</asp:BoundField>
<asp:TemplateField HeaderText="Laatste<br />Inlog" ItemStyle-Width="100px">
<ItemTemplate>
<asp:Label ID="lblInlog" runat="server" Text='<%# Bind("LaatsteInlog", "{0:dd-MM-yyyy}")%>' Width="100px"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Onderkomen" HeaderText="Onderkomen" ItemStyle-Width="250px">
<ItemStyle Width="250px"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="Onderkomen" HeaderText="Onderkomen" SortExpression="Onderkomen" ><ControlStyle Width="100px" /> </asp:BoundField>
<asp:TemplateField HeaderText="Laatste<br />Wijziging" ItemStyle-Width="100px">
<ItemTemplate>
<asp:Label ID="lblWijziging" runat="server" Text='<%# Bind("LaatsteWijziging", "{0:dd-MM-yyyy}")%>' Width="100px"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Gebruiker" HeaderText="Gebruiker" >
<ItemStyle Width="125px"></ItemStyle>
</asp:BoundField>
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
<script src="Scripts/ScrollableGridViewPlugin_ASP.NetAJAXmin.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#<%=gvGridview.ClientID %>').Scrollable({
ScrollHeight: 200,
IsInUpdatePanel: true
});
});
</script>
</form>
</body>
</html>
