Custom button - call action and download a file

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

    Posted 22 May 2015 Link to this post

    Hi Guys,

    I have a custom button in a nested grid. I want when the user clicks the button to download a file  saved in my database and save it to the local disk.

    Whats the best approach? And could you provide a sample of how to call the controller action for download, how to pass ASSIGNMENT_DOCUMENT_ID, and after returning the file from the controller to ask the user where to save it? Not sure how to do post and get or do I need to do a get with the custom button..

    Here is my nested grid:

    @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).Hidden(true);
                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.Close("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.Command(c => c.Custom("Download").Click("onClickDownloadClientDoc")).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#" }))
     
                )
                .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 onClickDownloadClientDoc(e)
        {
            alert(e.ASSIGNMENT_DOCUMENT_ID);
        }
     
        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", "rgb(164,198,57)");
                } 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. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2311 posts

    Posted 22 May 2015 Link to this post

    Hello Derek,

    In this case you could directly use a template with a link to the action returning the file.
    E.g.

    columns.Template(@<text></text>).ClientTemplate(
        "<a class='k-button' href='" +
            Url.Action("Download", "Document") +
            "/#= ASSIGNMENT_DOCUMENT_ID #'" +
        ">Download</a>"
    );

    The document id is appended to the URL action and the k-button CSS class is used to style it as a Kendo UI command button. I hope this information helps.

    Regards,
    Dimiter Madjarov
    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
  3. Derek
    Derek avatar
    104 posts
    Member since:
    Aug 2008

    Posted 22 May 2015 in reply to Dimiter Madjarov Link to this post

    Hi,

    Thank you for the reply.

    I tried to use the sample code but I get a js error Uncaught ReferenceError: ASSIGNMENT_DOCUMENT_ID is not defined

    The error is thrown when I try to expand the nested grid.

    Here is the 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).Hidden(true);
                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.Close("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>");
                })
                        .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#" }))
     
                        )
                        .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", "rgb(164,198,57)");
                } else if (gridData[i].numOfUploadedFiles > 0)
                {
                    var currenRow = grid.table.find("tr[data-uid='" + currentUid + "']");
                    $(currenRow).css("background-color", "rgb(255,191,0)");
                }
            }
        }
    </script>

  4. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2311 posts

    Posted 22 May 2015 Link to this post

    Hello Derek,

    I missed the fact the template is used inside a detail Grid. In this case the # symbols which are part of the Kendo UI template syntax should be escaped. Here is the updated example.
    E.g.

    columns.Template(@<text></text>).ClientTemplate(
        "<a class='k-button' href='" +
            Url.Action("Download", "Document") +
            "/\\#= ASSIGNMENT_DOCUMENT_ID \\#'" +
        ">Download</a>"
    );

    Regards,
    Dimiter Madjarov
    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
  5. Derek
    Derek avatar
    104 posts
    Member since:
    Aug 2008

    Posted 22 May 2015 in reply to Dimiter Madjarov Link to this post

    nice!

    thank you!

Back to Top