Hi guys,

I am fairly new to Blazor/Telerik but trying to get this to work.   I introduced OnRead to my code so I can try to capture the grid row count.  The problem is when WorkRecord is called it quits refreshing the grid.  I have to F5 to see my updates.

Its almost as if OnRead gets in the middle of things and doesn't allow things to complete.

Any idea what I am doing wrong here?

@using Telerik.DataSource.Extensions
@inject DapperRepository<S4PSector4UpdateList> S4GridManager
@inject IJSRuntime js

    @if (@S4Records != null && @cpar != null && @cpar.Initialized == true) 
    {
            //FilterMode="@GridFilterMode.FilterRow"
            <TelerikGrid 
                @ref="@GridRef"
                OnUpdate=@UpdateItem
                Data="@S4Records.ToArray()"
                EnableLoaderContainer="true"
                OnRead="@OnGridRead"
                Pageable="true"
                Sortable="true"
                Resizable="true"
                EditMode="@GridEditMode.Incell"
                Size="@ThemeConstants.Grid.Size.Small"
                SelectionMode="@GridSelectionMode.Single"
                SelectedItems="@SelectedRecord"
                ScrollMode="@GridScrollMode.Scrollable">

                <GridToolBarTemplate>
                <span class="k-toolbar-spacer"></span> @* add this spacer to keep the searchbox on the right *@
                    <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
                    <label for="vehicle1">Not Started/Assigned</label>&nbsp
                    <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
                    <label for="vehicle1">In Progress</label>&nbsp
                    <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
                    <label for="vehicle1">Update Complete</label>&nbsp
                    <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
                    <label for="vehicle1">Show Only My Records</label>&nbsp
                    <select name="cars" id="cars">
                        <option value="volvo">100</option>
                        <option value="saab">50</option>
                        <option value="opel">20</option>
                        <option value="audi">10</option>
                    </select>
                    <button >Assign Records</button>

                    <GridCommandButton Command="ExcelExport" Icon="@FontIcon.FileExcel">Export to Excel</GridCommandButton>
                    <GridSearchBox Width="200px"/>
                </GridToolBarTemplate>         

                <GridColumns>
                    <GridColumn Field="@nameof(@S4PSector4UpdateList.geid)"  Width="75px" Title="GEID"  Editable="false" HeaderClass="center-me"/>
                    <GridColumn Field="@nameof(@S4PSector4UpdateList.soeid)" Width="55px" Title="SOEID"  Editable="false" HeaderClass="center-me"/>
                    <GridCommandColumn  Width="45px">
                        <GridCommandButton Command="WorkRecord" OnClick="@WorkRecord" Size="@ThemeConstants.Button.Size.Small">Work</GridCommandButton>
                    </GridCommandColumn>
                    <GridColumn Field="@nameof(S4PSector4UpdateList.primaryfullname)" Width="175px" Title="Full Name" Editable="false" HeaderClass="center-me"/>
                    <GridColumn Field="@nameof(S4PSector4UpdateList.process_name)" Width="80px" Title="Process Name" Editable="false" HeaderClass="center-me"/>
                    <GridColumn Field="@nameof(S4PSector4UpdateList.worked_status)" Width="75px" Title="Status" Editable="false" HeaderClass="center-me"/>
                    <GridColumn Field="@nameof(S4PSector4UpdateList.worked_by_user_soeid)" Width="75px" Title="User SOEID" Editable="false" HeaderClass="center-me"/>
                    <GridColumn Field="@nameof(S4PSector4UpdateList.worked_by_user_date)" DisplayFormat="{0:MM/dd/yyyy}" Title="Worked Date" Width="85px" Editable="false" HeaderClass="center-me"/>
                    <GridColumn Field="@nameof(S4PSector4UpdateList.insertdate)" DisplayFormat="{0:MM/dd/yyyy}" Title="Insert Date" Width="85px" Editable="false" HeaderClass="center-me"/>
                    <GridColumn Field="@nameof(S4PSector4UpdateList.note)" Title="Note" Width="150px" HeaderClass="center-me"/>
                    <GridColumn Field="@nameof(S4PSector4UpdateList.note_added_by)" Width="80px" Title="Added By" Editable="false" HeaderClass="center-me"/>
                    <GridColumn Field="@nameof(S4PSector4UpdateList.note_added_date)" DisplayFormat="{0:MM/dd/yyyy}" Title="Note Date" Width="85px" Editable="false" HeaderClass="center-me"/>
                    <GridColumn Field="@nameof(S4PSector4UpdateList.insertdate)" DisplayFormat="{0:MM/dd/yyyy}" Title="Insert Date" Width="85px" Editable="false" HeaderClass="center-me" />
                    <GridColumn Field="@nameof(S4PSector4UpdateList.sector_4_eligible_group)" Width="130px" Title="Sector 4 Eligible Group" Editable="false" HeaderClass="center-me"/>
                </GridColumns>
            </TelerikGrid>
    }
    @* 👇 Not Visible Components *@
    <DisplayAndLogErrorComponent @ref="displayandlogcomponent"></DisplayAndLogErrorComponent>


@code
{
    [CascadingParameter(Name = "S4pars")] S4CascadingParameters cpar { get; set; }
    [Parameter] public Action Refresh { get; set; }
    List<S4PSector4UpdateList> S4Records { get; set; }
    public TelerikGrid<S4PSector4UpdateList> GridRef { get; set; }
    private DisplayAndLogErrorComponent displayandlogcomponent;
    //public S4PSector4UpdateList SelectedRecord { get; set; }
    public IEnumerable<S4PSector4UpdateList> SelectedRecord { get; set; } = Enumerable.Empty<S4PSector4UpdateList>();
    public int recordcount;

        private async Task OnGridRead(GridReadEventArgs args)
    {
        var result = S4Records.ToDataSourceResult(args.Request);
        args.Data = result.Data;
        args.Total = result.Total;
        recordcount = result.Total;
    }


    protected override async Task OnInitializedAsync()
    {   
        try
        {

            if (cpar.Initialized == true)
            {
                goto finish;
            }

            cpar.Initialized = true;
            goto finish;

        finish:;

            await LoadAllRecords();

        }
        catch (Exception ex)
        {
            displayandlogcomponent.DisplayAndLogError(1, ex, cpar, MethodBase.GetCurrentMethod().DeclaringType.FullName);
        }
        finally
        {
            StateHasChanged();
            Refresh?.Invoke();

        }
    }


    async Task LoadAllRecords()
    {
        try
        {
            await Task.Delay(0);
            var result = await S4GridManager.GetAsync("Select * from wta_application.fn_s4_get_active_records() order by id;");
            S4Records = result.ToList();
        }
        catch (Exception ex)
        {
            displayandlogcomponent.DisplayAndLogError(1, ex, cpar, MethodBase.GetCurrentMethod().DeclaringType.FullName);
        }
        finally
        {
            StateHasChanged();
            Refresh?.Invoke();
        }

    }

    async Task UpdateItem(GridCommandEventArgs args)
    {
        try
        {
            S4PSector4UpdateList item = (S4PSector4UpdateList)args.Item;
            var updated = await S4GridManager.UpdateAsync(item);
            await LoadAllRecords();
            cpar.message = new MessagePars(1, "Record updated successfully!", true);
        }
        catch (Exception ex)
        {
            displayandlogcomponent.DisplayAndLogError(1, ex, cpar, MethodBase.GetCurrentMethod().DeclaringType.FullName);
        }
        finally
        {
            StateHasChanged();
            Refresh?.Invoke(); 
        }

    }

    private async Task WorkRecord(GridCommandEventArgs args)
    {
        try 
        {
            var model = args.Item as S4PSector4UpdateList;

            //Update Table with user soeid and in progress.
            var dictionary = new Dictionary<string, object>
            {
            { "@in_soeid", cpar.authuserinfo.soeid },
            { "@in_id", model.id }
            };
            var parameters = new DynamicParameters(dictionary);
            S4GridManager.ExecuteStoredProcedure("wta_application.sp_s4_work_record", parameters);

            //Update Count Here

            //Copy to clipboard, place success message and select row.
            await js.InvokeVoidAsync("navigator.clipboard.writeText", model.soeid.Trim());
            cpar.message = new MessagePars(1, model.soeid + " copied to clipboard.", true);
            await LoadAllRecords();

            //Highlight the row on the grid they selected
            SelectedRecord = GridRef.Data.Where(x => x.id == model.id).ToList();



        }
        catch (Exception ex)
        {
            displayandlogcomponent.DisplayAndLogError(1, ex, cpar, MethodBase.GetCurrentMethod().DeclaringType.FullName);
        }
        finally
        {
            StateHasChanged();
            Refresh?.Invoke();     
        }
    }

    public void Refreshed()
    {  
        StateHasChanged();
    }




}

We are in search of a word processor component for Blazor, that delivers a user experience comparable to word processors such as Google Docs, DevExpress, or Syncfusion. Our core requirements include features document formatting (page size, orientation, etc), importing docx, saving as docx.

Could you provide insight into whether TelerikEditor, coupled with appropriate word processing libraries, is capable of achieving this level of functionality?

Thank you.

Hello,
i want to bind the autocomplete to a list of object. But the data in the template is empty:

The code is this:

    Kunde:
<TelerikAutoComplete Data="@DataCustomer" TItem="@Customer" ValueChanged="@((string value) => OnComboCustomerValueChanged(value))">
    <ItemTemplate>
        @(nameof(Customer.customerName))
    </ItemTemplate>
    <FooterTemplate>
        <h6>Anzahl: @DataCustomer.Count()</h6>
    </FooterTemplate>
    <NoDataTemplate>
        <div class="no-data-template">
            <TelerikSvgIcon Icon="@SvgIcon.FilesError" Size="@ThemeConstants.SvgIcon.Size.Large"></TelerikSvgIcon>
            <p>No items available</p>
        </div>
    </NoDataTemplate>
</TelerikAutoComplete>

protected override async Task OnInitializedAsync()
{
    List<Customer> customers = new List<Customer>();
    customers.Add(new Customer()
        {
            customerId = "",
            customerName = ""
        });

    DataCustomer = customers;
}

 private void OnComboCustomerValueChanged(string value)
 {
     ComboCustomerValue = value;

     if (value != null && value.Length > 3)
     {
         if (DataCustomer == null)
         {
             List<Customer> Data = new List<Customer>();
         }

         if (DataCustomer.FirstOrDefault(item => item.customerId == value.ToString()) == null)
         {
             IO.Swagger.Api.CustomerApi customerApi = new IO.Swagger.Api.CustomerApi("https://server:8080");
             foreach (var itemsFound in customerApi.ApiV1CustomerIdGet(Convert.ToInt32(value)))
             {
                 if (DataCustomer.FirstOrDefault(item => item.customerId == itemsFound.Id.ToString()) == null)
                 {
                     DataCustomer.Add(new Customer()
                         {
                             customerId = itemsFound.Id.ToString(),
                             customerName = itemsFound.Name + @" (" + itemsFound.Id.ToString() + @")"
                         });
                 }
             }

         }
     }
 }

What have i made wrong?

Kind regards
Jens

Hi,

We currently make use of the heatmap element like this.

Depending on a value we would like to add diagonal lines over some of the boxes like this

There doesn't seem to be an template for the component and I haven't been to add it in as a background/overlay.

Is there any possible way to achieve this?

Hello,

I'm using the PanelBarComponent to navigate between Pages.
Right now I am facing the following problems:

1)
when a page where unsaved user input is detected triggers a user prompt before the location is changed, i.e. 'are you sure ..' this breaks the selection of the panelbar. Wether the users decides to stay on the page or discarcd the changes and confirms the location change the selectedItem is set the last clicked item.

2)
a page containing a link or any other means of a location change, i.e. the location change is not triggered by the clicking the corresponding item on the panelbar also breaks the selection. In this case the selectedItem is not updated at all.

3)
if the user uses a bookmark to navigate to the page the panelbar doesn't show any selection

I'm having trouble with my grid where I am unable to page through my results. I have 200 items in the grid and when I click on any of the buttons on the pager nothing happens. Here is my code 

Bonus points if someone can make me understand why my Tooltip isnt working either lol.

<TelerikGrid class="NewPairsGrid" 
            Data="@Pairs" 
            AutoGenerateColumns="false"       
            RowHeight="15" 
            Height="1000px" 
            Pageable="true"
            PageSize="25"
            
><GridColumns><GridColumn Title="Pair Info" width="200px"><Template Context="dataItem"><div>
                @DisplayTokenImage(dataItem as EthPairTradeInfoVDto)
                @($"{(dataItem as EthPairTradeInfoVDto).TokenSymbol} / {(dataItem as EthPairTradeInfoVDto).LpTokenSymbol} - {(dataItem as EthPairTradeInfoVDto).TokenName}")
            </div></Template></GridColumn><GridColumn Title="Total Price ETH" width="150px"><Template Context="dataItem"><div>
                @FormatPrice(dataItem as EthPairTradeInfoVDto)
            </div><div>
                @if (dataItem is EthPairTradeInfoVDto ethPairTradeInfoVDto)
                {
                    var UsdPrice = ethPairTradeInfoVDto.CurrentPriceUsd.GetValueOrDefault();
                    @if (UsdPrice > 0)
                    {
                        @($"${UsdPrice} USD")
                        ;
                    }
                    else
                    {
                        @("Looking for USD Price.../")
                        ;
                    }
                }
            </div></Template></GridColumn><GridColumn Field="PairCreatedTimeStamp" Title="Token Age" width="75px"><Template Context="dataItem">
            @if (IsLessThanHour(dataItem as EthPairTradeInfoVDto))
            {
                <i class="fas fa-leaf"></i>
            }
            @if (dataItem is EthPairTradeInfoVDto ethPairTradeInfoVDto)
            {
                var timestamp = CalculateElapsedTime(dataItem as EthPairTradeInfoVDto);
                <span class="tooltip-target">@timestamp</span><TelerikTooltip TargetSelector=".tooltip-target" Width="250px" Height="150px" Position="@TooltipPosition.Right"><Template Context="ttipContext"><span>
                            Timestamp: @(ttipContext.DataAttributes)
                        </span></Template></TelerikTooltip>
            }                     
            @* @CalculateElapsedTime(dataItem as EthPairTradeInfoVDto) *@
        </Template></GridColumn></GridColumns></TelerikGrid>