Hi All,
With reference to below link i want to make same example in Bootstrap version 4.
I have tried to replace the version 3 css and js with version 4 but it collapse design.
https://www.aspforums.net/Threads/189289/Bootstrap-Datatable-plugin-with-aspnet-gridview-for-CRUD-operation-inside-updatepanelq/
Thanks in Advance.
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server" />
<div class="col-sm-offset-1 col-sm-10">
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false" class="table table-striped table-condensed"
ClientIDMode="Static">
<Columns>
<asp:TemplateField HeaderText="Select">
<ItemTemplate>
<asp:CheckBox ID="chkSelect" runat="server" AutoPostBack="true" OnCheckedChanged="chkSelect_CheckedChanged" />
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" />
</asp:TemplateField>
<asp:BoundField DataField="CustomerId" HeaderText="ID" />
<asp:BoundField DataField="Name" HeaderText="Name" />
<asp:BoundField DataField="Country" HeaderText="Country" />
<asp:TemplateField HeaderText="Action">
<ItemTemplate>
<asp:Button ID="btnEdit" Text="Edit" runat="server" OnClick="Edit" CssClass="btn btn-primary btn-xs" />
<asp:Button ID="btnDelete" Text="Delete" runat="server" CssClass="btn btn-danger btn-xs"
OnClick="Delete" OnClientClick="return confirm('Are you sure you want to delete?')" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<hr />
<table align="center" class="table table-condensed table-bordered">
<tr>
<td>Id</td>
<td>
<asp:Label ID="lblId" runat="server" CssClass="form-control" /></td>
</tr>
<tr>
<td>Name</td>
<td>
<asp:TextBox ID="txtName" runat="server" CssClass="form-control" /></td>
</tr>
<tr>
<td>Country</td>
<td>
<asp:TextBox ID="txtCountry" runat="server" CssClass="form-control" /></td>
</tr>
<tr>
<td colspan="2" align="center">
<asp:Button ID="btnSave" Text="Save" runat="server" OnClick="Save" CssClass="btn btn-success" />
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
<link type="text/css" rel="stylesheet" href="https://cdn.datatables.net/1.10.9/css/dataTables.bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://cdn.datatables.net/responsive/1.0.7/css/responsive.bootstrap.min.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/1.0.7/js/dataTables.responsive.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.9/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function () {
$('[id*=gvCustomers]').prepend($("<thead></thead>").append($(this).find("tr:first"))).DataTable({
"responsive": true,
"sPaginationType": "full_numbers",
"bPaginate": true,
"bSort": true,
"iDisplayLength": 4,
"stateSave": true,
"stateDuration": 60 * 1
});
});
//On UpdatePanel Refresh.
var prm = Sys.WebForms.PageRequestManager.getInstance();
if (prm != null) {
prm.add_endRequest(function (sender, e) {
if (sender._postBackSettings.panelsToUpdate != null) {
$('[id*=gvCustomers]').prepend($("<thead></thead>").append($('[id*=gvCustomers]').find("tr:first"))).DataTable({
"responsive": true,
"sPaginationType": "full_numbers",
"bPaginate": true,
"bSort": true,
"iDisplayLength": 4,
"stateSave": true,
"stateDuration": 60 * 1
});
}
});
};
</script>
</form>
</body>
