Kendo Grid with Kendo Upload

10 posts, 0 answers
  1. muthu
    muthu avatar
    7 posts
    Member since:
    Nov 2017

    Posted 27 Nov 2017 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
    1702 posts

    Posted 28 Nov 2017 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
    7 posts
    Member since:
    Nov 2017

    Posted 08 Dec 2017 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
    1702 posts

    Posted 11 Dec 2017 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
    7 posts
    Member since:
    Nov 2017

    Posted 12 Dec 2017 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
    1702 posts

    Posted 13 Dec 2017 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.
  7. muthu
    muthu avatar
    7 posts
    Member since:
    Nov 2017

    Posted 19 Dec 2017 in reply to Stefan Link to this post

    Hello, Stefan,

    Thanks for your support, now i'am able to retrieve the attached files. now i have a doubt in that.

    My need is. I have a List<string> Attachmentslist in model.  and in my controller i assigned list of attached file's ID and Name for the Attachmentslist (Ex: Attachmentslist[0] = 40~sample1.txt Attachmentslist[1] = 39~sample2.txt (id and name concatenation))

    now in my grid i need to show this two list value as a <a href> and when user click the link that respected value should pass to controller. and i try that but i cannot able to send the id to controller (Ex: if i click 40~sample1.txt i need to pass 40 as id)

    below i attached my coding please help me to figure this out.

     @(Html.Kendo().Grid<EmployeeSelfService.Models.EvaluationViewModel>()
                                    .Name("DetailGrid")
                                    .Events(e => e.Edit("onEdit"))
                                    .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(165);
                                        columns.Bound(p => p.CandidateName).Title("Name").Width(165);
                                        columns.Bound(p => p.ResumeStatus).Width(165).Title("Resume Status").EditorTemplateName("ResumeStatusTemplate");
                                        columns.Bound(p => p.InterviewDate).Format("{0:dd/MM/yyyy}").Width(165).Title("Interview Date").EditorTemplateName("InterviewDateTemplate");
                                        columns.Bound(p => p.InterviewType).Width(165).Title("Interview Type").EditorTemplateName("InterviewTypeTemplate");
                                        columns.Bound(p => p.InterviewStatus).Width(165).EditorTemplateName("InterviewStatusTemplate");
                                        columns.Bound(p => p.Comments).Width(150);
                                        columns.Bound(p => p.Attachments).EditorTemplateName("EvaluationUploadTemplate").Width(150);

                                       //This is the place i need to show the two values and click them and pass id as parameter to controller

                                        columns.Bound(p => p.Attachmentslist).Title("Uploaded Files").Width(165).ClientTemplate("<a href='Evaluation/Download?id=#=getID(Attachmentslist)#'>#=getName(Attachmentslist)#</a>");
                                        columns.Command(command => command.Destroy().Text(" ")).HtmlAttributes(new { @style ="color:white;"}).Width(80).Title("Action");
                                    })
                                    .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");
                                            })
                                            .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>
                                    ))
    )
                                )

  8. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2217 posts

    Posted 21 Dec 2017 Link to this post

    Hello Muthu,

    There are few options that you have for rendering the desired content in the cell, but I would personally recommend to call a JavaScript function within the ClientTemplate and return the desired HTML:
    columns.Bound(p => p.Attachmentslist).Title("Uploaded Files").Width(165).ClientTemplate("#=myUploadTemplate(Attachmentslist)#");
    ...
     
    function myUploadTemplate(list){
       var result = "";
       for(.....){
         result += "<a ....><>"
       }
       return result;
    }

    You can create more complex HTML within the function as per your exact requirements.

    Hope this helps.


    Regards,
    Konstantin Dikov
    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.
  9. muthu
    muthu avatar
    7 posts
    Member since:
    Nov 2017

    Posted 02 Jan in reply to Konstantin Dikov Link to this post

    Hi Konstantin,

    Thanks for your support, i tried your methodology and it works perfectly. i have some problem now.

    when my page initially load it will call Evaluation_Read method because it have kendo grid. and when i try to add new row for the grid while click add new button on  grid toolbar click i getting error "Uncaught ReferenceError: Attachmentslist is not defined" i also attached my coding please help me to find this out.

    index.cshtml:-

    @(Html.Kendo().Grid<EmployeeSelfService.Models.EvaluationViewModel>()
                                    .Name("DetailGrid")
                                    .Events(e => e.Edit("onEdit"))
                                    .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(165);
                                        columns.Bound(p => p.CandidateName).Title("Name").Width(165);
                                        columns.Bound(p => p.ResumeStatus).Width(165).Title("Resume Status").EditorTemplateName("ResumeStatusTemplate");
                                        columns.Bound(p => p.InterviewDate).Format("{0:dd/MM/yyyy}").Width(165).Title("Interview Date").EditorTemplateName("InterviewDateTemplate");
                                        columns.Bound(p => p.InterviewType).Width(165).Title("Interview Type").EditorTemplateName("InterviewTypeTemplate");
                                        columns.Bound(p => p.InterviewStatus).Width(165).EditorTemplateName("InterviewStatusTemplate");
                                        columns.Bound(p => p.Comments).Width(150);
                                        columns.Bound(p => p.Attachments).EditorTemplateName("EvaluationUploadTemplate").Width(150);
                                        //if(Model.Attachmentslist != null)
                                        //{
                                            columns.Bound(p => p.Attachmentslist).Title("Uploaded Files").Width(165).ClientTemplate("#=MyUploadTemplate(Attachmentslist)#");
                                            //columns.Bound(p => p.Attachmentslist).Title("Uploaded Files").Width(165).ClientTemplate("<a href='Evaluation/Download?id=#=getID(Attachmentslist)#'>#=getName(Attachmentslist)#</a>");
                                        //}
                                        columns.Command(command => command.Destroy().Text(" ")).HtmlAttributes(new { @style ="color:white;"}).Width(80).Title("Action");
                                    })
                                    .ToolBar(toolbar =>
                                    {
                                        toolbar.Create();
                                        toolbar.Save();
                                    })

     

    script:- 

    <script type="text/javascript">

        function MyUploadTemplate(list) {
            console.log("S");
            var result = "";
            var str = "";
            var name = new Array();
            var tt = [];

            for (var i = 0; i < list.length; i++) {
                str = list[i];
                name = str.split("~");
                var obj = {
                    'id': name[0],
                    'val': name[1],
                }
                tt.push(obj);
            }

                for (var j = 0; j < tt.length; j++)
                {
                    var id = tt[j].id;
                    var val = tt[j].val;
                    console.log(id);
                    console.log(val);
                    result += "<a href='Evaluation/Download?id="+id+"'>"+val+"</a><br>"
                }
            return result;
        }

    Evaluation Controller :-

    [AcceptVerbs(HttpVerbs.Post)]
            public ActionResult Evaluation_Read([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<EmployeeSelfService.Models.EvaluationViewModel> products, string requestID)
            {
                var results = new List<EmployeeSelfService.Models.EvaluationViewModel>();
                System.Linq.IQueryable<EmployeeBusinessLogic.PayResourceEvaluationCandidateDtl> resourcecandidate = null;
                resourcecandidate = Db.PayResourceEvaluationCandidateDtl.Where(H => H.Company == cookie.CompanyID && H.RequestID == requestID);
                if (resourcecandidate != null)
                {
                    products = resourcecandidate.AsEnumerable().Select(L => new Models.EvaluationViewModel
                    {
                        RequestID = L.RequestID,
                        RequestDtlNum = L.RequestDtlNum,
                        Company = L.Company,
                        CandidateID = L.CandidateID,
                        CandidateName = L.CandidateName,
                        ResumeStatus = L.ResumeStatus,
                        InterviewDate = L.InterviewDate,
                        InterviewType = L.InterviewType,
                        Comments = L.Comments,
                        InterviewStatus = L.InterviewStatus,
                        Attachmentslist = getAttachments(L.Company, L.RequestID) ?? null,
                    }).ToList();
                }
                if (products != null && ModelState.IsValid)
                {
                    foreach (var product in products)
                    {
                        results.Add(product);
                    }
                }
                return Json(results.ToDataSourceResult(request, ModelState));
            }

            [NonAction]
            private List<string> getAttachments( string Company, string requestID)
            {
                requestID = "10000/17/12/2017/1";

                var attachmentList = new List<string>();
                try
                {
                    var epicorAttach = (from XR in Db.XFileRef
                                        join XA in Db.XFileAttch on new { Company = XR.Company, XFileRefNum = XR.XFileRefNum } equals new { Company = XA.Company, XFileRefNum = XA.XFileRefNum }
                                        where (XA.Company == Company && XR.Company == Company && XA.RelatedToFile.ToUpper() == "PayHROtherRequests"/*"PayResourceEvaluation"*/ && XA.RelatedToSchemaName.ToUpper() == "ERP" && XA.Key1 == requestID)
                                        select XR);
                    if (epicorAttach != null)
                    {
                        foreach (var item in epicorAttach)
                        {
                            string[] XfileName = item.XFileName.Split('\\');
                            string attachXFile = XfileName.Last().ToString();
                            foreach(var list in (AppDb.Attachments.Where(A => A.Company == Company && A.Key1 == requestID && A.RelatedToProcess.ToUpper() == "Other"/*"Evaluation"*/ && A.FileName.Contains(attachXFile) && A.ActualName.Contains(item.XFileDesc))))
                            {
                                attachmentList.Add(list.Id + "~" + list.ActualName);
                            }
                        }
                    }
                }
                catch (Exception e)
                {
                    Utilities.PrintErrorLine(ConfigurationManager.AppSettings["ErrorLogPath"].ToString(), string.Format("{0}~{1}~{2}~{3}", "MVC", "Evaluation controller", "getAttachments", e.ToString()));
                }
                return attachmentList;
            }

  10. Stefan
    Admin
    Stefan avatar
    1702 posts

    Posted 02 Jan Link to this post

    Hello, Muthu,

    I'm glad to hear that the suggestions were helpful.

    I can assume that the error occurs because a defaultValue is not set to the Attachmentslist as this is creating a scenario where the value passed to the MyUploadTemplate function is not defined because this is a new item. Please check if setting a defaultValue will help to resolve it:

    https://docs.telerik.com/aspnet-mvc/api/Kendo.Mvc.UI.Fluent/DataSourceModelFieldDescriptorBuilderBase#methods-DefaultValue(T)

    ==============================================================

    Thank you for your continued interest in Kendo UI, even after the end of the trial period. Normally, we provide technical support only during the trial, but we extended the communication in this thread in order to facilitate your evaluation. I encourage you to consider purchasing a commercial license, which will allow you to continue using our technical support service and integrate Kendo UI in production applications. Let me know if you have questions about licensing and pricing options and I will arrange someone from Sales to get in touch with you. Thank you.

    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