Populating Grid View rows from client side -without post back

Question

I have a Grid view control & a bootstrap modal pop-up. When the user adds values by clicking add button bootstrap modal opens, the user fills values in the field & saves data with the save button from modal to the SQL database and this part works perfectly, I want the user can see the added row immediately in the grid view as soon as the user saves data though the Bootstrap save button without in postback or serverside binding. By this SqlDataSource1 i am unable to see any row in the grid view , but server-side data binding works fine but user has to refresh the page which I do not want

 

Please help

 

Below is my Modal :

<button type="button" class="btn btn-primary btn-sm" data-target="#myModal">Add</button>
<div class="modal fade" tabindex="-1" role="dialog" id="myModal" >
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">User add</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label id="lblstartdate" for="StartDate" class="control-label">Start Date:</label>
<input id="StartDate" placeholder="Start Date" type="text" class="input-smalldp input-sm form-control clearable CMRStartDate" name="StartDate" />
</div>
<div class="form-group">
<label id="lblenddate" for="EndDate" class="control-label">End Date:</label>
<input id="EndDate" type="text" class="input-smalldp input-sm form-control clearable CMRENDDate" name="EndDate" />
</div>
div class="form-group">
<label id="lblDtype" for="ddlrole" class="control-label">Role:</label>
<select id="ddlrole" class=" form-control input-sm selectType country" name="ddlrole" multiple="multiple" size="7" >
</select>
div class="modal-footer">
<button type="button" class="btn btn-primary" name="save" onclick="SaveRecord();return false" >Save changes</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>

My Save script :

function SaveRecord() {
var startdate = document.getElementById('StartDate').value;
var enddate = document.getElementById('EndDate').value;
var role = countries.join(", ");
$.ajax({
type: "POST",
dataType: "json",
contentType: "application/json; charset=utf-8",
url: "MyPage.aspx/SaveDetails",
data: "{'StartDate':'" + startdate + "', 'EndDate':'" + enddate + "','Role':'" + role + "'}",
success: function (response) {
$("#gvDetails tbody").append("<tr><td>"+document.getElementById('StartDate').value+"</td><td>"+document.getElementById('EndDate').value+"</td><td>")
alert("Saved");
});
$('#myModal').modal('hide');
},
error: function () {
alert("fail")
});
},
complete: function () {
$('.modal-backdrop').remove();
}
});
}

AND the Grid view :

<asp:GridView id="gvDetails" runat="server" DataKeyNames="id" DataSourceID="SqlDataSource1">
<Columns>
<asp:BoundField DataField="FromDate" DataFormatString="{0:d}"
HeaderText="From Date" SortExpression="FromDate" />
<asp:BoundField DataField="ToDate" DataFormatString="{0:d}"
HeaderText="To Date" SortExpression="ToDate" />
<asp:BoundField DataField="Role" HeaderText="Role"
SortExpression="Role">
<ItemStyle HorizontalAlign="Center" />
</asp:BoundField>
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:MyDatabase%>" SelectCommand="SELECT ID, FromDate, ToDate, Role from [dbo].[NewUser] Where [IsActive]=1"
ORDER BY AddedDate"></asp:SqlDataSource>