Questions on UI for Blazor Forum

1 answer

102 views

is there a way that telerik menu after click menu item change color?

Hi,

is there a way to use css to change the telerik menu item border or color when user click on it. After user click on other menu item, the existing old menu item color will remove and the new selected menu item will change the color.

Menu

answered on 15 Apr 2024

0 answers

982 views

Blazor 8 - Error: Microsoft.JSInterop.JSException: Could not find 'TelerikBlazor.initMediaQuery'

Hello,

I have followed the Blazor 8 Getting started instructions but am getting the error Error: Microsoft.JSInterop.JSException: Could not find 'TelerikBlazor.initMediaQuery'.

I have double checked that the <script src="_content/Telerik.UI.for.Blazor/js/telerik-blazor.js"></script> is in the <head> of the app.razor

i have double checked that the builder.Services.AddTelerikBlazor(); is in the program.cs

and I have the

in the root layout component MainLayout.razor.

This error causes my stylesheets not to load. Occasionally the page will load with the stylesheets, but if a clear the cache or do a CTRL-SHIFT-R, I will get the error and my styles will unload.

HALP!

General Discussions

asked on 12 Apr 2024

0 answers

98 views

Custom behavior in forms having a model with complex types collections

Hello,

I'm working on a .NET8 Blazor webapp with some InteractiveAutoRenderMode. I'm trying to figure out how to code the HTML/Razor in a Blazor component to be able to display a pair of inputs and then bind a collection of a complex type.
I also want the possibility for the user to add more instances to the collection within the UI/component by being able to add more inputs (through a button click) before submitting the form.

I am not sure how to capture the properties inside the complex type collection for the FieldIdentifier instance usually helping with binding and validation? And then how would that work within a loop for the user to be able to add more instances to the collection?

FieldIdentifier.Create(() => NewProductOfferModel!.LimitedAvailabilities[0].LimitedAvailabilityStartTime)

The HTML for the pair of inputs looks like this:

ManageProductOffer.razor :

<div class="input-group">
    <label for="@($"""idAvailabilityStartInput""")">
        <input type="datetime-local" id="@($"""idAvailabilityStartInput""")" name="fAvailabilityStart"
                step="any" min="@(TimeProvider.GetLocalNow().LocalDateTime.ToString(SortableDateTimePatternFormat))"
                class="@(ApplyStyleForValidationState(FieldIdentifier.Create(() => NewProductOfferModel!.LimitedAvailabilities)))"
                value="@(NewProductOfferModel!.LimitedAvailabilities[0].LimitedAvailabilityStartTime.ToString(SortableDateTimePatternFormat))"
                @onchange=@(changeEventArgs => TryBindAndValidateField(
                    changeEventArgs: changeEventArgs,
                    fieldIdentifier: FieldIdentifier.Create(() => NewProductOfferModel!.LimitedAvailabilities[0].LimitedAvailabilityStartTime),
                    validationDelegate: () => LimitedAvailability.ValidateLimitedAvailability(NewProductOfferModel!.LimitedAvailabilities[0]))) />
    </label>

    <label for="@($"""idAvailabilityEndInput""")">
        <input type="datetime-local" id="@($"""idAvailabilityEndInput""")" name="fAvailabilityEnd"
                step="any" min="@(TimeProvider.GetLocalNow().LocalDateTime.ToString(SortableDateTimePatternFormat))"
                class="@(ApplyStyleForValidationState(FieldIdentifier.Create(() => NewProductOfferModel!.LimitedAvailabilities)))"
                value="@(NewProductOfferModel!.LimitedAvailabilities[0].LimitedAvailabilityEndTime.ToString(SortableDateTimePatternFormat))"
                @onchange=@(changeEventArgs => TryBindAndValidateField(
                    changeEventArgs: changeEventArgs, 
                    fieldIdentifier: FieldIdentifier.Create(() => NewProductOfferModel!.LimitedAvailabilities[0].LimitedAvailabilityEndTime),
                    validationDelegate: () => LimitedAvailability.ValidateLimitedAvailability(NewProductOfferModel!.LimitedAvailabilities[0]))) />
    </label>
    <small class="">
        <ValidationMessage For="@(() => NewProductOfferModel!.LimitedAvailabilities[0])" />
    </small>
</div>

And the code for the model with the complex type collection looks like this:

ProductOfferModel.cs :

public sealed record class ProductOfferModel
{
    public Guid ID { get; init; } = Guid.NewGuid();
    public String ProductOfferDescription { get; set; } = String.Empty;
    public Guid ProductID { get; set; } = Guid.Empty;
    public String ProductDescription { get; set; } = String.Empty;
    public List<LimitedAvailability> LimitedAvailabilities { get; set; } = [new LimitedAvailability()];
}

public sealed record class LimitedAvailability
{
    public Guid ID { get; init; } = Guid.NewGuid();
    public DateTime LimitedAvailabilityStartTime { get; set; } = DateTime.MinValue;
    public DateTime LimitedAvailabilityEndTime { get; set; } = DateTime.MinValue;

    internal static Boolean ValidateLimitedAvailability( LimitedAvailability limitedAvailability )
    {
        ArgumentNullException.ThrowIfNull(limitedAvailability);

        return limitedAvailability.LimitedAvailabilityStartTime < limitedAvailability.LimitedAvailabilityEndTime ?
            true
            : false;
    }
}

The (microsoft documentation) mentions supporting complex type and be able to nest and bind, however it does not seems to mention how to capture the FieldIdentifier accessor for a property inside complex type to customize @onchange or @oninput behavior for example.

Anyone has been solving something similar with using collections of complex types and letting the user add more inputs to the form before submit?

DateInput

Form

asked on 12 Apr 2024

1 answer

311 views

Window vs Dialog Component

Can you explain the differences between the Dialog vs the Window Component? And maybe give an example of when you should use one over the other?

IN their current form, they seem pretty similar in implementation and functionality if you put aside the predefined dialogs.

Dialog

Window

answered on 12 Apr 2024

1 answer

349 views

How do I add preventDefault to TelerikButton

I have a button inside of a form that I need to prevent from submitting the form when clicked. How can I add the following to a TelerikButton?

@onclick:preventDefault="true"

@onclick:stopPropagation="true"

Form

answered on 12 Apr 2024

1 answer

58 views

Editor - How to put the "Alignment" buttons into a dropdownlist in the toolbar

I'd like to move all of the Alignment buttons (along with indent and outdent) into a dropdownlist in the toolbar, so they won't take up as much space. I've tried adding my own custom dropdownlist, but the items I put in it did nothing. Is there a way to accomplish this?

Editor

answered on 12 Apr 2024

1 answer

82 views

Introducing OnRead causes refresh to no longer work.

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();
}

}

Grid

answered on 12 Apr 2024

1 answer

221 views

Add support for Hijri dateTime in Calendar , datepicker and dateRangepicker components

isn't an update coming for supporting Hijri DateTime or at least changing the Locale and DateTime based on Culture?

answered on 12 Apr 2024

1 answer

58 views

Blazor Word processor

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.

Editor

answered on 12 Apr 2024

3 answers

207 views

How to configure autocomplete / Bind to a list of objeckt

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

AutoComplete

answered on 12 Apr 2024