This is a migrated thread and some comments may be shown as answers.

Using a partial view as the template for the popup editor

5 Answers 1043 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Dave
Top achievements
Rank 1
Dave asked on 01 Dec 2012, 03:47 PM
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

5 Answers, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 04 Dec 2012, 07:44 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Robert
Top achievements
Rank 1
answered on 20 Dec 2012, 03:24 AM
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?
0
Daniel
Telerik team
answered on 21 Dec 2012, 05:13 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Robert
Top achievements
Rank 1
answered on 21 Dec 2012, 05:37 PM
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: ";lsadhfoew@sage.com"
    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?

 

0
Daniel
Telerik team
answered on 02 Jan 2013, 07:49 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Dave
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Robert
Top achievements
Rank 1
Share this question
or