Kendo grid does not open up kendo window on button click - asp.net-mvc

Question

I am working on an MVC 4 application and I have used a Kendo UI grid on my view. This view has a command column which displays button. On click of this button, I should display a kendo window (popup) which displays a partial view.On clicking 'Close' button on this window, I should once again return back to the grid and the grid should refresh.
Now I have 2 issues with this,
Once I click the button on grid, it displays the window only
once.i.e. if it close the window and again try to click the button on
grid, none of the button responds!
After I click the close button on the window, though the window
closes, but the grid dows not refresh. Instead the entire page
refreshes.
I have used the below code,
#(Html.Kendo()
.Grid(Model)
.Name("DefectGrid")
.Columns(columns =>
{
columns.Bound(d => d.DefectId).Title("ID").Width("5%");
columns.Bound(d => d.Title).Title("Title").Width("20%");
columns.Bound(d => d.Severity).Title("Severity").Width("10%");
columns.Bound(d => d.Status).Title("Status").Width("10%");
columns.Bound(d => d.Description).Title("Description").Width("20%");
columns.Bound(d => d.LoggedBy).Title("LoggedBy").Width("10%");
columns.Bound(d => d.LoggedOn).Title("LoggedOn").Width("10%");
columns.Command(command => command.Custom("ViewDetails").Click("showDetails"));
})
.Pageable()
.Sortable()
.Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple))
.Scrollable(scr => scr.Height(200))
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("LoadDefects", "Home").Data("refreshGrid").Type(HttpVerbs.Get))
.PageSize(20)
.ServerOperation(false)))
#(Html.Kendo()
.Window()
.Name("Details")
.Title("Defect Details")
.Visible(false)
.Modal(true)
.Draggable(true)
.Width(1000)
.Height(600)
.Events(ev => ev.Close("onClose"))
)
<script type="text/x-kendo-template" id="template">
<div id="defectDetails">
</div>
</script>
function showDetails(e) {
// e.preventDefault();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
var wnd = $("#Details").data("kendoWindow");
var defId = dataItem.DefectId;
var actionURL = '#Url.Action("DefectDetail", "Home")';
wnd.refresh({
url: actionURL,
data: { defectId: defId }
});
wnd.center();
wnd.open();
}
function onClose(e) {
if (!confirm("Are you sure you want to close window?"))
e.preventDefault();
}
Can anyone suggest where I am going wrong and how can I fix the issue!!!
Thanks in advance

Answer 1

Try like this, add script tag and it's working fine.
<script type="text/javascript">
function showDetails(e) {
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
var wnd = $("#Details").data("kendoWindow");
var defId = dataItem.DefectId;
var actionURL = '#Url.Action("DefectDetail", "Home")';
wnd.refresh({
url: actionURL,
data: { defectId: defId }
});
wnd.center();
wnd.open();
}
</script>

Answer 2

You may refresh the grid by calling dataSource.read() on the grid element
probably you may do in the onClose() event of the window,
$("#DefectGrid").data("kendoGrid").dataSource.read();