Questions on UI for Blazor Forum

1 answer

6 views

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

7 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

8 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

6 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

0 answers

5 views

High z-index k-tooltip held in low z-index k-animation-container

In Telerik themes, we see this z-index on .k-tooltip. This would put it comfortably above some other high z-index values we had to use.

.k-tooltip {

z-index: 12000;

}

However, it's held within a div class="k-animation-container telerik-blazor" which has low z-index such as 3 or 11. This puts it below our z-index, which might be in the 900s. Was there a reason this k-animation-container z-index was so low?

Tooltip

asked on 05 Sep 2024

1 answer

12 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

7 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