Query 1: How to
create a custom numeric component using SfNumericTextBox?
Find the custom numeric text box component rendering here:
[parent
component]
|
@typeparam TVal;
<SfNumericTextBox
Value="@Value" ValueChanged="ValueChanged" ValueExpression="@ValueExpression" TValue="TVal">
</SfNumericTextBox>
@code
{
private TVal _value { get; set; }
[Parameter]
public string ID { get; set; }
[Parameter]
public Expression<Func<TVal>> ValueExpression { get; set; }
[Parameter]
public TVal Value
{
get => _value;
set
{
if (!EqualityComparer<TVal>.Default.Equals(value, _value))
{
_value = value;
ValueChanged.InvokeAsync(value);
}
}
}
[Parameter]
public EventCallback<TVal> ValueChanged { get; set; }
}
|
[child component]
|
<CustomTextbox
TVal="int?" @bind-Value="@NumericValue"></CustomTextbox>
@code {
public int? NumericValue { get; set; }
}
|
Query 2: I used
SfAutoComplete. I introduced a list of numbers as DataSource. How do we allow
the user to type only a number?
You can achieve
your requirement by setting the type attribute as a number by using the HtmlAttributes
property.
Find the code
example here:
|
@using
Syncfusion.Blazor.DropDowns
@using System.Collections.Generic
<SfAutoComplete
TValue="string"
TItem="Country" Placeholder="e.g.
Australia" DataSource="@Countries" HtmlAttributes="@TypeChange">
<AutoCompleteFieldSettings Value="Name"></AutoCompleteFieldSettings>
</SfAutoComplete>
@code {
Dictionary<string, object> TypeChange = new Dictionary<string, object>()
{
{ "type", "number"} };
public class Country
{
public int Name { get; set; }
public int Code { get; set; }
}
List<Country> Countries = new List<Country>
{
new Country() { Name = 1, Code = 1 },
new Country() { Name = 2, Code = 2 },
new Country() { Name = 3, Code = 3 },
new Country() { Name = 4, Code = 4 }
};
}
|
Find the sample
in the attachment:
Attachment:
CustomControls_670c278e.zip
