Kendo Grid with Kendo Upload

6 posts, 0 answers
  1. muthu
    muthu avatar
    5 posts
    Member since:
    Nov 2017

    Posted 27 Nov Link to this post

    i'm using upload within my grid. i can able to use the upload in my grid. and also i can attach the files to the upload but my only problem is i need to pass additional parameters to my "save" event which is in controller.  that parameters should be "in which line upload selected that line's column value"

    i attached my coding here.

    please guys help me to figure it out.

     

    Kendo Grid coding////////////*****////////

     @(Html.Kendo().Grid<EmployeeSelfService.Models.EvaluationViewModel>()
                                    .Name("DetailGrid")
                                    .Events(e => e.Save("onSave"))
                                    .Columns(columns =>
                                    {
                                        columns.Bound(p => p.RequestDtlNum).Title("Seq No").Width(110).Hidden(true);
                                        columns.Bound(p => p.RequestID).Hidden(true);
                                        columns.Bound(p => p.Company).Hidden(true);
                                        columns.Bound(p => p.CandidateID).Title("Candidate ID").Width(170);
                                        columns.Bound(p => p.CandidateName).Title("Name").Width(170);
                                        columns.Bound(p => p.ResumeStatus).Width(170).Title("Resume Status").EditorTemplateName("ResumeStatusTemplate");
                                        columns.Bound(p => p.InterviewDate).Format("{0:dd/MM/yyyy}").Width(180).Title("Interview Date").EditorTemplateName("DatePickerTemplate");
                                        columns.Bound(p => p.InterviewType).Width(180).Title("Interview Type").EditorTemplateName("InterviewTypeTemplate");
                                        columns.Bound(p => p.InterviewStatus).Width(180).EditorTemplateName("InterviewStatusTemplate");
                                        columns.Bound(p => p.Comments).Width(170);
                                        columns.Bound(p => p.Attachments).EditorTemplateName("EvaluationUploadTemplate").Width(150);
                                        columns.Command(command =>
                                        {
                                            command.Destroy();
                                        }).Title("Action").Width(220);
                                    })
                                        .ToolBar(toolbar =>
                                        {
                                            toolbar.Create();
                                            toolbar.Save();
                                        })
                                        .Editable(editable => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Bottom))
                                        .Pageable()
                                        .Navigatable()
                                        .Sortable()
                                        .Scrollable()
                                        .Resizable(resize => resize.Columns(true))
                                        .ColumnMenu()
                                        .DataSource(dataSource => dataSource
                                            .Ajax()
                                            .Batch(true)
                                            .PageSize(20)
                                            .ServerOperation(false)
                                            .Events(events =>
                                            {
                                                events.Error("error_handler");
                                                events.Change("onChange");
                                            })
                                            .Model(model =>
                                            {
                                                model.Id(p => p.RequestID);
                                            })
                                .Read(read => read.Action("Evaluation_Read", "Evaluation").Data(
                                    @<text>
                                        function (e){
                                        var requestID = $('#requestidresult').val();
                                        return{
                                        requestID: requestID
                                        };
                                        }
                                    </text>
                                    ))
                                .Create(create => create.Action("Evaluation_Create", "Evaluation").Data(
                                    @<text>
                                        function (e){
                                        var requestID = $('#requestidresult').val();
                                        return{
                                        requestID: requestID
                                        };
                                        }
                                    </text>
                                    ))
                                .Update(update => update.Action("Evaluation_Update", "Evaluation").Data(
                                    @<text>
                                        function (e){
                                        var requestID = $('#requestidresult').val();
                                        return{
                                        requestID: requestID
                                        };
                                        }
                                    </text>
                                    ))
                                .Destroy(destroy => destroy.Action("Evaluation_Delete", "Evaluation").Data(
                                    @<text>
                                        function (e){
                                        var requestID = $('#requestidresult').val();
                                        return{
                                        requestID: requestID
                                        };
                                        }
                                    </text>
                                    ))
    )
            )

    Editor TemplateCoding/***********************/(EvaluationUploadTemplate)

    @(Html.Kendo().Upload()
        .Name("Attachments")
        .Async(a => a
            .Save("SaveAttachments", "Evaluation")
            .Remove("RemoveAttachments", "Evaluation")
            .AutoUpload(false)
            .SaveField("uploadfiles")
        )
        .Validation(validation =>
        {
            validation.MaxFileSize(3145728);
            validation.AllowedExtensions(new string[] { ".gif", ".jpg", ".png", ".doc", ".docx", ".xls", ".xlsx", ".pptx", ".ppt", ".pdf", ".txt" });
        })
        .Events(events =>
        {
        events.Select("onSelect");
        events.Upload("onUpload", this);
        @*events.Upload(@<text>
            function(x`) {
            e.preventDefault();
            var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
            if(dataItem.CandidateID != "")
            {
            e.data = { requestID: dataItem.RequestID, candidateID: dataItem.CandidateID, seqno: RequestDtlNum }
            }
            }
        </text>);*@
    events.Remove(@<text>
            function(e) {
            e.preventDefault();
            var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
            e.data = { requestID: dataItem.RequestID, candidateID: dataItem.CandidateID, seqno: RequestDtlNum }
            }
    </text>);
        })
    )
    i need to send column candidateId value to controller in kendo upload event

    Thanks in advance

  2. Stefan
    Admin
    Stefan avatar
    1394 posts

    Posted 28 Nov Link to this post

    Hello, Muthu,

    Thank you for the provided code.

    Based on the information it seems that the approach is valid and the additional data should be passed to the controller.

    I can suggest checking the following:

    1) remove the preventDefault() call as this will not send any requests to the controller.

    2) Ensure that this is evaluated to true, and the data is actually added:

    if(dataItem.CandidateID != "")

    3) Add the following parameters to the SaveAttachments action to check their value once the action is called:

    (string(or int)requestID, string(or int) candidateID: , string(or int) seqno)

    If the issue still occurs please provide a fully runnable example and I will gladly investigate if there is a factor which we are overlooking at this moment.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. muthu
    muthu avatar
    5 posts
    Member since:
    Nov 2017

    Posted 08 Dec in reply to Stefan Link to this post

    hi stefan

    I don't understand what you are saying.

    can u please modify my coding and send back to me.

    thanks in advance.

  4. Stefan
    Admin
    Stefan avatar
    1394 posts

    Posted 4 days and 22 hours ago Link to this post

    Hello, Muthu,

    Please advise which part of my response was confusing, so I can try to provide a better explanation?

    The provided code has missing parts, so making an example from scratch may not cover the real application scenario.

    If you send us the current project reproducing the issue, I will be happy to inspect it and modify it in order to reproduce the desired result. 

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. muthu
    muthu avatar
    5 posts
    Member since:
    Nov 2017

    Posted 4 days and 3 hours ago Link to this post

    Hi Stefan,

    Thanks for  your support.  I tried your code in different way and finally i get the solution to pass additional parameter for the controller in upload.

    Now I'am facing one issue which is after upload file when i refresh the browser the uploaded file disappeared. (I saved that upload file in my database).  i need to show whenever user came to the particular page which has upload it should show it's corresponding uploaded file.

    How can i achieve this?  Please help me with this?

    Thanks in Advance.

  6. Stefan
    Admin
    Stefan avatar
    1394 posts

    Posted 3 days and 3 hours ago Link to this post

    Hello, Muthu,

    I'm glad to hear that the desired result is achieved.

    As for the new one, if the file is successfully saved, then it should be successfully returned in the "Attachments" field.

    Please advise the type of the "Attachments" field, and if the newly saved file is successfully returned.

    Also, a short video of the current scenario will be helpful to better understand how the files are shown initially and which is the desired result after the upload and the refresh.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top