Questions on UI for Blazor Forum

1 answer

59 views

TelerikCheckBox how to make the checkbox bolder?

On my page I have:

and I put the following at the bottom of the page:

.k-checkbox {
/* Make the border a little darker than the default */
border-color: rgba(0, 0, 0, 0.4) !important;
}

The checkboxes box appears just as i want it.

But I now want that for my whole project. This is were I am having an issue my entry in the app.css seems to be ignored and I am not sure why.

App.css:

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<base href="@MyNavigationManager.BaseUri" />

<link rel="stylesheet" href="bootstrap/bootstrap.min.css" />

<link rel="stylesheet" href="MarginAnalysis.styles.css" />
<link rel="icon" type="image/png" href="favicon.png" />
<HeadOutlet @rendermode="InteractiveServer" />

@* Telerik Stuff *@
<script src="_content/Telerik.UI.for.Blazor/js/telerik-blazor.js"></script>
<link rel="stylesheet" href="_content/Telerik.UI.for.Blazor/css/kendo-theme-default/all.css" />
@* Needed for the Telerik 5.0.0 icons! *@
<link href="https://blazor.cdn.telerik.com/blazor/5.0.0/kendo-font-icons/font-icons.css" rel="stylesheet" type="text/css" />

<link rel="stylesheet" href="app.css" />
</head>

I put the App.ccs at the end. As far as I understand it that should make it work above teleriks theme css.

What am I missing?

Thanks

Deasun.

Checkbox

answered on 06 Feb 2025

0 answers

39 views

Highlight row on rightclick in Treelist

We were using the TelerikTreeList with

SelectionMode="TreeListSelectionMode.Single"
SelectedItems="@SelectedItems"

with a ContextMenu. On Rightclick we wanted to open the ContextMenu but also set the row as Selected.

If a row is selected and we rightclick on another one both will be selected. We don;t know exactly why and did not expect two rows to ever be selected after setting the SelectionMode to single.

this is the code we use for selecting on right click.

private async Task OnContextMenu(TreeListRowClickEventArgs args)
{
    SelectedItems = [(TItem)args.Item];
    await InvokeAsync(StateHasChanged);

Do you have any idea how to fix it?

ContextMenu

TreeList

asked on 03 Feb 2025

1 answer

59 views

Grid RowClick event is fired AFTER CommandButton event in a column?

Grid EditMode = InCell.

Grid SelectionMode="GridSelectionMode.Single"

SelectedItems="mySelectedItems"

I have a command button in one of my Grid columns.

I have OnRowClick handler for the Grid.

I have GridCommandColum with GridCommandButton and a OnClick command handler.

The grid populates with data, no row currently selected. User clicks on the GridCommandButton and that event gets fired BEFORE the OnRowClick event. Logically this is not correct as the button is contained within the parent which is the Grid, so the OnRowClick should fire first before the OnClick for command button ... I have no way to work around this issue?

UPDATE: correction, the OnRowClick event doesn't fire at all if I click on a GridCommandButton.

Grid

answered on 03 Feb 2025

1 answer

41 views

Blazor AnimationContainer relative placement

Our designer has discovered the Telerik for Blazor AnimationContainer and is excited to use it, including in areas of our site that collapse and expand. This makes the absolute placement a bit of a problem. Is there an official workaround to this limitation? A good way to simulate relative placement of the AnimationContainer?

AnimationContainer

answered on 31 Jan 2025

1 answer

31 views

SchedulerPopupEditSettings MaxHeight

When setting:

<SchedulerPopupEditSettings MaxHeight="600px"></SchedulerPopupEditSettings>

The height of the popup is larger than the browser window on a screen where the screen resolution is 3840x1600 and the browser is maximized. Moreover, there is no visible change to the height of the pop-up with or without the setting.

I also attempted to use the TelerikWindow as such:

<TelerikWindow Modal="true" Size="WindowSize.Medium" Visible="@CustomEditFormShown">
    <WindowTitle>Playtest Data</WindowTitle>
    <WindowActions>
        <WindowAction Name="Close" OnClick="@RefreshData" />
    </WindowActions>
    <WindowContent>
        @* This component is in the Pages folder *@
        <PlaytestEditor Playtest="@CurrentPlaytest" OnPlaytestChanged="@RefreshData" />
    </WindowContent>
</TelerikWindow>

Here's the whole thing:

<PageTitle>Playtest | Calendar</PageTitle>

<TelerikScheduler class="text-center mt-5"
                @ref="@SchedulerRef" 
                Data="@Playtests" 
                @bind-Date="@DefaultDate" 
                @bind-View="@DefaultView"
                OnUpdate="@UpdatePlaytests"
                OnCreate="@AddPlaytest"
                OnDelete="@DeletePlaytest"
                OnEdit="@EditHandler"
                ConfirmDelete="true"
                AllowCreate="true"
                AllowDelete="true"
                AllowUpdate="true"
                IdField="@(nameof(SessionModel.ID))"
                RecurrenceRuleField="@(nameof(SessionModel.RecurrencRule))"
                RecurrenceExceptionsField="@(nameof(SessionModel.RecurrenceExceptions))"
                RecurrenceIdField="@(nameof(SessionModel.RecurrenceID))">
    <SchedulerSettings>
        <SchedulerPopupEditSettings MaxHeight="600px"></SchedulerPopupEditSettings>
    </SchedulerSettings>
    <SchedulerViews>
        <SchedulerDayView WorkDayStart="@WorkDayStart" WorkDayEnd="@WorkDayEnd" />
        <SchedulerWeekView WorkDayStart="@WorkDayStart" WorkDayEnd="@WorkDayEnd" />
    </SchedulerViews>
</TelerikScheduler>

<TelerikWindow Modal="true" Size="WindowSize.Medium" Visible="@CustomEditFormShown">
    <WindowTitle>Playtest Data</WindowTitle>
    <WindowActions>
        <WindowAction Name="Close" OnClick="@RefreshData" />
    </WindowActions>
    <WindowContent>
        @* This component is in the Pages folder *@
        <PlaytestEditor Playtest="@CurrentPlaytest" OnPlaytestChanged="@RefreshData" />
    </WindowContent>
</TelerikWindow>

Scheduler

answered on 31 Jan 2025

1 answer

34 views

Blazor - Gnatt - Can I access the Gnatt Timeline Columns on the code behind?

Is there a way that I can loop through the Columns of the Gnatt chart to access the attributes on the code behind?

For example, I want to see if Column D has been moved or hidden.

The closest thing I can see if GanttColumns but I cannot look through it because it is a RenderFragment?

var columns = Ref.GanttColumns;

I saw on the object ColumnsCollection which is ideal but it's not a public attribute for me to query it.

Any ideas?

Gantt

answered on 31 Jan 2025

1 answer

32 views

Grid cell template with custom component not binding TelerikDatePicker

As you cas see from the sample below, i have a grid with row filter.

In the FilterCellTemplate i use a custom component named DateFilterCell.

In DateFilterCell i show a TelerikDatePicker.

When i run this sample and try to set the datepicker value from the calendar, the value does not bind.

What's wrong?

Thanks

https://blazorrepl.telerik.com/GfEFHkFA35AZCMp451

DatePicker

Grid

answered on 31 Jan 2025

2 answers

125 views

Refresh grid filter from code

I have a paged TelerikGrid loaded using OnRead event with 2 filter modes: Inline and programmately.

With inline filter i manage a FilterCellTemplate and call FilterCellTemplateContext.FilterAsync() to refresh the grid after setting the filter value.

If i set a filter programmately, to update the grid i call Grid.Rebind(), but i need to set the grid to page 1, so i need to set the Page property binding to 1 before calling Grid.Rebind.

There is a better way to refresh the grid for filtering programmately? the best would be a method to call (as done with FilterCellTemplateContext.FilterAsync()) who manage the page reset.

Thanks

Grid

updated answer on 31 Jan 2025

1 answer

57 views

How to use OnBeforeExport with standard button click

Hello!

I want to export Blazor grid content to CSV and make some changes before export. This example works fine with GridCommandButton

Blazor Grid Export Export Events - Telerik UI for Blazor

I want to use a standard button instead of GridCommandButton.

     <Button ..
             OnClick="ExportGridData">
         Export
     </Button>

    internal void ExportGridData()
    {
        gridRef?.ExportToCsv();
    }

My issue is, executing ExportToCsv does not trigger OnBeforeExport. Is there a way to trigger OnBeforeExport when calling ExportToCsv() from a button click event?

Thank you.

Grid

answered on 31 Jan 2025

0 answers

48 views

How do I make a C# Console app build and debug in Visual Studio Code?

This is on a Windows 10 OS Version 22HG2 (OS Build 19045.5371)

How do I make a C# Console app build and debug in Visual Studio Code?

I have already built my C# Console App in Visual Studio Code. The issue I have is when I reopen the folder where the project file is in Visual Studio Code and then rebuilding the code and debugging it again.

Here is what I do and what happens. After I open the folder where the project file resides, I click on this to process the code to debug:

https://likablelogic.org/images/lost/07.png

And then I click on the appearing "Run and Debug" button

https://likablelogic.org/images/lost/08.png

But then the bottom status bar says "Looking for CSS classes in the workspace..." followed by a percentage in paragraphs. Why is this? Why does this happen when there are no CSS classes at all and my project is a C# project?

https://likablelogic.org/images/lost/09.png

Why is this? This is just a brief snapshot of some difficulties I find when I reopen a project after I have closed Visual Studio Code. I have experienced other errors and problems in building and running my code.

To continue, in order to deal with the project as a solution, I click on this icon to open the solution panel.

https://likablelogic.org/images/lost/10.png

This seemingly allows me to view the solution. As the following view appears, I click on the project.cs file and attempt a debugging session from there.

https://likablelogic.org/images/lost/11...png

With this file being displayed, I clicked on the menu option, Run -> Start Debugging

https://likablelogic.org/images/lost/12...png

Then, at this point, in the pop up option window that appears in the middle and top of the development environment, I pick "C#":

https://likablelogic.org/images/lost/13...png

Something went wrong and in the bottom right of my IDE, I get this message:

https://likablelogic.org/images/lost/14.png

Please advise. What should I do now?

There are some websites where I can spend time following steps to set up a proper development environment. Before I spend time doing this, I think I will spend time looking at the a few short tutorials Youtube on this topic. The one I seemed to be the best had a step at the beginning of the tutorial where he typed 'dotnet run' in the terminal window of the IDE. I tried that and I got some wierd results on my project that I thought I would mention here.

First of all, in the status bar at the bottom, it mentioned CSS loading, for some reason, but also a notice that the IDE was initialising MSBuild project tools.

https://likablelogic.org/images/lost/css.png

https://likablelogic.org/images/lost/msbuild.png

Then, once that was over, I got this error message:

https://likablelogic.org/images/lost/git.png

Please advise. What should I do now?

General Discussions

Window

asked on 30 Jan 2025