Using a partial view as the template for the popup editor

[Dave]

Is it possible to use a partial view (.cshtml) as the template for the grid's popup editor in Javascript? Essentially I want to set the "template" property of the "editor" from Javascript. I see that it's possible by using the MVC wrapper's HTML helper property TemplateName, but I don't want to use the helper. From what I see the helper creates a string version of the partial view and sets the "template" property as viewed in the resulting Javascript generated by the view engine.

editable: { mode: 'popup', template: 'can I set this value from JS?' },

Thanks,
Dave

[Daniel]

Hello Dave,

You could load the editor template from a partial view by using the following approach:

<script type="text/kendo" id="popupTemplate">
    @Html.Partial("PartialViewEditor", new MyModel())
</script>

editable: {
    mode: "popup",
    template: $("#popupTemplate").html()
}

Kind regards,
Daniel
the Telerik team

[Robert]

If the model in the popup differs from the model bound to the grid how do you access the data entered through the popup after update is pressed?

[Daniel]

Hello Robert,

The inputs are bound to the model by the value binding specified with the data-bind attribute or if missing by the name attribute. Even If the properties are not initially in the observable object that is in the Grid model, as long as one of the aforementioned attributes is specified, they will be added to the object when their value is changed and will be posted with the other fields. If you wish you could access the entered data when the update button is pressed in the Grid save event.

Regards,
Daniel
the Telerik team

[Robert]

Thank you Daniel. I got all the data posted back in the Html.EditorFor fields but the Html.DropDownListFor value always comes back with Guid.Empty value.

The View(this is used for the popup):
@model SageNA.CE.Tenant.Models.TenantEntry

@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)

    <fieldset style="width: auto">
        <legend></legend>
        <div class="editor-span">
            @Html.LabelFor(model => model.OrganizationName)
        </div>
        <div class="editor-field focus">
            @Html.EditorFor(model => model.OrganizationName)
            @Html.ValidationMessageFor(model => model.OrganizationName, "*")
        </div>
        <div class="editor-span">
            @Html.LabelFor(model => model.Email)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Email)
            @Html.ValidationMessageFor(model => model.Email, "*")
        </div>
        <div class="editor-span">
            @Html.LabelFor(model => model.SageCustomerNumber)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.SageCustomerNumber)
            @Html.ValidationMessageFor(model => model.SageCustomerNumber, "*")
        </div>
        <div class="editor-span">
            @Html.LabelFor(model => model.BillingAccountNumber)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.BillingAccountNumber)
            @Html.ValidationMessageFor(model => model.BillingAccountNumber, "*")
        </div>
        <div class="editor-span">
            @Html.LabelFor(model => model.ApplicationID)
        </div>
        <div class="editor-field">
            @Html.DropDownListFor(model => model.ApplicationID, new SelectList(Model.Applications, "ApplicationID", "Description", Model.Applications.First().ApplicationID))
            @Html.ValidationMessageFor(model => model.ApplicationID, "*")
        </div>
    </fieldset>
}

 The Model.Applications value(only a single item in drop down):
ApplicationCnt: 1
    ApplicationID: {79a79d78-13c5-419d-bb6a-aa806c2ea3ec}
    Created: {12/18/2012 8:35:44 PM}
    Description: "Mobile Applications"
    LastModified: {12/18/2012 8:35:44 PM}
    ProvisionURL: ""

The post back method():
public JsonResult Create(List<TenantEntry> models)
        {
            RespositoryTenant repository = new RespositoryTenant();
            Guid tenantID = repository.Create(models[0]);
            Tenant.Models.Tenant t = repository.Get(tenantID);
            TenantEntry te = new TenantEntry()
            {
                TenantID = t.TenantID,
                SageCustomerNumber = t.Organization.SageCustomerNumber,
                OrganizationName = t.Organization.OrganizationName,
                Email = t.AppTenants.FirstOrDefault().AppTenantUsers.FirstOrDefault().AppUser.Email,
                BillingAccountNumber = t.Organization.BillingAccountNumber ?? "",
                ApplicationID = t.AppTenants.FirstOrDefault().ApplicationID
            };
            return Json(te);
        }

Post back models[0] value:
{SageNA.CE.Tenant.Models.TenantEntry}
    ApplicationID: {00000000-0000-0000-0000-000000000000}
    Applications: null
    BillingAccountNumber: "slkdfjhslkjfd"
    Email: ";[e-mail]"
    OrganizationName: "sdflsahf;l"
    SageCustomerNumber: "sldkhsalhf"
    TenantID: {00000000-0000-0000-0000-000000000000}

Couple of questions. Why is models[0].ApplicationID not {79a79d78-13c5-419d-bb6a-aa806c2ea3ec}(I selected Mobile Applications from the drop down)? Why is models[0].Applications null? Is the drop down list not posted back?

 

[Daniel]

Hello Robert,

Sorry for the delayed reply. Because of holidays we were short on staff.

The problem with the select element value could occur in Internet Explorer because of problems with the focus in the Window in the official release. This is already fixed in the latest internal builds and the changes will be applied in the service pack expected later this month.
If the updated value is not posted in any browser, please send a small runnable sample so I can investigate further.

Regards,
Daniel
the Telerik team