Grid Popup edit with cutom template close event

2 posts, 0 answers
  1. Derek
    Derek avatar
    104 posts
    Member since:
    Aug 2008

    Posted 23 May 2015 Link to this post

    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>

  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2062 posts

    Posted 26 May 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top