I'm looking for something similar to this:

https://www.syncfusion.com/blazor-components/blazor-image-editor

Need this for annotating and editing both bitmapped and vector based graphics related to an engineering applcation.

Hi,

I've some TelerikCard components that host different other components but when using lets say the TelerikTimePicker then as soon as you try to input a time via keyboard it gets a red border and seems to invalidate the input.

When using the TelerikTimePicker outside in a simple div then it seems to work.

Also when using the popup to set the time it works. Only keyboard input seems to trigger some sort of validation.
When losing focus the timepicker resets to 00:00:00.

Here's the code of the razor page to replicate the problem:

<TelerikCard Width="20rem">
    <CardHeader>
        <CardTitle>Time Selector</CardTitle>
    </CardHeader>
    <CardBody>
        Startzeitpunkt<br>
        <TelerikTimePicker @bind-Value="@SelectedStartTime" Format="HH:mm:ss" Width="6rem" />
        <br>
        Endzeitpunkt<br>
        <TelerikTimePicker @bind-Value="@SelectedEndTime" Format="HH:mm:ss" Width="6rem" />
        <br>
    </CardBody>
    <CardSeparator></CardSeparator>
    <CardFooter>
        footer
    </CardFooter>
</TelerikCard>

@code {
    protected DateTime SelectedStartTime { get; set; }
    protected DateTime SelectedEndTime { get; set; }
}

I use the latest telerik blazor components 9.1.0 and VS 2022 17.14.9.

Maybe someone has a hint what's wrong with it.

Regards,
Thomas

How do I set the TreeList filter through code?  So, can I put a value in the criteria field from code behind?

                <TelerikTreeList @ref=@TreeListRef
                                 Data="@Groups"
                                 SelectedItems="@SelectedGroups"
                                 IdField="@nameof(Group.Id)"
                                 ParentIdField="@nameof(Group.ParentId)"
                                 OnStateInit="((TreeListStateEventArgs<Group> args) => OnStateInitHandler(args))"
                                 Pageable="true"
                                 PageSize="@GroupPageSize"
                                 Height="100%"
                                 Sortable="false"
                                 SelectionMode="TreeListSelectionMode.Single"
                                 FilterMode="@TreeListFilterMode.FilterMenu"
                                 @bind-Page="@GroupCurrentPage"
                                 SelectedItemsChanged="@((IEnumerable<Gsi.Customer.Models.Group> m) => OnGroupSelected(m))">
                    <TreeListColumns>
                        <TreeListColumn Field="Name" Title="Group Filter" Expandable="true">
                            <Template>
                                @{
                                    var item = context as Gsi.Customer.Models.Group;
                                    <img height="32" width="32" src="@item.ImageUrl" />
                                    @item.Name
                                }
                            </Template>
                        </TreeListColumn>
                    </TreeListColumns>
                </TelerikTreeList>

I just get a spinning wheel when I bring up NuGet Package Manager and have the source set to Telerik.

If I select other package sources they load and display quickly.

Any suggestions?

I have a treelist with a checkbox for selection.  However, my list is long so I added pagination.  I help the user by pre-selecting a node and I need to display the page that exposes the first selected node.  How do I do this?

|

                        <TelerikTreeList @ref=@TreeListRef
                                         Class="gsi-padding-0"
                                         Data="@UserGroups"
                                         SelectedItems="@SelectedGroups"
                                         IdField="Id"
                                         Pageable=true
                                         PageSize="10"
                                         ParentIdField="ParentId"
                                         SelectionMode="TreeListSelectionMode.Single"
                                         OnRowRender="@HandleRowRender"
                                         SelectedItemsChanged="@((IEnumerable<Gsi.Customer.Models.Group> m) => OnGroupSelected(m))">

                            <TreeListColumns>
                                <TreeListCheckboxColumn SelectAll="false"
                                                        SelectChildren="false"
                                                        CheckBoxOnlySelection="true"
                                                        Width="64px" />

                                <TreeListColumn Field="Name" Title="Name" Expandable="true">
                                    <Template>
                                        @{
                                            var item = context as Gsi.Customer.Models.Group;
                                            <img height="32" width="32" src="@item.ImageUrl" />
                                            @item.Name
                                        }
                                    </Template>
                                </TreeListColumn>
                            </TreeListColumns>
                        </TelerikTreeList>

when i provide hardcoded data chart gets populated but on providing record from db the chart gets blank. 
this is my raozr page 
"    <div class="row ">
        <div class="col-12">
            <div id="chart-section" class="card chart-card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-project-diagram me-2 text-primary"></i>
                            Deal Flow Analysis
                        </h5>
                     @*    <div class="d-flex gap-2">
                            <button class="btn btn-sm btn-outline-primary">
                                <i class="fas fa-expand-arrows-alt"></i>
                            </button>
                            <button class="btn btn-sm btn-outline-primary">
                                <i class="fas fa-cog"></i>
                            </button>
                        </div> *@
                    </div>
                    <TelerikSankey Data="@Data">

                        <SankeyLinks ColorType="@SankeyLinksColorType.Static"></SankeyLinks>
                        <SankeyLabels>
                            <SankeyLabelsStroke Color="none"></SankeyLabelsStroke>
                        </SankeyLabels>
                    </TelerikSankey>
                </div>
            </div>
        </div>
    </div>"
this is how i am binding my data 
"       private void GenerateSankeyData()
       {
           if (hubspotDealStagesDtos == null || !hubspotDealStagesDtos.Any() || hubDealData == null)
               return;

           var newNodes = new SankeyDataNodes();
           var newLinks = new SankeyDataLinks();

           
           var orderedStages = hubspotDealStagesDtos.OrderBy(s => s.DisplayOrder).ToList();
           foreach (var stage in orderedStages)
           {
               newNodes.Add(new SankeyDataNode
               {
                   Id = stage.HubspotId,
                   Label = new SankeyDataNodeLabel { Text = stage.Label }
               });
           }

           foreach (var group in hubDealData.GroupBy(x => x.DealStage))
           {
               if (!int.TryParse(group.Key.ToString(), out int validId))
                   continue;

               double value = selectedViewBy == "value"
                   ? group.Sum(x => x.Amount)
                   : group.Count();

               newLinks.Add(new SankeyDataLink
               {
                   SourceId = 0,       

                  TargetId = validId,
                   Value = value
               });
           }

           Data.Nodes.Clear();
           Data.Links.Clear();

           foreach (var node in newNodes)
               Data.Nodes.Add(node);

           foreach (var link in newLinks)
               Data.Links.Add(link);

           StateHasChanged();
       }"
need help in this regard