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, http://stackoverflow.com/questions/19837694/kendo-ui-window-on-grid-button-click-does-not-open-second-time. Please help me with the second issue — stack underflow, May 04 '14 at 06:20
on clise button you want to refresh you grid then read this, http://stackoverflow.com/questions/18399805/reloading-refreshing-kendo-grid/18399994#18399994 — Jaimin, May 06 '14 at 05:42
Still causes entire page reload. Is there somethng i need to do on the parent page where I have written @Html.Partial("...")? — stack underflow, May 06 '14 at 15:40

score 1 · Answer 1 · answered May 05 '14 at 11:13

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>

score 0 · Answer 2 · answered May 05 '14 at 04:13

0

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();

answered May 05 '14 at 04:13

YS.Tan

511
3
6

I tried the above code but it still cause entire page refresh... My grid is present inside partial view. So when I click the button in the popup, basically it should refresh only the partail view and not the entire page (ajax sort of stuff!!!). Is there something I need to do to ajaxify the partial view? – stack underflow May 05 '14 at 18:19

Kendo grid does not open up kendo window on button click

2 Answers2