Kendo grid does not open up kendo window on button click

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

I have resolved my first issue, thanks to the post, stackoverflow.com/questions/19837694/…. Please help me with the second issue — stack underflow
on clise button you want to refresh you grid then read this, stackoverflow.com/questions/18399805/… — Jaimin
Still causes entire page reload. Is there somethng i need to do on the parent page where I have written @Html.Partial("...")? — stack underflow

Jaimin Jaimin · Accepted Answer · 2014-05-05T11:13:17

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>

Kendo grid does not open up kendo window on button click

2 Answers