binding a dropdownlist to a column of a Grid thats inside a Popup editor

[KR]

Here is the scenario.

I have an Index page with a Grid. The Grid's popup displays another Grid. And I'm using Inline editing in this popup grid. I'm trying to bind a column to a . When trying to bind it using the ClientTemplate grid in Inline edit mode the editor doesn't appear. Instead, the page breaks and displays on the Index page itself.  If I comment the ClientTemplate line, everything works fine.

Is it possible to display a in an InLine editing of a Popup Grid? 

Below is the relevant code snippets from my project.  

 

Index.html - this page has a grid containing a list of records and I used a popup for editing data. This uses MembersEditorTemplate.cshtml for editing data.

 

@(Html.Kendo().Grid<Aamva.Api.Common.WebSite.Models.WebUser>()
          .Name("membersGrid")
          .Columns(columns =>
          {
              columns.Command(command => { command.Edit(); command.Destroy().Text("DeleteCustomer"); }).Width("15%");
              columns.Bound(p => p.FullName);
              columns.Bound(p => p.Role);
              columns.Bound(p => p.Title);
              columns.Bound(p => p.EmailAddress);
          })
          .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("MembersEditorTemplate").Window(w => w.Title("Edit Employee")))
          .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
          .DataSource(dataSource => dataSource
              .Ajax()
              .PageSize(10)
              .Model(model => model.Id(p => p.KEY))
              .Read(read => read.Action("ListMembers", "Home"))
              .Destroy(destroy => destroy.Action("DeleteCustomer", "Home"))
              .Update(update => update.Action("PopupUpdate", "Home"))

              )
           )
  )

 

MembersEditorTemplate.cshtml - this editor template again contains a grid and the editing in this grid is InLine 
This grid has a column that displays AddressTypeName
For this, I used ClientTemplate and referred the Object type UserAddressType.AddressTypeName
If I comment the ClientTemplate line, everything works fine.

 

<div class="row" style="margin-left:10px;">
    @(Html.Kendo().Grid<Models.WebUserAddress>()
            .Name("addressGrid")
            .Columns(columns =>
            {
                columns.Command(command => { command.Edit(); command.Destroy();  }).Width("15%");
                columns.Bound(model => model.UserAddressType).ClientTemplate("#= UserAddressType.AddressTypeName #");
                 columns.Bound(p => p.AddressLine1);
                columns.Bound(p => p.AddressLine2);
                columns.Bound(p => p.City));
                columns.Bound(p => p.State);
                columns.Bound(p => p.Country);

            })
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(10)
                .Events(events => events.Error("error_handler"))
                .Model(model => model.Id(p => p.CustomerAddressKey))
                .Read(read => read.Action("ListAddresses", "Home").Data("getCurrentCstKey"))
                .Destroy(destroy => destroy.Action("DeleteAddress", "Home"))
                .Update(update => update.Action("UpdateAddress", "Home"))
                .Create(create => create.Action("AddAddress", "Home"))
             )
            .ToolBar(toolBar =>
            {
                toolBar.Create();
            })
            .Editable(editable => editable.Mode(GridEditMode.InLine))
    )
</div>

AddressTypeEditor. 
This has a DropDownList that refers to all the available Address Types.

 

@model Models.WebUserAddressType

@(Html.Kendo().DropDownList()
        .Name("UserAddressType")
        .DataTextField("AddressTypeName")
        .DataValueField("AddressTypeKey")
        .DataSource(d => d
            .Read("GetAllAddressTypes", "Home")
        )
)

 

ViewModels are as below
Used UIHint as AddressTypeEditor

public class WebUserAddress
{
    [UIHint("AddressTypeEditor")]
    public WebUserAddressType UserAddressType { get; set; }
    public string AddressLine1 { get; set; }
    public string AddressLine2 { get; set; }
    public string City { get; set; }
    public string State { get; set; }
    public string Country { get; set; }
}

public class WebUserAddressType
{
    public string AddressTypeKey { get; set; }
    public string AddressTypeName { get; set; }
}

 

 

Is it possible to display a in an InLine editing of a Grid(Grid that is inside a Popup)? 

 

[KR]

Also, the following statements work. Notice that I'm referring to the model.UserAddressType.AddressTypeName (string type)

columns.Bound(model => model.UserAddressType.AddressTypeName).ClientTemplate("#= UserAddressType.AddressTypeName #").Width("10%") ;

or

columns.Bound(model => model.UserAddressType.AddressTypeName).Width("10%") ;

 

But below statements fail to show the popup. Notice that I refer to UserAddressType.AddressTypeName (which is object type)

see attached image.

 

columns.Bound(model => model.UserAddressType).ClientTemplate("#= UserAddressType.AddressTypeName #").Width("10%");

or

columns.Bound(model => model.UserAddressType).ClientTemplate("#= UserAddressType.AddressTypeName #").EditorTemplateName("AddressTypeEditor").Width("10%");

[KR]

Sorry I wasn't clear enough in the previous post.  The below statement works and displays the AddressTypeName, but doesn't populate the  in the edit mode (InLine) in the Grid (inside popup).

 

columns.Bound(model => model.UserAddressType.AddressTypeName).ClientTemplate("#= UserAddressType.AddressTypeName #").Width("10%") ;

or

columns.Bound(model => model.UserAddressType.AddressTypeName).Width("10%") ;

[Konstantin Dikov]

Hi,

Most likely the problem that you are facing is due to invalid template, which could be confirmed if you open the browser`s console and see if there are JavaScript errors. Note that when you are nesting widgets in such manner, you need to call the ToClientTemplate method for the child helper:

@(Html.Kendo().Grid<Models.WebUserAddress>()
            .Name("addressGrid")
            ...
            .ToClientTemplate()
    )

Additionally, in most cases you need to escape special characters for the nested widgets, as documented in the following help topic:

• https://docs.telerik.com/kendo-ui/framework/templates/overview

If further assistance is needed, feel free to contact us again.


Regards,
Konstantin Dikov
Progress Telerik