@page "/districts"
@using MVC.Services
@using MVC.Models
@using System.ComponentModel.DataAnnotations
@inject IDistrictService DistrictService
<h3>Districts</h3>
<TelerikGrid Data="@district" Sortable="true" EditMode="@GridEditMode.Incell"
             Height="500px"
             Pageable="true" PageSize=@PageSize
             OnUpdate=@UpdateItem OnDelete=@DeleteItem OnCreate=@CreateItem OnCancel="@OnCancelHandler">
    <GridToolBar>
        <GridCommandButton Command="Add" Icon="add">Add District</GridCommandButton>
    </GridToolBar>
    <GridColumns>
        <GridColumn Field="@(nameof(District.Id))" Editable="false" />
        <GridColumn Field="@(nameof(District.Description))" Title="Description" />
        <GridColumn Field="@(nameof(District.EnableApprovalWorkflow))" Title="Enable Approval Workflow" />
        <GridCommandColumn>
            <GridCommandButton Command="Delete" Icon="delete">Delete</GridCommandButton>
        </GridCommandColumn>
    </GridColumns>
</TelerikGrid>
@code {
    int PageSize = 15;
    IEnumerable<District> district;

    protected override async Task OnInitializedAsync()
    {
        await GetGridData();
    }
    async Task GetGridData()
    {
        district = await DistrictService.DistrictList();
    }
    async Task CreateItem(GridCommandEventArgs args)
    {
        District item = (District)args.Item;
        await DistrictService.DistrictInsert(item);
        await GetGridData();
    }

    void OnCancelHandler(GridCommandEventArgs args)
    {
        District item = (District)args.Item;
    }

    async Task DeleteItem(GridCommandEventArgs args)
    {
        District item = (District)args.Item;
        await DistrictService.DistrictDelete(item.Id);
        await GetGridData();
    }

    async Task UpdateItem(GridCommandEventArgs args)
    {
        District item = (District)args.Item;
        await DistrictService.DistrictUpdate(item);
        await GetGridData();
    }
}

using Dapper;
using Microsoft.Data.SqlClient;
using MVC.Models;
using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace MVC.Services
{
    public class DistrictService : IDistrictService
    {
        private readonly SqlConnectionConfiguration _configuration;
        public DistrictService(SqlConnectionConfiguration configuration)
        {
            _configuration = configuration;
        }
        public async Task<bool> DistrictInsert(District district)
        {
            using (var conn = new SqlConnection(_configuration.Value))
            {
                var parameters = new DynamicParameters();
                parameters.Add("Description", district.Description, DbType.String);
                parameters.Add("EnableApprovalWorkflow", district.EnableApprovalWorkflow, DbType.Boolean);
                await conn.ExecuteAsync("spLookupDistrict_Insert", parameters, commandType: CommandType.StoredProcedure);
            }
            return true;
        }
        public async Task<IEnumerable<District>> DistrictList()
        {
            IEnumerable<District> districts;
            using (var conn = new SqlConnection(_configuration.Value))
            {
                districts = await conn.QueryAsync<District>("spLookupDistrict_List", commandType: CommandType.StoredProcedure);
            }
            return districts;
        }
        public async Task<IEnumerable<District>> DistrictSearch(string @Param)
        {
            var parameters = new DynamicParameters();
            parameters.Add("@Param", Param, DbType.String);
            IEnumerable<District> districts;
            using (var conn = new SqlConnection(_configuration.Value))
            {
                districts = await conn.QueryAsync<District>("spLookupDistrict_Search", parameters, commandType: CommandType.StoredProcedure);
            }
            return districts;
        }
        public async Task<District> District_GetOne(int @Id)
        {
            District district = new District();
            var parameters = new DynamicParameters();
            parameters.Add("@Id", Id, DbType.Int32);
            using (var conn = new SqlConnection(_configuration.Value))
            {
                district = await conn.QueryFirstOrDefaultAsync<District>("spLookupDistrict_GetOne", parameters, commandType: CommandType.StoredProcedure);
            }
            return district;
        }
        public async Task<bool> DistrictUpdate(District district)
        {
            using (var conn = new SqlConnection(_configuration.Value))
            {
                var parameters = new DynamicParameters();
                parameters.Add("Id", district.Id, DbType.Int32);

                parameters.Add("Description", district.Description, DbType.String);
                parameters.Add("EnableApprovalWorkflow", district.EnableApprovalWorkflow, DbType.Boolean);

                await conn.ExecuteAsync("spLookupDistrict_Update", parameters, commandType: CommandType.StoredProcedure);
            }
            return true;
        }
        public async Task<bool> DistrictDelete(int Id)
        {
            var parameters = new DynamicParameters();
            parameters.Add("@Id", Id, DbType.Int32);
            using (var conn = new SqlConnection(_configuration.Value))
            {
                await conn.ExecuteAsync("spLookupDistrict_Delete", parameters, commandType: CommandType.StoredProcedure);
            }
            return true;
        }
    }
}

@using System.ComponentModel.DataAnnotations
@using System.Reflection

<TelerikGrid Data=@MyData EditMode="@GridEditMode.Inline" Pageable="true" Height="500px"
             OnUpdate="@UpdateHandler" FilterMode="@GridFilterMode.FilterRow">
    <GridColumns>
        <GridColumn Field=@nameof(SampleData.ID) Editable="false" Title="ID" />
        <GridColumn Field=@nameof(SampleData.Name) Title="Name" />
        <GridColumn Field=@nameof(SampleData.Role) Title="Position">       
            <Template>
                @{
                    var currentEmployee = context as SampleData;
                    var currentRole = GetDisplayName(currentEmployee.Role);                        
                }

                @currentRole
            </Template>
        </GridColumn>
        <GridCommandColumn>
            <GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</GridCommandButton>
            <GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>
        </GridCommandColumn>
    </GridColumns>
</TelerikGrid>

@code {
    //custom method to check whether Display attribute is defined and get and display its Name property, otherwise display the Enum's member name
    public string GetDisplayName(Enum val)
    {
        return val.GetType()
                  .GetMember(val.ToString())
                  .FirstOrDefault()
                  ?.GetCustomAttribute<DisplayAttribute>(false)
                  ?.Name
                  ?? val.ToString();
    }


    public void UpdateHandler(GridCommandEventArgs args)
    {
        SampleData item = (SampleData)args.Item;

        //update the view-model
        var index = MyData.FindIndex(i => i.ID == item.ID);
        if (index != -1)
        {
            MyData[index] = item;
        }

        //perform actual data source operations here
    }

    //model and dummy data generation
    public class SampleData
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public Role Role { get; set; }
    }

    public enum Role
    {
        [Display(Name = "Manager")]
        ManagerRole,
        [Display(Name = "Employee")]
        EmployeeRole,
        [Display(Name = "Contractor")]
        ContractorRole
    }

    public List<SampleData> MyData { get; set; }

    protected override void OnInitialized()
    {
        MyData = new List<SampleData>();

        for (int i = 0; i < 50; i++)
        {
            MyData.Add(new SampleData()
            {
                ID = i,
                Name = "name " + i,
                Role = (Role)(i % 3) // just some sample to populate initial values for the enum
            });
        }
    }
}

<style>
    /*should work but does not*/
    .high-zindex {
        z-index: 124;/*note how this is higher than the z-index of the div element, and is higher than the default z-index of the component*/
    }

    /*workaround*/
    .k-animation-container {
        z-index: 15000;
    }
</style>

<div style="position: absolute; z-index: 123; width: 600px; height: 200px; background: yellow;">
    <TelerikMultiSelect Data="@Countries"
                        @bind-Value="@Values"
                        Placeholder="Enter Balkan country, e.g., Bulgaria"
                        ClearButton="true" AutoClose="false"
                        PopupClass="high-zindex">
    </TelerikMultiSelect>
</div>

@code {
    List<string> Countries { get; set; } = new List<string>();
    List<string> Values { get; set; } = new List<string>();

    protected override void OnInitialized()
    {
        Countries.Add("Albania");
        Countries.Add("Bosnia & Herzegovina");
        Countries.Add("Bulgaria");
        Countries.Add("Croatia");
        Countries.Add("Kosovo");
        Countries.Add("North Macedonia");
        Countries.Add("Montenegro");
        Countries.Add("Serbia");
        Countries.Add("Slovenia");

        base.OnInitialized();
    }
}