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.

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 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

Hello,

I'm having a problem refreshing a Scheduler component.

I've set up a page where a drop-down list allows you to select a schedule.

Once the schedule is selected, the appointments are loaded and the component is updated.

However, I notice that the appointments are not refreshed and that I need to set the focus on the component.

I've tried several solutions with Rebind and/or Refresh without success.

Does anyone have a template that works?

Thks,

Hello:

As the subject line states, is there a way to open the DatePicker programmatically?