<TelerikDialog @bind-Visible="@Visible"
               Title="@Title">
    <DialogContent>
        <TelerikGrid Data=@GridData Pageable="true" Height="400px" Width="700px">
            <GridToolBar>
                <span class="k-toolbar-spacer"></span> @* add this spacer to keep the searchbox on the right *@
                <div onkeydown="event.stopPropagation()">
                    <GridSearchBox />
                </div>
            </GridToolBar>
            <GridColumns>
                <GridColumn Field="@(nameof(Employee.EmployeeId))" />
                <GridColumn Field=@nameof(Employee.Name) />
                <GridColumn Field=@nameof(Employee.Team) Title="Team" />
                <GridColumn Field=@nameof(Employee.IsOnLeave) Title="On Vacation" />
            </GridColumns>
        </TelerikGrid>
    </DialogContent>
</TelerikDialog>

@code {
    private bool Visible { get; set; } = true;
    private string Title { get; set; } = "Software Update";

    public List<Employee> GridData { get; set; }

    protected override void OnInitialized()
    {
        GridData = new List<Employee>();
        var rand = new Random();
        for (int i = 0; i < 15; i++)
        {
            GridData.Add(new Employee()
                {
                    EmployeeId = i,
                    Name = "Employee " + i.ToString(),
                    Team = "Team " + i % 3,
                    IsOnLeave = i % 2 == 0
                });
        }
    }

    public class Employee
    {
        public int EmployeeId { get; set; }
        public string Name { get; set; }
        public string Team { get; set; }
        public bool IsOnLeave { get; set; }
    }
}

<TelerikPanelBar Data="@Items">
    <PanelBarBindings>
        <PanelBarBinding>
            <ContentTemplate>
                @{
                    var item = context as PanelBarItem;
                    <div onkeydown="stopPropagation(event)">
                        <TelerikTextArea @bind-Value="item.Text"></TelerikTextArea>
                    </div>
                }
            </ContentTemplate>
        </PanelBarBinding>
    </PanelBarBindings>
</TelerikPanelBar>

@* move this script to a separate file in production *@
<script suppress-error="BL9992">
function stopPropagation(e) {
    e.stopPropagation();
}
</script>

@code {
    public List<PanelBarItem> Items { get; set; }

    public class PanelBarItem
    {
        public string Text { get; set; }
        public List<PanelBarItem> Items { get; set; }
    }

    protected override void OnInitialized()
    {
        Items = new List<PanelBarItem>()
        {
            new PanelBarItem() { Text = "Item 1" },
            new PanelBarItem() { Text = "Item 2" }
        };
        base.OnInitialized();
    }
}

<TelerikTreeView Data="@StorageItems"
                 @bind-CheckedItems="@CheckedItems"
                 CheckBoxMode="TreeViewCheckBoxMode.Multiple"
                 CheckParents="true"
                 CheckChildren="true" />

<TelerikMap Center="@Center"
			MinZoom="3" Height="80vh"
			Zoomable="true" Pannable="true" 
			Zoom="7" 
			OnMarkerClick="@( (args) =>  OZRowCmd((CrmMapOrgModel)args.DataItem,15))"
			OnShapeClick="@( (args) =>  OZRowCmd((CrmMapOrgModel)args.DataItem,15))"
	>
		<MapLayers>

			<MapLayer Type="@MapLayersType.Tile"
				  Attribution="@Attribution"
				  Subdomains="@Subdomains"
				  UrlTemplate="@UrlTemplate">
			</MapLayer>

			@if (MarkerList != null) foreach (var it in MarkerList)
				{
				
					@if (it.MarkerType == (int)MapLayersType.Marker)
					{
						<MapLayer Type="@MapLayersType.Marker"
				  Data="@MarkerData1.Where(x=>x.MarkerType==it.MarkerType)"
				  LocationField="@nameof(CrmMapOrgModel.LatLng)"
				  TitleField="@nameof(CrmMapOrgModel.CisloOrgNazev)"
				  />
				
					}
					@if (it.MarkerType == (int)MapLayersType.Bubble && MarkerData1.Any(x => x.MarkerType == it.MarkerType & x.StavTr == it.StavTr))
					{
						<MapLayer Type="@MapLayersType.Bubble"
				  Data="@MarkerData1.Where(x=>x.MarkerType==it.MarkerType & x.StavTr==it.StavTr)"
				  LocationField="@nameof(CrmMapOrgModel.LatLng)"
				  
				  ValueField="@nameof(CrmMapOrgModel.MarkerValue)" MinSize=@it.MinMarkerValue MaxSize=@it.MaxMarkerValue
				  >
							<MapLayerBubbleSettings>
								<MapLayerBubbleSettingsStyle >

									<MapLayerBubbleSettingsStyleFill Color="@it.MarkerColor"></MapLayerBubbleSettingsStyleFill>
									<MapLayerBubbleSettingsStyleStroke Color="@it.MarkerStrokeColor"></MapLayerBubbleSettingsStyleStroke>
								</MapLayerBubbleSettingsStyle>
							</MapLayerBubbleSettings>
						</MapLayer>
					}
				}

		</MapLayers>
	</TelerikMap>