Hi,

I'm currently evaluating Telerik UI for Blazor using the new .NET 8 capabilities. 

I'm trying to have static pages (using the default SSR mode) with interactive islands of individual components on the page using RenderMode.InteractiveAuto

Looking at the setup documentation here https://docs.telerik.com/blazor-ui/getting-started/web-app#43-add-the-telerikrootcomponent it says that it's possible to set it only for specific pages and components, but then it says that <TelerikRootComponent> needs to wrap the entire view port (i.e. the whole <div class="page">)

Is there a way to create interactive islands at a component level with Telerik UI for Blazor?

Thanks

Hi, I want to be able to open the dropdown of the AutoComplete component upon focus of the input field.
I found this can be done with a workaround using Js interop:
https://docs.telerik.com/blazor-ui/knowledge-base/inputs-open-programmatically

However, I feel this functionality should be supported out of the box through some 'OpenOnFocus' parameter on the component.
It would be a very welcome improvement!

Kind regards,

Lennert

I have just for the first time tried server side paging and filtering using the ToDataSourceResultAsync extension.

This works REALLY well.

The only problem I have, is that I can't filter and sort on computed values in my view model as I can when all data manipulation is on the wasm client.

Can I somehow mix server and client sorting? I would like to filter the current page on a field's not in the database. So not another roundtrip only the data on the client.

UPDATE

I am adding filters on the client. It works but the resulting sql uses AND, should be OR

On the client:

private async Task OnReadHandler(GridReadEventArgs arg)
    {
        Query.GridRequest = arg.Request;
        var request = Query.GridRequest;
        var searchBoxFilter = request.Filters.SelectMemberDescriptors().Where(x => x.Member == "ProductName").ToList();
        if(searchBoxFilter.Any())
        {
            var clientFilter = new FilterDescriptor{Member = "ClientName", Operator = FilterOperator.Contains, Value = searchBoxFilter.First().Value.ToString()};
            request.Filters.Add(clientFilter);
            var initialsFilter = new FilterDescriptor{Member = "UserInitials", Operator = FilterOperator.Contains, Value = searchBoxFilter.First().Value.ToString()};
            request.Filters.Add(initialsFilter);
        }
        
        var envelope = await TradeOverviewService.GetCertificateTradeRequestsForTradeOverView(Query);
        arg.Data = envelope.CurrentPageData.ToList();
        arg.Total = envelope.TotalItemCount;
    }

Part of the sql

  FROM "IBEX"."V_CERTIFICATE_TRADE_REQUEST" "v"
    WHERE (("v"."FLOW_TYPE" NOT IN (8, 10)) AND ((((LOWER("v"."PRODUCT_NAME_INTERNAL") LIKE '%sydbank%') AND (LOWER("v"."CLIENT_NAME") LIKE '%sydbank%')) AND (LOWER("v"."USER_INITIALS") LIKE '%sydbank%'))))
    ORDER BY "v"."TRADE_DATE" DESC
    OFFSET :p_0 ROWS FETCH NEXT :p_1 ROWS ONLY

So can I create the filters so the resulting sql will be.

  FROM "IBEX"."V_CERTIFICATE_TRADE_REQUEST" "v"
    WHERE (("v"."FLOW_TYPE" NOT IN (8, 10)) AND ((((LOWER("v"."PRODUCT_NAME_INTERNAL") LIKE '%sydbank%') OR (LOWER("v"."CLIENT_NAME") LIKE '%sydbank%')) OR (LOWER("v"."USER_INITIALS") LIKE '%sydbank%'))))
    ORDER BY "v"."TRADE_DATE" DESC
    OFFSET :p_0 ROWS FETCH NEXT :p_1 ROWS ONLY

Hi all,

I've been trying to get new Blazor projects off the ground with Telerik 4.4, and had some luck with WASM but unfortunately Blazor Server I cannot get to work.

I have kept my projects simple, following the guidance set out in the Getting Started articles but every time run into the same error in the web client.

Error: Microsoft.JSInterop.JSException: Maximum call stack size exceeded
RangeError: Maximum call stack size exceeded
    at e.deepExtend (https://localhost:7144/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:50:1075205)
    at e.deepExtend (https://localhost:7144/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:50:1075502)
    at e.deepExtend (https://localhost:7144/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:50:1075440)
    at e.deepExtend (https://localhost:7144/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:50:1075440)
.... (repeats)

   at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
   at Telerik.Blazor.Components.TelerikMediaQuery.InitMediaQueryWidget()
   at Telerik.Blazor.Components.TelerikMediaQuery.OnAfterRenderAsync(Boolean firstRender)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

This stops any Telerik components from working, and leaves me a bit stuck!

Anyone seen similar? Or know of a workaround?

Only available template is "Blank" all other templates are disabled. When I change TARGET FRAMEWORK to .NET7 all other templates are available.

When will this feature will be available for .NET8?

Regards,

Djole

We have observed that the greater the number of time slots displayed, the greater the displacement of the start of the appointment with respect to the start time. What can i do?

An example in https://blazorrepl.telerik.com/cxPQvRvP36cnvfYz59

Thanks in advance,

Nelson

How do I set the background on the dropdown? 

<div class="container">
    <div class="row justify-content-md-end text-light gsi-background-color-darkgray">

        <div class="col">
        </div>
        <div class="col-md-auto">
            <TelerikMenu Data="MenuItems" 
                OnClick="@((TelerikMenuItem item) => OnMenuClicked(item))">
            </TelerikMenu>
        </div>
    </div>
</div>

    public class TelerikMenuItem
    {
        public string Text { get; set; }
        public bool Disabled { get; set; }
        public bool Separator { get; set; }
        public string Url { get; set; }
        public IEnumerable<TelerikMenuItem> Items { get; set; }
    }

I made my first datagrid.  I created very simple code just to get some data and to show it in the grid. Result is unacceptable. I attached a .png file to explain what I mean.

Code looks like this:

@page "/brorg"

@using BezraSrv
@using BezraSrv.Models

<h3>Brorg</h3>

<TelerikGrid Class="grid"
             Data=@bRORG
             Sortable="true"
             FilterMode="GridFilterMode.FilterMenu"
             ScrollMode="GridScrollMode.Virtual"
             Height="480px" RowHeight="60"
             PageSize="10"
             Size="@ThemeConstants.Grid.Size.Small">
    <GridColumns>
        <GridColumn Field="@nameof(BezraSrv.Models.BRORG.ORGID)" Title="Org. id"></GridColumn>
        <GridColumn Field="@nameof(BezraSrv.Models.BRORG.NAZIV)" Title="Naziv"></GridColumn>
    </GridColumns>
</TelerikGrid>

<style>
    .width-100 {
        width: 100%;
    }
    .grid .k-grid-content tr {
        line-height: 32px;
    }
</style>

@code {
    [Inject]
    public DataService DataService { get; set; }

    protected IEnumerable<BezraSrv.Models.BRORG> bRORG;

    protected override async Task OnInitializedAsync()
    {
        bRORG = await DataService .GetBRORG();
    }
}

Is there a plan to fix this in the long term? The "work-around" listed in your documentation, Configure the Render Mode per Page found at https://docs.telerik.com/blazor-ui/getting-started/web-app#configure-the-render-mode-per-page technically functions as the root component error goes away and site starts working... 

However, it misses the bigger issue in that it now loads the entire page including all of the layout code and components, re-executing them as well... put some components in the TelerikLayout and add break points to the OnInit functions to see what I am referring to. It will now do this for every single page in application now...

So... to my initial question... what is the plan to fix/address the TelerikRootComponent in the multiple rendering mode world that is .NET 8 now?

I will say it looks like the Blazor team added a new concept of using builder.Services.AddCascadingValues() to address this problem, I have used it with our internal RootComponent to fix this same concept with our internal code... thoughts?

builder.Services.AddTelerikCascadingParameters(); is referenced at url below:

https://github.com/dotnet/aspnetcore/issues/50724 by SteveSandersonMS, I realize he was just throwing out an idea, the above line of code doesn't actually exist to my knowledge, at least not yet... :)

Thanks in advance!

I'm  using telerik grid blazor and datatable as datasource properties like filtering,sorting are working but when i enable grouping it loads and does not provide me a grouping data.

Is there any solution for this?