Grid Popup edit with cutom template close event

[Derek]

Hi

I have a popup edit template and when I close it I want to refresh the grid.

I used the instructions from here http://www.telerik.com/forums/pop-up-editor-events but there is no Edit event. It doesnt find such an event so I used Deactive. I tried almost all events and none of them will fire my javascript function. Even after I get it to fire I wouldnt know what to use to make the grid to refresh.

Can you please help me what should I use to refresh the grid on popup close. I need to do something like rebind because I need to refresh result from another table and maybe run another javascript function to repaint the rows.

Here is my code:

@using PartnerLink.Models
@using Telerik.OpenAccess.SPI
@model Tuple<TBL_ASSIGNMENT, IQueryable<TBL_ASSIGNMENT_EXPENDITURE_VALUE>, IQueryable<TBL_ASSIGNMENT_INCOME_VALUE>, IQueryable<TBL_ASSIGNMENT_VEHICLE>>

<div style="height:500px">
    @(Html.Kendo().Grid<AssignmentDocTypesExt>()
        .Name("gridCaseDocuments")
        .Columns(columns =>
        {
            columns.Bound(p => p.ASSIGNMENT_DOCUMENT_TYPE_ID).Hidden(true);
            columns.Bound(p => p.ASSIGNMENT_ID).Hidden(true);
            columns.Bound(p => p.DOCUMENT_TYPE_ID).Hidden(true);
            columns.Bound(p => p.WHICH_APPLICANT).Hidden(true);
            columns.Bound(p => p.DOCUMENT_TYPE_STATUS_ID).Hidden(true);
            columns.Bound(p => p.CREDITOR_ID).Hidden(true);
            columns.Bound(p => p.numOfUploadedFiles).Title("Files").Width(60);
            columns.Bound(p => p.documentDescription).Title("Document").Width(350);
            columns.Bound(p => p.whichApplicant).Title("Applicant").Width(100);
            columns.Bound(p => p.documentTypeStatusDescription).Title("Type Status").Width(200);
            columns.Bound(p => p.COMPLETE_FLAG).Title("Complete").ClientTemplate("<input type='checkbox' #= COMPLETE_FLAG ? checked='checked' :'' # disabled />").Width(90);
            columns.Bound(p => p.autoCompleteOnUpload).Title("Auto Complete").ClientTemplate("<input type='checkbox' #= autoCompleteOnUpload ? checked='checked' :'' # disabled />").Hidden(true);
            columns.Command(command => { command.Edit().Text("Upload"); }).Width(230);
        })
        .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("ClientDocumentUpload").Window(w => w.Events(e => e.Deactivate("onCloseClientDocumentUpload"))))
        .Sortable()
        .Scrollable()
        .ClientDetailTemplateId("gridCaseDocumentsDetails")
        .Pageable(pager => pager.Refresh(true))
        .Resizable(resize => resize.Columns(true))
        .HtmlAttributes(new { style = "height:500px;" })
        .Events(clientEvents => clientEvents.DataBound("onRowDataBoundgridCaseDocuments"))
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(20)
            .Events(events => events.Error("error_handlerCaseDocuments"))
            .Model(model => model.Id(p => p.ASSIGNMENT_DOCUMENT_TYPE_ID))
            .Read(read => read.Action("CaseDocuments_Read", "Home", new { id = Model.Item1.ASSIGNMENT_ID }))
            .Update(update => update.Action("CaseDocuments_Update", "Home"))
            )

    )
</div>

<script id="gridCaseDocumentsDetails" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<ClientDocumentsExt>()
            .Name("gridCaseDocuments_#=ASSIGNMENT_DOCUMENT_TYPE_ID#")
            .Columns(columns =>
            {
                columns.Bound(m => m.ASSIGNMENT_DOCUMENT_ID).Hidden(true);
                columns.Bound(m => m.FILE_NAME).Title("File Name");
                columns.Bound(m => m.uploadedBy).Title("Uploaded By").Width(210);
                columns.Bound(m => m.DATE_CREATED).Title("Upload Date").Format("{0:dd/MM/yyyy}").Width(110);
                columns.Template(@<text></text>).ClientTemplate("<a class='k-button' href='" +
                                                                        Url.Action("ClientDocs_Download", "Home") +
                                                                        "/\\#= ASSIGNMENT_DOCUMENT_ID \\#'" +
                                                                    ">Download</a>").Width(110);
                columns.Command(c => c.Destroy().Text("Delete")).Width(110);
            })
                    .DataSource(dataSource => dataSource
                        .Ajax()
                        .PageSize(5)
                        .Model(model => model.Id(m => m.ASSIGNMENT_DOCUMENT_ID))
                        .Read(read => read.Action("gridCaseDocumentsDetails_Read", "Home", new { id = "#=ASSIGNMENT_DOCUMENT_TYPE_ID#" }))
                        .Destroy(delete => delete.Action("gridCaseDocumentsDetails_Destroy", "Home"))

                    )
                    .Pageable(pager => pager.Refresh(true))
                    .Sortable()
                    .Scrollable()
                    .ToClientTemplate()
    )
</script>

<script type="text/javascript">
    function error_handlerCaseDocuments(e) {
        if (e.errors) {
            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n";
                    });
                }
            });
            alert(message);
        }
    }

    $("#gridCaseDocuments").find(".k-grid-content").height(421);

    function onRowDataBoundgridCaseDocuments(e) {

        var grid = $("#gridCaseDocuments").data("kendoGrid");
        var gridData = grid.dataSource.view();

        for (var i = 0; i < gridData.length; i++) {
            var currentUid = gridData[i].uid;
            if (gridData[i].COMPLETE_FLAG) {
                var currenRow = grid.table.find("tr[data-uid='" + currentUid + "']");
                $(currenRow).css("background-color", "#40FF00");
            } else if (gridData[i].numOfUploadedFiles > 0) {
                var currenRow = grid.table.find("tr[data-uid='" + currentUid + "']");
                $(currenRow).css("background-color", "rgb(255,191,0)");
            }
        }
    }
    function onCloseClientDocumentUpload()
    {
        alert("onCloseClientDocumentUpload");
    }
</script>

[Boyan Dimitrov]

Hello Derek,

The edit event is part of the Kendo Grid API, not the Window widget. The code below shows how to bind to the edit event: 

.Events(clientEvents => clientEvents.DataBound("onRowDataBoundgridCaseDocuments").Edit("edited"))

I would give the following guidelines: 

   1. In the Kendo Grid edit event to bind for the window deactivate event.  

function edited(e) {
        e.container.data().kendoWindow.bind("deactivate", function () { console.log(1); });
    }

   2. Instead of calling the console.log method you can access the Kendo Grid widget and call refresh method if refresh is needed. 

Please let us know if any further assistance is needed. 

Regards,
Boyan Dimitrov
Telerik