chore(grid): foreign key example in editor template

Author: marin-bratanov

components/grid/templates/editor.md

@@ -16,21 +16,26 @@ You can data bind components in it to the current context, which is an instance
 
 If you need to perform logic more complex than simple data binding, use the change event of the custom editor component to perform it. You can also consider using a [custom edit form](https://demos.telerik.com/blazor-ui/grid/editing-custom-form).
 
->caption Sample editor template for a field
+>caption Sample editor template for a field - limit the string input options through a select element
 
 ````CSHTML
-@* This example shows how to use a dropdownlist to edit strings. You can implement any desired logic instead.
-If you have an enum, the grid can edit and filter it out-of-the-box without the need for an edit template *@
+@* This example shows how to use a simple <select> to edit strings. You can implement any desired logic instead.
+    If you have an enum, the grid can edit and filter it out-of-the-box without the need for an edit template *@
 
-<TelerikGrid Data=@MyData EditMode="@GridEditMode.Inline" Pageable="true" Height="500px" OnUpdate="@UpdateHandler">
+<TelerikGrid Data=@MyData EditMode="@GridEditMode.Inline" Pageable="true" Height="300px" OnUpdate="@UpdateHandler">
     <GridColumns>
         <GridColumn Field=@nameof(SampleData.ID) Editable="false" Title="ID" />
         <GridColumn Field=@nameof(SampleData.Name) Title="Name" />
         <GridColumn Field=@nameof(SampleData.Role) Title="Position">
             <EditorTemplate>
                 @{
                     CurrentlyEditedEmployee = context as SampleData;
-                    <TelerikDropDownList Data="@Roles" @bind-Value="CurrentlyEditedEmployee.Role" Width="120px" PopupHeight="auto"></TelerikDropDownList>
+                    <select @bind="@CurrentlyEditedEmployee.Role">
+                        @foreach (var item in Roles)
+                        {
+                            <option value="@item">@item</option>
+                        }
+                    </select>
                 }
             </EditorTemplate>
         </GridColumn>
@@ -88,9 +93,120 @@ If you have an enum, the grid can edit and filter it out-of-the-box without the
 }
 ````
 
->caption The result from the code snippet above, after Edit was clicked on the first row and the user expanded the dropdown from the template
+>caption The result from the snippet above after Edit was clicked for the first row and the select was expanded
+
+![editor template for simple strings with a select element](images/edit-template-simple-string-select.png)
+
+>caption Sample editor template that uses a foreign key
+
+````CSHTML
+@* This example shows one way to use a dropdownlist to edit values with a foreign key. *@
+
+<TelerikGrid Data=@MyData EditMode="@GridEditMode.Inline" Pageable="true" Height="500px" OnUpdate="@UpdateHandler">
+    <GridColumns>
+        <GridColumn Field=@nameof(Employee.ID) Editable="false" Title="ID" />
+        <GridColumn Field=@nameof(Employee.Name) Title="Name" />
+        <GridColumn Field=@nameof(Employee.RoleId) Title="Position">
+            <EditorTemplate>
+                @{
+                    CurrentlyEditedEmployee = context as Employee;
+                    <TelerikDropDownList Data="@Roles" DefaultText="Select Role"
+                                         @bind-Value="@CurrentlyEditedEmployee.RoleId"
+                                         TextField="@nameof(Role.RoleName)" ValueField="@nameof(Role.RoleId)"
+                                         Width="100%" PopupHeight="auto">
+                    </TelerikDropDownList>
+                }
+            </EditorTemplate>
+            <Template>
+                @{
+                    // a Template is used to show the foreign key data that is user-friendly
+                    int roleId = (context as Employee).RoleId;
+                    Role matchingPos = Roles.FirstOrDefault(r => r.RoleId == roleId);
+                    string textToRender = matchingPos != null ? matchingPos.RoleName : "Unknown";
+                    <text>@textToRender</text>
+                }
+            </Template>
+        </GridColumn>
+        <GridCommandColumn>
+            <GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</GridCommandButton>
+            <GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>
+        </GridCommandColumn>
+    </GridColumns>
+</TelerikGrid>
+
+@code {
+    List<Employee> MyData { get; set; }
+    List<Role> Roles { get; set; }
+    public Employee CurrentlyEditedEmployee { get; set; }
+
+    public void UpdateHandler(GridCommandEventArgs args)
+    {
+        Employee item = (Employee)args.Item;
+
+        //perform actual data source operations here
+
+        var index = MyData.FindIndex(i => i.ID == item.ID);
+        if (index != -1)
+        {
+            MyData[index] = item;
+        }
+    }
+
+    protected override async Task OnInitializedAsync()
+    {
+        Roles = await GetRoles();
+        MyData = await GetGridData();
+    }
+
+    async Task<List<Role>> GetRoles()
+    {
+        var data = new List<Role>
+        {
+            new Role { RoleId = 1, RoleName = "Manager" },
+            new Role { RoleId = 2, RoleName = "Employee" },
+            new Role { RoleId = 3, RoleName = "Contractor" },
+        };
+
+        return await Task.FromResult(data);
+    }
+
+    async Task<List<Employee>> GetGridData()
+    {
+        var data = new List<Employee>();
+        for (int i = 0; i < 50; i++)
+        {
+            data.Add(new Employee()
+            {
+                ID = i,
+                Name = "name " + i,
+                RoleId = i % 5 // every one in four is an unknown one that will not be present in the roles list
+                // and will have an ID of 0 to match the DefaultText of the dropdownlist
+                // you can perform more complicated checks as necessary in your app and/or in the templates
+                // and/or in the view-model data to present it with suitable values and avoid exceptions
+            });
+        }
+
+        return await Task.FromResult(data);
+    }
+
+    public class Employee
+    {
+        public int ID { get; set; }
+        public string Name { get; set; }
+        public int RoleId { get; set; }
+    }
+
+    public class Role
+    {
+        public int RoleId { get; set; }
+        public string RoleName { get; set; }
+    }
+}
+````
+
+>caption The result from the code snippet above, after Edit was clicked on the second row and the user expanded the dropdown from the editor template
 
-![](images/edit-template.png)
+![Editor Template for a foreign key](images/edit-template-foreign-key.png)
 
 ## See Also