Kendo Grid Popup Editor Image Browser

Question

I have a question about the kendo popup editor image browser functionality. I would like to store just the image path into the database, but Kendo seems to want to put the full image tag into the datbase .

How would I go about making the image browser only put the path into the database?

Here is the image browser custom template:

@model com.RomanceCoachOnTheGo.MVC.Models.MaleCategory

@(Html.Kendo().Editor()
.Name(ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty))
//.Value(Model.Icon)
.Tools( tools => tools.Clear().InsertImage())
.ImageBrowser(imageBrowser => imageBrowser
    .Image("~/Mobile/Images/{0}")
    .Read("Read", "ImageBrowser")
    .Create("Create", "ImageBrowser")
    .Destroy("Destroy", "ImageBrowser")
    .Upload("Upload", "ImageBrowser")
    .Thumbnail("Thumbnail", "ImageBrowser"))
)    

This is the MaleCategory View:

@{
ViewBag.Title = "MaleCategory";
Layout = "~/Views/Shared/_Layout.cshtml";
}

@(Html.Kendo().Grid<com.RomanceCoachOnTheGo.MVC.Models.MaleCategory>()
.Name("MaleCategories")
.ToolBar(toolbar =>
{
    toolbar.Create();
})
.DataSource(dataSource => dataSource
            .Ajax()
            .Model(item => { item.Id(m => m.MaleCategoryKey); })
            .Create(c => c.Action("CreateMaleCategory", "Administrator"))
            .Read(r => r.Action("ReadMaleCategory", "Administrator"))
            .Update(u => u.Action("UpdateMaleCategory", "Administrator"))
            .Destroy(d => d.Action("DeleteMaleCategory", "Administrator"))
        )
.Columns(col =>
            {
                col.Bound(c => c.Title);
                col.Bound(c => c.Description);
                col.Bound(c => c.SortOrder);
                col.Bound(c => c.Icon);
                col.Command(command => { command.Edit(); command.Destroy(); }).Width(180);
            })
    .Editable(editing => editing.Mode(GridEditMode.PopUp).TemplateName("EditCreateMaleCategory"))
    .Sortable()
    .Pageable()

    .Filterable()
)

Here is the MaleCategory Model

 public class MaleCategory : FiveTalentLookupModelBase
{
    [Key]
    [ScaffoldColumn(false)]
    [DisplayName("Male Category")]
    public Int64 MaleCategoryKey { get; set; }

    [UIHint("MaleCatIcon")]
    public String Icon { get; set; }
}

Here is the referenced EditCreateMaleCategory Template:

@model com.RomanceCoachOnTheGo.MVC.Models.MaleCategory

@Html.HiddenFor(model => model.MaleCategoryKey)
@Html.HiddenFor(model => model.BusinessActions)
@Html.HiddenFor(model => model.IsDefault)
@Html.HiddenFor(model => model.IsActive)


@*Display Titles*@
<div class="editor-label">
    @Html.LabelFor(model => model.Title)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.Title)
    @Html.ValidationMessageFor(model => model.Title)
</div>

@*Display Description*@
<div class="editor-label">
    @Html.LabelFor(model => model.Description)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Description)
@Html.ValidationMessageFor(model => model.Description)
</div>

@*Display Sort Order*@
<div class="editor-label">
    @Html.LabelFor(model => model.SortOrder)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.SortOrder)
    @Html.ValidationMessageFor(model => model.SortOrder)
</div>

@*Display Icon*@
<div class="editor-label">
    @Html.LabelFor(model => model.Icon)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.Icon)
    @Html.ValidationMessageFor(model => model.Icon)
</div>

Answer 1

I'm using the image browser through Javascript only, but I expect this to be the same:

Replace:

.Image("~/Mobile/Images/{0}")

With:

.Image("{0}")