Kendo grid does not open up kendo window on button click

Saturday, May 3, 2014

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







http://ift.tt/1icUmQJ