How can I get an image in Kendo grid pop up template in MVC?

Question

I am using a Kendo grid pop up template, and I am trying to get image name and path in the template, but have not been successful.

This is my Index view:

@(Html.Kendo().Grid<TelerikMvcAppCombo.Models.ImageModel>()
    .Name("grdImageModel")
    .DataSource(datasource => datasource
        .Ajax()
        .Model(model => model.Id(p => p.IMAGESIZE_ID))
        .Create(create => create.Action("Create", "Imagetest"))
        .Update(update => update.Action("Editing_Update", "Imagetest"))
        .Destroy(delete => delete.Action("Delete", "Imagetest"))
        .Read(read => read.Action("GetData", "Imagetest"))
        .Model(model =>
        {
            model.Field(p => p.IMAGESIZE_ID).Editable(true);
            model.Id(p => p.IMAGESIZE_ID);
            model.Field(p => p.IMAGESIZE_ID).Editable(false);
            // model.Field(p => p.isenabled).DefaultValue(true);
        })
    )
    .Columns(columns =>
    {
        //columns.Bound(c => c.IMAGESIZE_ID).ClientTemplate("<input type='checkbox' value #=IMAGESIZE_ID#  />").Width(50);
        columns.Bound(c => c.IMAGESIZE_ID).ClientTemplate("<input type='checkbox' value #=IMAGESIZE_ID#  />").Title("Image No");
        columns.Bound(c => c.IMAGESIZE_NAME).Width(140).Title("Image Name");
        columns.Bound(c => c.IMAGESIZE_DESC).ClientTemplate("<img src='" + Url.Content("~/Images/") + "#=IMAGESIZE_NAME#'/>").Title("Image");
        columns.Bound(c => c.created_by).Title("Created By");
        columns.Bound(c => c.created_date).Title("Created Date");
        columns.Bound(c => c.modified_by).Title("Modified By");
        columns.Bound(c => c.modified_date).Title("Modified Date");
        columns.Command(command =>
            {
                command.Edit(); command.Destroy();
            });
    })
    .ToolBar(toolbar => toolbar.Create())
    .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("ImageModel"))
    .HtmlAttributes(new { style = "height: 580px;" })
    .Scrollable()
    .Sortable()
    .Pageable(pageable => pageable
        .Refresh(true)
        .PageSizes(true)
        .ButtonCount(5)
    )
)

Here is my editor template:

<div>
    @(Html.Kendo().Upload()
        .Name("files")
        .Multiple(false)
        .Messages(msg => msg.Select("Browser"))
        .Events(e => e
        .Select("onSelect").Remove("onRemove"))
    )
    <div style="height:150px;width:150px;" id="divimage"></div>
</div>

Here is my controller:

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Create([DataSourceRequest] DataSourceRequest request, IEnumerable<HttpPostedFileBase> files)
{
    return View("");
}

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Editing_Update([DataSourceRequest] DataSourceRequest request, string imagename, string imagepath)
{
    return RedirectToAction("index");
}

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Delete([DataSourceRequest] DataSourceRequest request, ImageModel imagemodel)
{
    return View();
}

public JsonResult GetData([DataSourceRequest] DataSourceRequest request)
{
    var list = db.imageModels.ToList();
    return Json(list.ToDataSourceResult(request));
}

If I use the kendo upload control as a single control, then I get the image path and name easily. But if I use the kendo upload in the grid popup, then I don't get the image.

Answer 1

I'm assuming your Upload control is part of a larger form. Try adding .ToClientTemplate() on the Html.Kendo().Upload()

Hopefully I understood your problem correctly.