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

4 posts, 1 answers
  1. KR
    KR avatar
    30 posts
    Member since:
    Apr 2011

    Posted 04 Jun 2018 Link to this post

    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 dropdownlist. When trying to bind it using the ClientTemplate grid in Inline edit mode the dropdownlist editor doesn't appear. Instead, the page breaks and displays html on the Index page itself.  If I comment the ClientTemplate line, everything works fine.

    Is it possible to display a dropdownlist 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.cshtml 
    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 dropdownlist in an InLine editing of a Grid(Grid that is inside a Popup)? 

     

  2. KR
    KR avatar
    30 posts
    Member since:
    Apr 2011

    Posted 04 Jun 2018 Link to this post

    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%");
  3. KR
    KR avatar
    30 posts
    Member since:
    Apr 2011

    Posted 04 Jun 2018 Link to this post

    Sorry I wasn't clear enough in the previous post.  The below statement works and displays the AddressTypeName, but doesn't populate the dropdownlist 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%") ;

     

     

     

  4. Answer
    Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 06 Jun 2018 Link to this post

    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:
    If further assistance is needed, feel free to contact us again.


    Regards,
    Konstantin Dikov
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top