ASP.NET Core Grid with PopUp Editing using Form component for detail screen

[Alex Tushinsky]

I would like to implement the ASP.NET .NET Core Grid using the pop-up editor.  The default UI produced by the popup is less than ideal though, as I have complex screens in certain cases.  I would love to implement the Form control as part of the grid declaration (DevExpress does this, for example, here:  https://demos.devexpress.com/ASPNetCore/Demo/DataGrid/PopupEditing/ - Is there something similar in the Telerik setup?  If so, is there an example?

I know I can implement templates as part of the grid, but this functionality seems odd because I have to store 50+ partial screens in  Shared/EditorTemplates folder.  Is there a better approach?  I am using Razor pages, not MVC.

Thank you,
Alex

 

[Aleksandar]

Hi Alex,

Under the hood, the Telerik UI for ASP.NET Core Grid uses the framework's EditorForModel method to generate the popup editing template. If you desire to customize the Popup editor you can create a custom template, place it in the EditorTemplates folder and indicate the Grid should use that particular editor:

.Editable(e=>e.Mode(GridEditMode.PopUp).TemplateName("CustomPopUpEditor"))

Besides the online demos of the Telerik UI for ASP.NET Core components, in this sample repository with examples, we have an MVC example with a custom popup editor for the Grid (and the editor template itself) that you can review. The example demonstrates a simplified example, but using the Form component in a custom popup editor is still possible.

To achieve the desired result the following steps need to be taken:

• Create a custom editor in the EditorTemplates folder and indicate the Grid should use that editor
• Add a Form component in the editor template:

  @model OrderViewModel
  
  @(
  Html.Kendo().Form<OrderViewModel>()
          .Name("exampleForm")
          .Layout("grid")
          .Grid(g => g.Cols(2).Gutter(20))
          .Validatable(v =>
          {
              v.ValidateOnBlur(true);
          })
          .Items(items =>
          {
              items.AddGroup()
                  .Label("Order Details")
                  .Layout("grid")
                  .Grid(g => g.Cols(1).Gutter(10))
                  .Items(i =>
                  {
                      i.Add()
                           .Field(f => f.OrderID).Editor(e=>e.Hidden());
                      i.Add()
                          .Field(f => f.OrderDate)
                          .Label(l => l.Text("Order Date:"));
                      i.Add()
                          .Field(f => f.Freight)
                          .Label(l => l.Text("Freight:"));
                  });
  
              items.AddGroup()
                  .Label("Shipping Address")
                  .Layout("grid")
                  .Grid(g => g.Cols(2).Gutter(10))
                  .Items(i =>
                  {
                      i.Add()
                           .Field(f => f.ShipCity)
                           .Label(l => l.Text("City:"))
                           .ColSpan(1)
                           .Editor(e =>
                           {
                               e.ComboBox()
                                   .DataTextField("Text")
                                   .DataValueField("Value")
                                   .BindTo(new List<SelectListItem>() {
                                      new SelectListItem() {
                                          Text = "Paris", Value = "Paris"
                                      },
                                      new SelectListItem() {
                                          Text = "Berlin", Value = "Berlin"
                                      },
                                      new SelectListItem() {
                                          Text = "Rome", Value = "Rome"
                                      },
                                      new SelectListItem() {
                                          Text = "Madrid", Value = "Madrid"
                                      }
                                   });
                           });
                      i.Add()
                          .Field(f => f.ShipName)
                          .Label(l => l.Text("Recepient:"))
                          .ColSpan(1);
                  });
          })
          .ButtonsTemplate(" ") // hide the default Form buttons
      )

• As the editor templates of the Grid are evaluated against an empty model, add an edit event handler and when the event fires set the formData of the Form component to the actual model being edited:

  .Events(ev=>ev.Edit("onEdit"))
  
  <script>
      function onEdit(e){
          var formElement = e.container.find(".k-form");
          var form = $(formElement).getKendoForm();
          form.setOptions({formData:e.model})
      }
  </script>

As a result the Form will bind to the edited model and can be used in a popup editor. Attached you will find a sample RazorPage application demonstrating the above.

Regards,
Aleksandar
Progress Telerik