Asp.Net core popup editing with tag helper

[Kiran]

I want to create a edit popup template where I want to display the 2 to 3 fields in a single row. First question:- Can I do this in the existing template.
Second question:- If I create a separate template how to pass and bind the model to the template.

[Tsvetomila]

Hi Kiran,

Let me share the answer I provided in the support ticket here as well :) In order for the community to potentially benefit from it as well.

Using a partial view as a custom edit template is an excellent option, especially since the Editor Popup handles numerous properties. 

Achieving the desired alignment will primarily require some CSS adjustments.

Based on the configuration and approach provided, I've created an example project. And attached it to this response. Please review and modify it according to the application's needs.

Here are the steps I followed to achieve the result:

• Enable the editable popup mode and the inline template component

// Grid Configuration
<kendo-grid name="grid3" height="600">
   // Omitted for brevity ...
    <editable mode="popup" template-id="popup-editor" /> 
</kendo-grid>

• Define the external script template

// Script Template - loads partial view
<script id="popup-editor" type="text/x-kendo-template">
    @(Html.Partial("CustomPopupEditor"))
</script>

• Setup the partial view (using plain HTML elements)
  

<div class="k-edit-form-container">
    <form id="popup-editor">
           <div class="form-container"> //Container for multiple components on one row
                  <div class="component-group"> // Container for each component groupting label and input
	            // component 1
                         <div class="group-edit-label">
                               <label for="ShipCountry">ShipCountry</label>
                         </div>
                         <div class="group-edit-field">
                            <input type="text" id="ShipCountry" name="ShipCountry" value="Model.ShipCountry" style="width: 100%;" />
                         </div>
                  </div>
                  <div class="component-group">
                    // component 2 ... 
                  </div>
                  <div class="component-group">
                    // component 3 ...
                  </div>
          </div>

                    // Standalone component 
                    <div class="k-edit-label">
                           <label for="Department">Department</label>
                   </div>
                   <div class="k-edit-field">
                          <select id="Department" name="Department" style="width: 100%;">
                                      <option value="1">Department 1</option>
                                      <option value="2">Department 2</option>
                                      <option value="3">Department 3</option>
                           </select>
                    </div>
    </form>
</div>

• Setup the partial view (using Telerik UI for ASP.NET Core Components)

// Example with Telerik UI for ASP.NET Core helpers
<div class="form-container" style="display: flex">
    // Always call the ToClientTemplate method when using Telerik UI for ASP.NET Core HtmlHelpers in a client template. 
    <div class="component-group" style="display: flex">
        <div class="group-edit-label" style="display: flex">
            @(Html.LabelFor(x => x.ShipCountry))
        </div>
        <div class="group-edit-field" style="display: flex">
            @(Html.Kendo().TextBoxFor(x => x.ShipCountry).ToClientTemplate())
        </div>
     </div>
    // Always call the is-in-client-template="true" method when using Telerik UI for ASP.NET Core TagHelpers in a client template. 
    <div class="component-group" style="display: flex">
        <div class="group-edit-label" style="display: flex">
            <label>Freight</label>
        </div>
        <div class="group-edit-field" style="display: flex">
            <kendo-numerictextbox name="Freight" is-in-client-template="true" type="number">
            </kendo-numerictextbox>
        </div>
    </div>
</div>

• Add styling via CSS

<style>
    .form-container {
        display: flex;
        justify-content: space-between;
        margin-bottom: 5%;
    }

    .component-group {
        display: flex;
        flex-direction: column;
        margin-right: 10px;
        margin-left: 10px;
    }

    .group-edit-label {
        text-align: left;
        width: 75%;
        vertical-align: top;
        box-sizing: border-box;
    }

    .group-edit-field {
        display: inline-block;
        width: 100%;
        box-sizing: border-box;
    }

    .k-edit-label {
        display: inline-block;
        width: 25%;
        vertical-align: top;
        box-sizing: border-box;
    }

    .k-edit-field {
        display: inline-block;
        width: 75%;
        padding: 10px;
        box-sizing: border-box;
    }
</style>

The image below represents the final look.


Regards,
Tsvetomila
Progress Telerik