Databound Gridview and DataTables

eclarke

I have a gridview loaded from code behind and is formatting as a data table and looks awesome. I want to add a button or a link or an image so the user can view the details of that record. I cannot figure out how to do it correctly. I added a button and tested just hitting the button and the whole grid loses its formatting.

Initial view

I click the button and it just does a post back and this is what happens

The pagination disappears, search and formatting all gone. Seems I need to recall the formatting but I cannot figure that out.

kthorngren

I'm not clear on exactly what you are doing when clicking the button. However when the formatting is not finished or the Datatables features don't work there are Javascript errors stopping the Javascript script. Take a look at your browser's console for errors.

In order to help we will likely need to see the page so we can see the behavior and help debug. Please post a link to your page or a test case replicating the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

eclarke

Here is my aspx page

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
<script>
$(function () {
$('[id*=gvCustomers]').prepend($("<thead></thead>").append($(this).find("tr:first"))).DataTable({
responsive: true,
sPaginationType: "full_numbers",
stateSave: true,
});

        var prm = Sys.WebForms.PageRequestManager.getInstance();

        if (prm != null) {
            prm.add_endRequest(function (sender, e) {
                if (sender._postBackSettings.panelsToUpdae != null) {
                    $("#gvCustomers").DataTable();
                }
            });
        }

        //$(document).ready(function () {
        //    var table = $('#gvCustomers').DataTable();

        //    $('#gvCustomers tbody').on('click', 'tr', function () {
        //        $(this).toggleClass('selected');
        //    });
        //});
    });
</script>
<div class="row">
    &nbsp;
</div>
<div class="row">
    &nbsp;
</div>
<div class="row">
    <h3>Search Results</h3>
</div>
<asp:UpdatePanel runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="False" CssClass="table table-striped table-hover table-striped nowrap" Style="width: 100%" DataKeyNames="Account_Number" ShowHeaderWhenEmpty="True" OnRowDataBound="gvCustomers_RowDataBound" OnPreRender="gvCustomers_PreRender"
            Width="100%" Font-Size="Smaller">
            <Columns>
                <%--<asp:TemplateField ItemStyle-HorizontalAlign="Center">
                    <ItemTemplate>
                        <asp:CheckBox ID="chkBoxEdit" runat="server" />
                    </ItemTemplate>
                </asp:TemplateField>--%>
                <asp:BoundField DataField="Account_Number" HeaderText="Acct. #" />
                <asp:BoundField DataField="Last_Name" HeaderText="Last" />
                <asp:BoundField DataField="First_Name" HeaderText="Name" />
                <asp:BoundField DataField="Spouse" HeaderText="Spouse" />
                <asp:BoundField DataField="City" HeaderText="City" />
                <asp:BoundField DataField="State" HeaderText="State" />
                <asp:BoundField DataField="LMG" HeaderText="LMG" />
                <asp:BoundField DataField="Main_Phone" HeaderText="Phone" />
                <asp:BoundField DataField="Mobile" HeaderText="Cell" />
                <asp:BoundField DataField="Retired" HeaderText="Retired" DataFormatString="{0:MM/dd/yyyy}" />
                <asp:TemplateField HeaderText="">
                    <ItemTemplate>
                        <asp:Button Text="View" runat="server" OnClick="btnView_Click" ID="btnView" CssClass="btn btn-primary btn-sm" />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    </ContentTemplate>
</asp:UpdatePanel>

</asp:Content>

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin