Click here to Skip to main content
15,867,704 members
Please Sign up or sign in to vote.
5.00/5 (1 vote)
I've a Contact page, where a user can maintain it. Using Kendo grid, I listed the contact on my initial grid with only few columns. When the user clicks edit button, a PopUp comes up so edit/delete can be performed. However, the contact table has 3 foreign keys (AccountId, StateProvinceId, CountryRegionId) that show up as dropdown list on the main grid but not on the PopUp window. How can I do this?

Below is the cshtml code..

HTML
@model Humana.Billings.Web.Models.ContactModel
@using Humana.Billings.Web.Helpers;
@using System.Collections;

<div>
    @(Html.Kendo().Grid<ContactModel>()
        .Name(Constants.ContactGridId)
        .EnableCustomBinding(true)
        .Sortable()
        .Columns(c =>
        {
            c.Bound(e => e.ContactId).Width(50);
            c.ForeignKey(e => e.AccountId, (IEnumerable)ViewData["Account"], "AccountId", "Name").Title("Account");
            c.Bound(e => e.PrimaryContact);
            c.Bound(e => e.ReceivesNotifications);
            c.Bound(e => e.FirstName);
            c.Bound(e => e.LastName);
            c.Bound(e => e.Department).Hidden();
            c.Bound(e => e.Address1).Hidden();
            c.Bound(e => e.Address2).Hidden();
            c.Bound(e => e.City).Hidden();
            c.ForeignKey(e => e.StateProvinceId, (IEnumerable)ViewData["StateProvinces"], "StateProvinceId", "StateAbbName").Title("State Province").Hidden();
            c.Bound(e => e.Zip).Hidden();
            c.ForeignKey(e => e.CountryRegionId, (IEnumerable)ViewData["CountryRegions"], "CountryRegionId", "CountryCode").Title("Country Region").Hidden();
            c.Bound(e => e.Phone).Hidden();
            c.Bound(e => e.PhoneExtension).Hidden();
            c.Bound(e => e.Fax).Hidden();
            c.Bound(e => e.Email).Hidden();
            c.Command(command => { command.Edit(); command.Destroy(); }).Width(155);
        })
        .Events(events =>
        {
            events.Cancel("Helpers.HideNotificationArea");
        })
        .Sortable()
        .Selectable()
        .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("EditContact"))
        
                        
        .Pageable()
        .Filterable()
        .ToolBar(items =>
        {
            items.Create().Text("Add New Contact");
        })
        .DataSource(d => d
            .Ajax()
            .ServerOperation(true)
            .PageSize(15)
            .Model(model =>
            {
                model.Id(m => m.ContactId);
                model.Field(m => m.ContactId).Editable(false);
                model.Field(m => m.AccountId).DefaultValue(-1);
                model.Field(m => m.PrimaryContact).DefaultValue(false);
                model.Field(m => m.ReceivesNotifications).DefaultValue(false);
                model.Field(m => m.FirstName);
                model.Field(m => m.LastName);
                model.Field(m => m.Department);
                model.Field(m => m.Address1);
                model.Field(m => m.Address2);
                model.Field(m => m.City);
                model.Field(m => m.StateProvinceId).DefaultValue(-1);
                model.Field(m => m.Zip);
                model.Field(m => m.CountryRegionId).DefaultValue(-1);
                model.Field(m => m.Phone);
                model.Field(m => m.PhoneExtension);
                model.Field(m => m.Fax);
                model.Field(m => m.Email);
            })
           
                    .Read(read => read.Action("Read_Contacts", Constants.ContactController))
                    .Create(create => create.Action("Create", Constants.ContactController))
                    .Update(update => update.Action("Update", Constants.ContactController))
                    .Destroy(destroy => destroy.Action("Delete", Constants.ContactController))
            .Events(events =>
            {
                events.Error("function(e){Helpers.GridError(e, '" + Constants.ContactGridId + "')}");
                events.Change(@<text>
                    function(e) {
                    Helpers.HideNotificationArea(e);
                    Helpers.OnChangeForeignKeyRead(e, ['AccountId'],['StateProvinceId'],['CountryRegionId']);
                    }
                </text>);
            })
                )
    )
    

</div>
Posted
Updated 13-May-15 5:41am
v2

1 solution

So after doing some research, I found out the best way to customize the Kendo PopUp Editor is creating a custom editor template and place it on you ~Views/Shared/EditorTemplates folder. Once you provide the name of the template on you main grid cshtml like this:
HTML
.Editable(editable => editable.Mode(GridEditMode.PopUp)
                        .TemplateName("_EditContact")


Once I figured that out, there was another issue with the dropdownlist not showing the value from the table but it was populating ok. This took some time to figure out since there's not a lot of documentation on Kendo. The workaround for this was removing the .Name("ColumnName") property with
HTML
.HtmlAttributes(new { @ColumnNameId = "ColumnName" } )


Here's the full code for _EditContact.cshtml

HTML
@model Humana.Billings.Web.Models.ContactModel
@using Humana.Billings.Web.Helpers;
@using System.Collections;

<div class="editor-label">
    @Html.LabelFor(model => model.ContactId)
</div>
<div class="editor-field">
    @(Html.Kendo().TextBoxFor(model => model.ContactId)
    .Enable(false)
)
</div>

<div class="editor-label">
    @Html.LabelFor(model => model.PrimaryContact)
</div>
<div class="editor-field">
    @Html.CheckBoxFor(model => model.PrimaryContact)
</div>

<div class="editor-label">
    @Html.LabelFor(model => model.ReceivesNotifications)
</div>
<div class="editor-field">
    @Html.CheckBoxFor(model => model.ReceivesNotifications)
</div>

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

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

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

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

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

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

<div class="editor-label">
    @Html.LabelFor(model => model.StateProvinceId)
</div>
<div class="editor-dropdown">
            @(Html.Kendo().DropDownListFor(model => model.StateProvinceId)
            //.Name("StateProvince")
            .HtmlAttributes(new { @StateProvinceId = "StateProvince" })
            .Filter("startswith")
            .DataValueField("StateProvinceId")
            .DataTextField("StateAbbName")
            .BindTo((System.Collections.IEnumerable)ViewData["StateProvinces"])
    )
</div>

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

<div class="editor-label">
    @Html.LabelFor(model => model.CountryRegionId)
</div>

<div class="editor-dropdown">
            @(Html.Kendo().DropDownListFor(model => model.CountryRegionId)
            //.Name("CountryRegion")  
            .HtmlAttributes(new { @CountryRegionId = "CountryRegion" })
            //.Filter("startswith")
            .DataValueField("CountryRegionId")
            .DataTextField("CountryCode")
            //.AutoBind(true)
            .BindTo((System.Collections.IEnumerable)ViewData["CountryRegions"])
            //.ToClientTemplate()
    )
</div>


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

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

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

<div class="editor-label">
    @Html.LabelFor(model => model.Email)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.Email)
    @Html.ValidationMessageFor(model => model.Email)
</div>
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900