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?

i using Telerik upload for uloading multiple file and max upload file is 5 but time of working uplaod works well but when i remove uplaoded item it just remove from frontend but in my controller it has diffrent id and client side has diffrent id i got it when i debug the code tried multiple times but i got not clue i am giving my full razor component and controller in below 
below is my models 

public class FileMetadata
{
    public string FileId { get; set; }
    public long Size { get; set; }
    public string FileName { get; set; }
    public byte[] FileContent { get; set; }
    public Guid? ProcessId { get; set; }
    public Guid? StructureId { get; set; }
    public Guid? BillingSiteId { get; set; }
}
 public partial class Document
 {
     public Guid DocumentId { get; set; }

     public Guid InvoiceId { get; set; }

     public Guid? JobId { get; set; }

     public int JobStep { get; set; }

     private string _fileName;

     public string FileName
     {
         get { return _fileName; }
         set
         {
             _fileName = value;
             this.DocumentFormat = GetDocumentFormatByFileExtension(value);
         }
     }

     // Field is ignored in regard to DbContext load/save
     public string FileData { get; set; }

     public DateTime CreatedOn { get; set; }

     public DocumentType DocumentType { get; set; }

     public DocumentFormat DocumentFormat { get; set; }

     public DocumentSource DocumentSource { get; set; }

     public bool CanBeArchived { get; set; } 

     public List<Variable> Variables { get; set; }


     [JsonIgnore]
     public virtual Invoice Invoice { get; set; }

     [JsonIgnore]
     public virtual Job Job { get; set; }

     private static DocumentFormat GetDocumentFormatByFileExtension(string fileName)
     {
         if (string.IsNullOrEmpty(fileName)) 
             return DocumentFormat.Undefined;

         try
         {
             string fileExtension = Path.GetExtension(fileName)?.ToLower();

             return fileExtension switch
             {
                 ".pdf" => DocumentFormat.PDF,
                 ".txt" => DocumentFormat.TXT,
                 ".json" => DocumentFormat.JSON,
                 ".xml" => DocumentFormat.XML,
                 ".vars" => DocumentFormat.VARS,
                 _ => DocumentFormat.Undefined,
             };
         }
         catch
         {
             return DocumentFormat.Undefined;
         }           
     }
 }


below is my razor component code 
<style>
    /*  to show custom message for Bug 51695: [Manual upload] Invalid success text  */
    .k-file-validation-message::before {
        content: "@(isUploadedSuccess ? Resources.FileUploadMsg : "")";
        visibility: @(isUploadedSuccess ? "visible" : "hidden");
    }

    /*  to hide the predefined message when file is uploaded  */
    .k-file-validation-message {
        visibility: @(isUploadedSuccess ? "hidden" : "visible");
    }

        /* display error message for invalid file in red */
        .k-file-validation-message.k-text-error {
            color: red;
        }
</style>

<div style="width: 400px;">

    <!-- Drop Zone Section -->
    <div class="dropzone-section">

        <TelerikDropZone Id="dropzone-id"
                         DragOverClass="dropzone-over"
                         NoteText="@DropZoneHintText">
        </TelerikDropZone>

        @if (UseDropZoneOverStyles)
        {
            <style>
                .dropzone-over .k-dropzone-inner {
                    border: 2px dashed;
                }
            </style>
        }
    </div>

    <!-- Upload Section -->
    <div class="upload-section divstyling">
        <TelerikUpload DropZoneId="dropzone-id" @ref="@UploadRef" Id="uploadFile"
                       SaveUrl="@UploadSaveUrl"
                       MaxFileSize="@(16 * 1024 * 1024)"
                       Class="@UploadClass"
                       OnSuccess="@OnUploadSuccess"
                       OnRemove="@OnUploadRemove"
                       OnError="@OnUploadError"
                       Multiple="true"
                       AllowedExtensions="@AllowedFileExtensions"
                       Accept=".pdf,.xml"
                       OnSelect="@OnSelectHandler" />
    </div>

    <!-- Notification Section OnSelect="@OnSelectHandler"-->
    <div class="notification-section">
        <TelerikNotification @ref="@NotificationRef" Class="MyTelerikNotification" HorizontalPosition="NotificationHorizontalPosition.Center" />
    </div>

    <!-- Upload Button -->
    <div class="button-section d-md-flex justify-content-md-end">
        <button id="btnUpload"
                type="button"
                class="btn btn-sm btnAction btn-action-filled-blue mr-1 mt10"
                @onclick="@Upload"
                disabled="@(isUploadInProgress || !selectedFiles.Any())">
            @if (isUploadInProgress)
            {
                <span class="spinner-border spinner-border-sm mr-1"></span>
            }
            @(isUploadInProgress ? Resources.Uploading : Resources.AddAttachment)
        </button>
    </div>
</div>

<style>
    /* Drop Zone */
    .dropzone-section {
        width: 100%;
        max-width: 600px;
        text-align: center;
        margin-bottom: 20px;
    }

    /* Upload Section */
    .upload-section {
        width: 100%;
        max-width: 600px;
        margin-bottom: 20px;
    }

    /* Notification Section */
    .notification-section {
        width: 100%;
        max-width: 600px;
        margin-bottom: 20px;
    }

    /* Buttons */
    #btnUpload {
        border: 2px solid;
        border-radius: 20px;
        opacity: 1;
        margin-right: 0px;
        font-weight: bold;
        /*font-size: 0.85rem !important;*/
        padding-left: 20px !important;
        padding-right: 20px !important;
        max-width: fit-content;
    }

        #btnUpload:focus {
            outline: none !important;
            box-shadow: none !important;
        }
    /* Other Styles */
    .dropzone-over .k-dropzone-inner {
        border: 2px dashed;
    }

    .no-dropzone .k-dropzone-hint {
        display: none;
    }

    .divstyling {
        padding-bottom: 10px;
    }
     /* Error Notification caption */
  /* .MyTelerikNotification .k-notification-container .k-notification {
        width: 300px;
        height: 50px;
        font-size: 1.5em;
        text-align: center;
        align-items: center;
    }  
    .divstyling > .k-upload .k-upload-files{
        max-height : 250px; 
    }*/
</style>

and here is code behind code
using Blazored.Modal;
using Blazored.Modal.Services;
using CmpInvoicePlatform.Client.Services.Dialog;
using CmpInvoicePlatform.Client.Services.Request;
using CmpInvoicePlatform.Shared.Models;
using CmpInvoicePlatform.Shared.Resources;
using Microsoft.AspNetCore.Components;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net.Http;
using System.Net.Http.Json;
using System.Text;
using System.Text.Json;
using System.Threading.Tasks;
using Telerik.Blazor;
using Telerik.Blazor.Components;
using Telerik.Blazor.Components.Notification;

namespace CmpInvoicePlatform.Client.Pages.Invoices
{
    public partial class MutlipleAttachmentAdd : ComponentBase
    {

        [CascadingParameter]
        BlazoredModalInstance ModalInstance { get; set; }

        [Inject]
        private IRequestService RequestSvc { get; set; }
        [Inject]
        private IDialogService DialogSvc { get; set; }

        [Inject]
        private NavigationManager NavigationManager { get; set; }

        [Parameter]
        public InvoiceModelViewModel InvoiceMVM { get; set; }

        private string DropZoneHintText => UploadVisible ? Resources.ManualUploadDrop : string.Empty;

        private bool UseDropZoneOverStyles { get; set; } = true;

        private bool UploadVisible { get; set; } = true;

        private string UploadClass => $"no-dropzone {(!UploadVisible ? "k-hidden" : string.Empty)}";

        private string UploadSaveUrl => ToAbsoluteUrl("api/MultipleFileUpload/save");

        private HttpClient _httpClient;

        public List<string> AllowedFileExtensions = new List<string> { ".pdf", ".xml" };

        //mainly used to check the file uploaded is successful or not so according to it disabled the upload button
        private bool isUploadedSuccess { get; set; }
        private bool isUploadInProgress { get; set; }
        private TelerikUpload UploadRef { get; set; }

        private List<UploadFileInfo> selectedFiles = new();

        private List<FileMetadata> fileMetadataList = new();

        private static int MaxAttachmentFile = 5;

        private static string MaxFileErrorMsg = string.Format(Resources.MaxUploadedFileErrorMsg, MaxAttachmentFile);
        private string ToAbsoluteUrl(string url)
        {
            return $"{NavigationManager.BaseUri}{url}";
        }

        private TelerikNotification NotificationRef { get; set; }

        private void OnUploadSuccess(UploadSuccessEventArgs args)
        {
            isUploadedSuccess = (args.Operation == UploadOperationType.Upload) ? true : false;
        }

        private void OnUploadError(UploadErrorEventArgs e) => isUploadedSuccess = false;

        // Check if the extensions of all selected files are present in the allowed extensions list.
        private async Task OnSelectHandler(UploadSelectEventArgs e)
        {
            var currentFileUploadedCount = selectedFiles.Count + e.Files.Count();
            // Prevent selecting more than 5 files total
            if (currentFileUploadedCount > MaxAttachmentFile)
            {
                e.IsCancelled = true;
                await DialogSvc.AlertAsync(Resources.MaxFileUploadedTitle, MaxFileErrorMsg);
                return;
            }

            selectedFiles.AddRange(e.Files);

            isUploadedSuccess = e.Files.All(file =>
                AllowedFileExtensions.Contains(file.Extension) &&
                !(file.InvalidMinFileSize || file.InvalidMaxFileSize || file.InvalidExtension)
            );
        }

        private async Task Upload()
        {
            try
            {
                isUploadInProgress = true;
                var documentIds = new List<Guid>();
                // Get all files by using UploadController
                _httpClient = new HttpClient();

                using var response = await _httpClient.GetAsync(new Uri($"{NavigationManager.BaseUri}api/MultipleFileUpload/GetAllFiles"));

                if (response.IsSuccessStatusCode)
                {
                    var uploadedFiles = await response.Content.ReadFromJsonAsync<List<Document>>();

                    // Process the files list as needed
                    foreach (var file in uploadedFiles)
                    {
                        var newDocument = new Document
                        {
                            DocumentId = Guid.NewGuid(),
                            InvoiceId = InvoiceMVM.InvoiceId,
                            DocumentSource = DocumentSource.External,
                            DocumentType = DocumentType.Support,
                            FileName = file.FileName,
                            FileData = file.FileData,
                        };

                        await RequestSvc.InvoiceAttachmentAddAsync(newDocument);
                        documentIds.Add(newDocument.DocumentId);
                    }


                    await DialogSvc.AlertAsync(Resources.AddAttachment, Resources.MultipleAttachmentUploadSuccessMsg);

                    UploadRef.ClearFiles();
                    selectedFiles.Clear();
                    isUploadedSuccess = false;

                    //Return the list of uploaded document IDs to the calling component
                    await ModalInstance.CloseAsync(ModalResult.Ok(documentIds));

                }

                await _httpClient.GetAsync(ToAbsoluteUrl("api/MultipleFileUpload/CleanFiles"));

            }
            catch (Exception ex)
            {
                await DialogSvc.AlertAsync(Resources.UploadInvoice, ex.Message);
            }
            finally
            {
                isUploadInProgress = false;
            }
        }

        private async void OnUploadRemove(UploadEventArgs args)
        {
            _httpClient = new HttpClient();
            foreach (var file in args.Files)
            {
                selectedFiles.RemoveAll(f => f.Id == file.Id);

                await _httpClient.PostAsync(
                    ToAbsoluteUrl("api/MultipleFileUpload/remove"),
                    new FormUrlEncodedContent(new[]
                    {
                        new KeyValuePair<string, string>("fileId", file.Id)
                    }));
            }

            if (!selectedFiles.Any())
            {
                UploadRef.ClearFiles();
                await _httpClient.GetAsync(ToAbsoluteUrl("api/MultipleFileUpload/CleanFiles"));
            }
        }

    }

}

please look at the screenshots and provide appropriate solution as soon as possible[High Priority]

Thanks in Advance

I am seeing a different behavior between Blazor UI 8 and 9.

Since upgrading to version 9 the GridToolBarTemplate is getting a k-toolbar-scrollable and the toolbar is getting wrapped in a div with k-toolbar-items k-toolbar-items-scroll classes. This is preventing my toolbar from rendering the way it did in version 8.

I added <GridToolBarSettings OverflowMode="GridToolBarOverflowMode.None" /> as he first element of the template but that had no effect.

How can I prevent the toolbar from getting this new div and classes?

Thanks,

Dave Shine

dshine@caseglide.com

I’m using the Telerik UI for Blazor <TelerikGrid> in a Razor Page. I’ve bound the grid to my view‑model like this:

<TelerikGrid @ref="SearchGrid"
             TItem="ChargeUIResult"
             Class="cgt-tables__table border-radius-top-zero cgt-charge-preview-grid"
             Width="100%"
             Pageable="true"
             Sortable="false"
             ConfirmDelete="true"
             Resizable="true"
             Groupable="false"
             Navigable="false"
             Reorderable="true"
             EnableLoaderContainer="false"
             FilterMode="GridFilterMode.None"
             EditMode="GridEditMode.Popup"
             SelectionMode="GridSelectionMode.Multiple"
             ShowColumnMenu="true"
             OnRead="@ReadItems"
             SelectedItems="@SearchState.SelectedItems"
             @bind-Page="@SearchState.CurrentPage"
             @bind-PageSize="@SearchState.PageSize">
</TelerikGrid>

• SearchState.SelectedItems is an IList<ChargeUIResult> that tracks checkbox selection automatically.
• Clicking a row currently does nothing to that list.

• When the user clicks a row, add that item to SearchState.SelectedItems (if it isn’t already there).
• When clicking a row again (or unchecking its checkbox), remove it from the list.
• Keep the built‑in checkbox selector in sync with row clicks and vice versa.