Questions on UI for Blazor Forum

1 answer

310 views

.NET 8 BlazorWebApp (All Rendering Modes) - TelerikRootComponent

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!

Dialog

DropDownList

General Discussions

Menu

Window

answered on 11 Dec 2023

1 answer

39 views

Change Theme

How can I add dropdowlist for changing theme in my project like for demos Blazor UI components.

Thanks

Peter

DropDownList

General Discussions

answered on 18 Sep 2023

1 answer

86 views

Need Multi selection control functionality in combo look

Need Multi selection control functionality in combo look means i need to put arrow icon with multi select telerik control and on click of that icon will appear the list box for selection as like in combo/dropdown control

DropDownList

General Discussions

MultiSelect

answered on 18 May 2023

1 answer

525 views

Access to Blazor components' source code

I recall being told I would have access to source code once I buy a licence.

Now that I have a licence, how do I get access to the source so I can do a local build?

answered on 30 Dec 2022

1 answer

237 views

Telerik in Blazor Server vs WASM

Hello,

This v2.26.0 drop down:

        <div class="flex-child">
            <label for="warehouse" class="k-label k-form-label">Warehouse</label>
            <TelerikDropDownList Data="@Warehouses" DefaultText="Select a Warehouse"
                                 Id="warehouse"
                                 TextField="WarehouseName"
                                 ValueField="WarehouseId"
                                 ValueChanged="@((int w) => WarehouseSelected(w))" />
        </div>

...is working in a Blazor WASM app (well, I'm having issues overriding css classes used by Telerik controls, but that's another topic).

Here it is, working OK in Blazor WASM:

However, using the same code in a Razor component in a Blazor-Server project, I am not getting the control rendered properly:

I have your script declared in the head part of _Host.cshtml (see below). I'm really not sure about this, and I have moved it around , removed "defer", deleted bin and obj folders and cleared the cache, but to no avail.

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CalendarDemo.UI</title>
    <base href="~/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="css/site.css" rel="stylesheet" />
    <link href="CalendarDemo.UI.styles.css" rel="stylesheet" />
    <link href="css/CustomStyles.css" rel="stylesheet" />
    <script src="_content/Telerik.UI.for.Blazor/js/telerik-blazor.js" defer></script>

</head>

Looking at the dev tools, I do see the above script is making it to the page:

This is a mystery to me so far. I am not seeing any exceptions being raised.

Any suggestions for further troubleshooting? Thanks again!

DropDownList

General Discussions

answered on 17 Aug 2021

0 answers

224 views

Value is Not Changing when Dynamic Create Telerik ComboBox or DropDownList

Dears ,

Because of some reason , I need to Customer Telerik Blazor Componet into Custome Componet and then Render it in Dynamic Ways ,

Like This .

FabCombobox.razor (Componet)

@typeparam T
@typeparam TResource
<div class="row"><label class="col-md-2">@Label</label><div class="col-md-5"><TelerikComboBox Value="@ResultValue" Data="@Resource" Placeholder="@Placeholder" Filterable="@Filterable"
                             TextField="@TextField" ValueField="@ValueField" Enabled="@Enabled" Id="@ID" Width="100%"
                             ValueChanged="@ResultValueChanged"></TelerikComboBox></div></div>

@code {
    [Parameter] public bool bBindData { get; set; } = false;
    [Parameter] public string Label { get; set; }
    [Parameter] public T ResultValue { get; set; }
    [Parameter] public List<TResource> Resource { get; set; }
    [Parameter] public string Placeholder { get; set; } = "Select Item";
    [Parameter] public bool Filterable { get; set; } = false;
    [Parameter] public string Width { get; set; } = "100%";
    [Parameter] public string TextField { get; set; }
    [Parameter] public string ValueField { get; set; }
    [Parameter] public bool Enabled { get; set; }
    [Parameter] public string ID { get; set; } = "TelerikComboBox" + Guid.NewGuid().ToString();
    [Parameter] public EventCallback<T> ResultValueChanged { get; set; }

}

DynamicTable.Razor (Componet)

@using System.Linq.Expressions
<div class="card">
    <div class="card-body">
        @foreach (var item in Contents)
        {
            @item
            ;
        }
    </div>
</div>


@code {
    [Parameter]
    public List<Blazor_Dynamic.Shared.FabComponet> Componets { get; set; }

    public List<RenderFragment> Contents { get; set; }

    protected override void OnInitialized()
    {
        if (Componets.Count() > 0 && Componets != null)
        {
            CreateFragment();
        }

        base.OnInitialized();
    }
    public void CreateFragment()
    {
        int iComponent = 0;
        List<RenderFragment> RFTs = new List<RenderFragment>();
        foreach (var area in Componets)
        {

            RenderFragment renderFragment = (builder) =>
            {
                object o = new object();


                builder.OpenComponent(iComponent, area.Type);
                int iDic = 0;
                foreach (var item in area.Dic)
                {
                    builder.AddAttribute(iDic, item.Key, item.Value);
                }
                builder.CloseComponent();
            };
            RFTs.Add(renderFragment);
        }
        Contents = RFTs;
    }
}

DynamicConnect.razor (Page)

@page "/DynamicConnect"
<h3>DynamicConnect</h3>

@inject IProductRepository IProductRepo

<DynamicTable Componets="@liComponets"></DynamicTable>


<p> @CurrentType </p>
<p> @CurrentProduct </p>


@code {
    public List<Product> products { get; set; }
    public List<Selection> productTypes { get; set; }
    private Selection productType { get; set; }
    public Product product { get; set; }
    private string CurrentType { get; set; }
    private Guid? CurrentProduct { get; set; }
    private string sFullProductInfo { get; set; }
    public List<FabComponet> liComponets { get; set; }

    public class Selection
    {
        public string id { get; set; }
        public string text { get; set; }
    }
    protected override void OnInitialized()
    {
        products = IProductRepo.GetProducts();
        productTypes = (from w in products group w by w.Type into g select g.First()).Select(x => new Selection { id = x.Type, text = x.Type }).ToList();


        List<FabComponet> FCs = new List<FabComponet>();
        var dic = new Dictionary<string, object>();
        dic.Add("Label", "Product Category");
        dic.Add("Resource", productTypes);
        dic.Add("ResultValue", CurrentType);
        dic.Add("Placeholder", "Select Somthing??");
        dic.Add("TextField", "id");
        dic.Add("ValueField", "text");
        dic.Add("Filterable", false);
        dic.Add("Enabled", true);
        dic.Add("Id", "cbxType");
        dic.Add("Width", "100%");
        dic.Add("ResultValueChanged", EventCallback.Factory.Create<System.String>(this, str => TypeSelected(str)));

        FabComponet First = new FabComponet() { Type = typeof(FabComboBox<string,Selection>), Row = "1", Length = "6", Seq = "1", Dic = dic };
        FCs.Add(First);

        var dic2 = new Dictionary<string, object>();
        dic2.Add("Label", "Product");
        dic2.Add("Resource", products);
        dic2.Add("ResultValue", CurrentProduct);
        dic2.Add("ValueField", nameof(Product.ID));
        dic2.Add("TextField", nameof(Product.ProductName));
        dic2.Add("Filterable", false);
        dic2.Add("Enabled", (CurrentType != null));
        dic2.Add("Id", "cbxProduct");
        dic2.Add("Width", "100%");
        dic2.Add("ResultValueChanged", EventCallback.Factory.Create<Nullable<System.Guid>>(this, x => ProductSelected(x)));
        FabComponet Sec = new FabComponet() { Type = typeof(FabComboBox<Nullable<Guid>,Product>), Row = "1", Length = "6", Seq = "1", Dic = dic2 };
        FCs.Add(Sec);

        liComponets = FCs;

        base.OnInitialized();
    }
    public void TypeSelected(string SelectionType)
    {
        products = IProductRepo.GetProductsByType(SelectionType);
        productType = productTypes.Where(x => x.id == SelectionType).First();
        CurrentType = SelectionType;
    }
    public void ProductSelected(Guid? SelectionProduct)
    {
        CurrentProduct = SelectionProduct.HasValue ? SelectionProduct.Value : null;
        product = products.Where(p => p.ID == SelectionProduct).First();
    }
}