Hello,
Is it possible to use the UI for Blazor within a Razor class library?
We have a project where we need to have multiple reusable component libraries that will ideally be based on UI for Blazor, in our current tests we add the nuget package to the Razor class library and it fails to be recognised when trying to consume the namespaces. Also we need to share the App between Server and Client Blazor, once again requiring the UI for Blazor to be with a shared razor library.
Thanks,
Andy.
Hi,
I am trying to run a blazor server side component inside a razor view page.
So the razor view is this:
<div class="wrapper"> @await Html.PartialAsync("_farmMenu", new PfmsWeb.Areas.Shared.ActiveMenu("PickupSequence")) <div id="main" class="sidebar-page main"> <component type="@typeof(PfmsWeb.Components.Harvest.PickupSequence.PickupSequenceShell)" render-mode="ServerPrerendered"/> </div></div>
And the PickupSequenceShell.razor file looks like this:
<TelerikRootComponent>Shell Started<br/><Counter/></TelerikRootComponent>
However, when running the application the counter is not rendered at all. If I reference the counter directly from the razor view it does work. There must something in my understanding that is stopping this from working properly. It cannot be the blazor js as like I said I can run the counter directly from the razor view.
This is a very large application so I cannot easily just bring the entire thing into blazor server side, I have to host little blazor server side apps inside the razor views refactoring parts of the application as I go.
Has anyone managed to get a hybrid app working on dotnet core with controllers and views?
Hi there,
I need the same fuctionality of the "Add" command of the grid's toolbar but using a button located anywhere in the page. Is this possible?
<GridToolBar> <GridCommandButton Command="Add" Icon="add">Add Item</GridCommandButton></GridToolBar>Thank you.
We are evaluation the blazor controls from telerik and would like to know few things.
1. Is it possible to implement fluent validation as part of the object validation as done here? https://blog.stevensanderson.com/2019/09/04/blazor-fluentvalidation/
I tried doing this but it would not catch the validation
<EditForm Model="@selectedBuildingModel" OnValidSubmit="@Save">
<FluentValidator TValidator="BuildingModelValidator" />
<div class="form-row">
<div class="col">
<TelerikTextBox @bind-Value="@selectedBuildingModel.Name" Label="First Name"></TelerikTextBox>
<ValidationMessage For="@(() => selectedBuildingModel.Name)" />
</div>
</div>
<div class="form-row">
<ValidationSummary />
<TelerikButton Icon="save" Primary="true" ButtonType="@ButtonType.Submit">Save</TelerikButton>
<TelerikButton Icon="cancel" OnClick="@ClearSelection" ButtonType="@ButtonType.Button">Cancel</TelerikButton>
</div>
</EditForm>
public class BuildingModelValidator : AbstractValidator<BuildingModel>
{
public BuildingModelValidator()
{
RuleFor(x => x.Name).NotEmpty().MaximumLength(5);
}
}
2. When will the upload control be available (even if its insiders, we just wanna see how it works)?
Thank you
Is there a way to set a password char on the blazor textbox?
Thanks … Ed
I have just tested Telerik sample code from :
https://demos.telerik.com/blazor-ui/dropdownlist/overview
@page "/dropdownlist/overview"
@page "/dropdownlist/index"
@using TelerikBlazorDemos.Shared
<div class="example-box-wrapper">
<div class="example">
<div class="mb-4">T-Shirt size:</div>
<TelerikDropDownList Data="@Data"
@bind-Value=@SelectedSizeMetric
PopupHeight=""
DefaultText="Select your T-shirt size"
ValueField="SizeMetric" TextField="SizeText">
</TelerikDropDownList>
</div>
<div class="ml-4">
Selected Size Number: <strong>@SelectedSizeMetric</strong>
</div>
</div>
@code {
public IEnumerable<Size> Data { get; set; }
public bool AllowCustom { get; set; } = true;
public int? SelectedSizeMetric { get; set; }
public string SelectedSize { get; set; }
public class Size
{
public string SizeText { get; set; }
public int? SizeMetric { get; set; }
}
protected override void OnInitialized()
{
List<Size> sizes = new List<Size>();
sizes.Add(new Size()
{
SizeText = "X-Small",
SizeMetric = 3
});
sizes.Add(new Size()
{
SizeText = "Small",
SizeMetric = 6
});
sizes.Add(new Size()
{
SizeText = "Medium",
SizeMetric = 8
});
sizes.Add(new Size()
{
SizeText = "Large",
SizeMetric = 10
});
sizes.Add(new Size()
{
SizeText = "X-Large",
SizeMetric = 12
});
Data = sizes.AsQueryable();
base.OnInitialized();
}
}
It works fine as it is.
But if I change:
ValueField="SizeMetric" //int type
for:
ValueField="SizeText" //string type
it nolonger works... I get: System.InvalidCastException : 'Unable to cast object of type 'System.String' to type 'System.Nullable`1[System.Int32]'.'
The telerik doc (https://docs.telerik.com/blazor-ui/components/dropdownlist/overview) specifies:
The Value and ValueField can be of types:
number (such as int, double and so on)
string
Guid
Enum
I have added Component in <TelerikGrid>/<GridColumn>/<Template>. Grid is loading based on data in a text field. All columns are getting update except column having component.
<GridColumns> <GridColumn Field="@(nameof(Fee.FEE_ID))" Title="STD"> <Template> @{ Fee Fee = context as Fee; <RTP_SMS.Pages.Components.CompStdNN id="@Fee.FEE_ID"></RTP_SMS.Pages.Components.CompStdNN> } </Template> </GridColumn> </GridColumns>
I am using the DataSourceRequest.ToODataString() but the resulting request to my OData is case sensitive. I have seen examples of the $filter clause that uses the OData tolower method to give case-insensitive search.
For example, the following calls to me ASP.NET Core 3.1 / Microsoft.AspNetCore.Odata v7.3.0 API all return the same result set;
https://myapi/v1/accounts?$filter=contains(tolower(AccountName),tolower('eng'))&$top=2&$skip=0&$count=true
https://myapi/v1/accounts?$filter=contains(tolower(AccountName),tolower('Eng'))&$top=2&$skip=0&$count=true
https://myapi/v1/accounts?$filter=contains(tolower(AccountName),tolower('eNg'))&$top=2&$skip=0&$count=true
Is there a way to modify your DataSourceRequest.ToODataString to support this type of client site modification so I can use it to do case-insensitive filters?