Questions on UI for Blazor Forum

1 answer

309 views

Dock Manager

When can we expect the release of the new dock manager?

Window

updated answer on 12 Sep 2024

1 answer

181 views

Blazor Scheduler Custom Appointment Page with Recurrence

Hi

I have created a custom appointment page, which works fine, but I can't find a simple way to replicate the recurrence functionality of the standard add/edit appointment page. The only information I have been able to find is that I need to completely recreate the functionality, which seems to be a great deal of effort.

Have I missed something? Is it possible to expose the recurrence object?

TIA

Scheduler

answered on 12 Sep 2024

1 answer

76 views

How to perform a checksum on a file on the upload event in the filemanager

Hello, i want to perform a checksum under a memorystream under the uploaded file on the upload event on the filemanager , i need to check if my file is already uploaded then check if the name is the same and so give the user some choice before uplod trully the file
can you give me some docs ? sample

FileManager

answered on 12 Sep 2024

0 answers

69 views

How to enable multiselect in the InCell edit mode?

I have a scenario where I want to enable the multiselect for the Telerik Blazor Grid, using the InCell edit mode.

This is very important for the scenario I'm working with.

I tried to control the selection by my self using a keydown listener in a div that contains the Grid to catch the Control and Shift keys. But, it seems like the Event is not propagated to the div.

Thanks!

Grid

MultiSelect

asked on 11 Sep 2024

1 answer

293 views

Grid Default Sort Order

Hello Telerik,

I want to confirm this is the recommended way to create the Default Sort Order for a Grid.

Thank you.

TelerikGrid Data="@MyData" Sortable="true" AutoGenerateColumns="true"
             OnStateInit="@((GridStateEventArgs<SampleData> args) => OnStateInitHandler(args))">
</TelerikGrid>

@code {
    async Task OnStateInitHandler(GridStateEventArgs<SampleData> args)
    {
        var state = new GridState<SampleData>
        {
            SortDescriptors = new List<Telerik.DataSource.SortDescriptor>
            {
                new Telerik.DataSource.SortDescriptor{ Member = "LastModified", SortDirection = Telerik.DataSource.ListSortDirection.Descending }
            }
        };

        args.GridState = state;
    }

    public IEnumerable<SampleData> MyData = Enumerable.Range(1, 5).Select(x => new SampleData
    {
        Id = x,
        LastModified = new DateTime(2022, x, 28)
    });

    public class SampleData
    {
        public int Id { get; set; }

        public DateTime LastModified { get; set; }
    }
}

Grid

answered on 09 Sep 2024

0 answers

116 views

Gird Column Menu not working

Hello,

I am trying to use the Grid Column Menu and even the most basic example from the docs throws an error or just freezes the page. I am using the latest version of Telerik (6.0.2) I already have other Telerik Grids and components working well in another pages. Here is the link from the docs.

Here is the code in my page:

@page "/tests"
@rendermode InteractiveServer

<h3>Testing</h3>

<TelerikGrid Data="@GridData"
Pageable="true"
PageSize="5"
FilterMode="@GridFilterMode.FilterMenu"
Sortable="true"
ShowColumnMenu="true">
<GridColumns>
<GridColumn Field="@(nameof(SampleData.Id))" Width="80px" />
<GridColumn Field="@(nameof(SampleData.Name))" Title="Employee Name" Groupable="false" />
<GridColumn Field="@(nameof(SampleData.Team))" Title="Team" />
<GridColumn Field="@(nameof(SampleData.HireDate))" Title="Hire Date" />
</GridColumns>
</TelerikGrid>

@code {
private IEnumerable<SampleData> GridData = Enumerable.Range(1, 30).Select(x => new SampleData
{
Id = x,
Name = "name " + x,
Team = "team " + x % 5,
HireDate = DateTime.Now.AddDays(-x).Date
});

public class SampleData
{
public int Id { get; set; }
public string Name { get; set; }
public string Team { get; set; }
public DateTime HireDate { get; set; }
}
}

Grid

asked on 06 Sep 2024

1 answer

140 views

How to create ...(Three Dots) in GridColumn

Hello Telerik,

<TelerikGrid @ref="@GridRef"
             Data="@Generators"
             Pageable="true"
             Sortable="true"
             FilterMode="GridFilterMode.FilterMenu"
             Resizable="true"
             Reorderable="true">
    @*  **************************************** Tool Bar **************************************** *@
    <GridToolBarTemplate>
        
        @* ******** Excel Button *@
        <GridCommandButton Command="ExcelExport" Icon="@SvgIcon.FileExcel">Export to Excel</GridCommandButton>

        @* ******** AutoFill Button *@
        <TelerikButton OnClick="AutoFitAllColumns" >AutoFit All Columns</TelerikButton>

        @* ******** Clear All filters Button *@
        <TelerikButton ThemeColor="primary" OnClick="@ClearGridFilter">Clear Filters</TelerikButton>
    
    </GridToolBarTemplate>

    <GridExport>
        <GridExcelExport FileName="@strExcelFileName" AllPages="@blnExportAllPages"
                         OnBeforeExport="@(()=> { strExcelFileName=CreateExcelFileName(); } )" />
    </GridExport>

   @*  **************************************** Columns **************************************** *@
    
   <GridColumns>
         @* Gen Number is a HyperLink to the Generator Details Page *@
        <GridColumn Field="@nameof(ModtblGenerator.GenName)" Title="Generator Name" />
        <GridColumn Field="@nameof(ModtblGenerator.GenNum)" Title="Gen Number"/> 
        <GridColumn Field="@nameof(ModtblGenerator.Street)" Title="Street" />
        <GridColumn Field="@nameof(ModtblGenerator.City)" Title="City" />
        <GridColumn Field="@nameof(ModtblGenerator.Province)" Title="Province" />
        <GridColumn Field="@nameof(ModtblGenerator.Country)" Title="Country" />
        <GridColumn Field="@nameof(ModtblGenerator.PostalCode)" Title="Postal Code" />
        <GridColumn Field="@nameof(ModtblGenerator.WasteClasses)" Title="Waste Classes" Filterable="false" />
    </GridColumns>
</TelerikGrid>

Grid

answered on 06 Sep 2024

1 answer

86 views

How to extract selected record from TelerikMultiColumnComboBox

Hello Telerik,

How do I feed the selected record from the TelerikMultiColumnComboBox to my custom Component? Do I utilize the ValueMapper="@GetGeneratorRecord" somehow?

Thank you

<ComGenerator Generator="GetGeneratorRecord" />

@page "/"
@inject SerOHRDatabase serOHRDatabase
@using Telerik.DataSource
@using Telerik.DataSource.Extensions

<div>Generator Name Search:</div>

<TelerikMultiColumnComboBox TItem="ModtblGenerator"
                            TValue="int"
                            ValueField="@nameof(ModtblGenerator.Id)"
                            TextField="@nameof(ModtblGenerator.GenName)"
                            Filterable="true"
                            @bind-Value="@intSelectedGenID"
                            ItemHeight="260"
                            ListHeight="28"
                            PageSize="15"
                            ScrollMode="@DropDownScrollMode.Virtual"
                            OnRead="@ReadItems"
                            ValueMapper="@GetGeneratorRecord"
                            Width="250px">

    <MultiColumnComboBoxColumns>
        <MultiColumnComboBoxColumn Field="@nameof(ModtblGenerator.GenName)"
                                   Title="Gen Name"
                                   HeaderClass="header"
                                   Class="genNameCell"
                                   Width="250px"></MultiColumnComboBoxColumn>
        <MultiColumnComboBoxColumn Field="@nameof(ModtblGenerator.GenNum)"
                                   Title="Gen Num"
                                   HeaderClass="header"
                                   Width="150px"></MultiColumnComboBoxColumn>
    </MultiColumnComboBoxColumns>
</TelerikMultiColumnComboBox>

<ComGenerator Generator="GetGeneratorRecord" />

<p>Selected product Id: @intSelectedGenID</p>

@code {

    List<ModtblGenerator> lstGenerators;
    int intSelectedGenID;

    protected async Task ReadItems(MultiColumnComboBoxReadEventArgs args)
    {
        await LoadData();

        var result = lstGenerators.ToDataSourceResult(args.Request);
        args.Data = result.Data;
        args.Total = result.Total;
    }

    private async Task LoadData()
    {
        if (lstGenerators == null)
        {
            lstGenerators = await serOHRDatabase.GetAllGenerators();
        }
    }

    protected Task<ModtblGenerator> GetGeneratorRecord(int intSelectedGenID)
    {
        return Task.FromResult(lstGenerators.FirstOrDefault(x => x.Id == intSelectedGenID));
    }
}

<style>
    .header {
        font-weight: bold;
        color: black;
    }

    .genNameCell {
        color: darkblue;
        font-weight: bolder;
    }
</style>

ComboBox

answered on 06 Sep 2024

1 answer

106 views

How can I create a better looking notification?

I would like to create a notification that looks like this.

I like that it has a header and a body. Also that the alert color is bound to the icon

As I see it I need some container elements to pull it off, but I am in no way a css expert 😉

here is the html generated by Telerik

<div class="k-notification k-notification-secondary k-notification-closable">
  <span class="k-notification-status k-icon k-svg-icon k-svg-i-info-circle">
    <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
      <path d="M288 352h32v32H192v-32h32v-96h-32v-32h96zm0-224h-64v64h64zm192 128c0 123.7-100.3 224-224 224S32 379.7 32 256 132.3 32 256 32s224 100.3 224 224m-32 0c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192">
      </path>
    </svg>
  </span>
  <div class="k-notification-content">
    Notification
  </div>
  <span class="k-notification-actions">
    <span class="k-notification-action k-notification-close-action">
      <span class="k-icon k-svg-icon k-svg-i-x">
        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
          <path d="M416 141.3 301.3 256 416 370.7 370.7 416 256 301.3 141.3 416 96 370.7 210.7 256 96 141.3 141.3 96 256 210.7 370.7 96z">
          </path>
        </svg>
      </span>
    </span>
  </span>
</div>

Overview of the Notification Component | Design System Kit (telerik.com)

Also a nice looking toast Blazor Toasts Component (blazorbootstrap.com)

Notification

answered on 05 Sep 2024

1 answer

63 views

Disabled Dates not honored with date range

Using the following example: https://blazorrepl.telerik.com/mIODuTlt02gFnIYp00

What I am trying to accomplish is the following:

I want the user to be able to pick a start date and end date using the range selector, if there are disabled dates between the range, the range should not be accepted since one or more of the dates are disabled.

Calendar

answered on 05 Sep 2024