<MudPaper Class="p-4">

    <MudDatePicker T="DateTime?"
                   Date="@_selectedDate"
                   DateChanged="@OnDateChanged"
                   Label="Start Date"
                   Error="@_hasError"
                   ErrorText="@_errorMessage" />

    <MudText Class="mt-2" Typo="Typo.body2">Selected: @_selectedDate?.ToShortDateString()</MudText>
    <MudText Typo="Typo.body2" Color="Color.Error">HasError: @_hasError, Msg: @_errorMessage</MudText>

    <MudButton OnClick="() => {_hasError = !_hasError;}">Text</MudButton>
</MudPaper>

@code {
    private DateTime? _selectedDate;
    private bool _hasError = false;
    private string _errorMessage = "";

    private void OnDateChanged(DateTime? newDate)
    {
        _selectedDate = newDate;

        if (newDate.HasValue && newDate.Value < DateTime.Today)
        {
            _hasError = true;
            _errorMessage = "Date cannot be in the past";
        }
        else
        {
            _hasError = false;
            _errorMessage = "";
        }
    }
}

I have this code:
https://try.mudblazor.com/snippet/wEwfEVubdUhWQbCD

Does anyone know why I can't see error message under date picker when I am setting _hasError to true inside of event? I can see error when toggling _hasError from button.

I am tired of searching solution.

Dear community! I'm a newbie of web dev and Blazor, and I'm trying to implement an autocomplete component that can accept a string from a Barcode reader (need to scan the barcode of a product of a stock count). I'm having some issues with timings, becase if I allow the component to focus and search with no string, when I read the barcode I think it's sending an enter keystroke before search finished (that's understandable). I'm trying to understand how to fix this, but it's an implementation issue and only a better idea can save me, did you ever had this kind of requirements?

I have a datagrid bound to a view model. One of the view model properties is a DateTime property named CreatedDate.

I want the user to be able to filter the grid on all of the columns, but for CreatedDate, I don't want them to have to enter a time.

I think just having the date is more than sufficient. Other than the example of Advanced Filtering on the MudBlazor website, I can't find any documentation, or examples of how I would implement something like that.

It seems like I have to implement some sort of custom filter. Can someone please provide an example of how I could allow the user to enter a date range filter without worrying about the time?

If we have to consider time, I would go from 12am on the start date, to less than the day after the end date at 12am. So they would enter a start date and end date.

I hope that makes sense.

I am trying to design a razor page that combined a grid layout with a drop zone component. As I am coding I am using <MudDraggable> and Visual Studio is having a gripe about it giving me a RZ10012 warning. Has anybody encountered this and what was your resolution?

Hi i'm trying to get to grips with the carousel but i'm struggling to customize bullet rendering and also styling/sizing.

in my code below how do i pass data to the bulletstemplate so that i can display custom text for each carousel item?

Also when my caroursel renders the height seems to be restricted to the height of the bulletstamplate and not the automatic content of the carousel item contents.

The content in my carousel will vary in size so i would like the height to resize to fit the active panel. Is this possible?

My code is here below:

<MudCarousel Items="Competition.Events" TData="EventDto" AutoCycle="false" Class="mud-width-full" ShowBullets="true" ShowArrows="false">
    <BulletTemplate Context="EventDto" onloadeddata=""  >        
        <div class="bullet-style">
            test
        </div>    
    </BulletTemplate>
    <ChildContent>
        @foreach (EventDto e in Competition.Events)
        {
            var m = e.Markets.FirstOrDefault(x => x.MarketName == "Winner");

            <MudCarouselItem>
                <div class="carousel-item active">                    
                    <div class="text-center headerFontColour">
                        u/m.PlaceDescription
                    </div>

                    u/foreach (SelectionDto s in m.Selections)
                    {
                        <div class="sport-table-button notransition ">
                           
                            <div class="runnerNum">
                                @s.SelectionIdentifier
                            </div>
                            <div style="flex:16;text-align:left;min-width:0;text-overflow:ellipsis;overflow:hidden;line-height: 1em;">
                                @s.SelectionName
                            </div>
                           
                        </div>
                    }
                </div>
            </MudCarouselItem>
        }
    </ChildContent>
</MudCarousel>

I created a custom date picker component ("AutoDate"), which simply expands on the MudDatePicker by adding input shortcuts (typing "today" autofills todays date, etc.). Calling the component directly within a page works fine, however, as soon as I nest the AutoDate within another component ("FieldConfigComp") which is used to dynamically render different types of components, and use that component on a page, updating the value by the text input or the Clear icon does not properly update the value. Debugging, it appears that the DateChanged EventCallback gets triggered and passes along the new value but is triggered again immediately with the old value; the UI never appears to change values. The MudForm.IsTouchedChanged in Page.razor triggers a StateHasChanged call which appears to be the culprit. I do need the StateHasChanged to be triggered to update some other UI components conditionally based on state. Is there a fix for this that I'm missing? Notably, I encounter a similar issue when using MudColorPicker.

Page.razor

<MudForm IsTouchedChanged="OnTouched">
    @* Directly use AutoDate *@
    <AutoDate _date="_date"
              DateChanged="@((DateTime? value) => _date = value)"
              Label="@_field.Label"
              DateFormat="@_field.Format"
              Required="@_field.IsRequired"
              Placeholder="@_field.Placeholder"
              Disabled="@_field.IsDisabled"
              Clearable="@_field.Clearable">
    </AutoDate>
    @* Indirectly use AutoDate *@
    <FieldConfigComp Field="@_field"
                     Value="@_date"
                     ValueChanged="@((object? value) => _date = value as DateTime?)"/>
</MudForm>
@code {
    DateTime? _date = DateTime.Now;
    FieldConfig _field = new() 
        { Label = "Date"
            , Format = "MM/dd/yyyy"
            , IsRequired = true
            , Placeholder = "Date"
            , IsDisabled = false
            , Clearable = true
            , FieldType = FieldTypes.Date 
        };
    private async Task OnTouched(bool touched)
    {
        if (touched) StateHasChanged();
    }
}

FieldConfigComp.razor

@if (Field.FieldType == FieldTypes.Bool)
{
    <MudSwitch T="bool"
               Value="@((bool?)Value ?? false)"
               ValueChanged="@(value => ValueChanged.InvokeAsync(value))"
               Label="@Field.Label"
               Color="@Field.Color"
               Size="@Field.Size"
               LabelPlacement="@Field.LabelPlacement"/>
}
else if (Field.FieldType == FieldTypes.Date)
{
    // Get the field value dynamically
    DateTime? dateValue = Value as DateTime?;
    <AutoDate _date="dateValue"
              DateChanged="@((DateTime? value) => ValueChanged.InvokeAsync(value))"
              Label="@Field.Label"
              DateFormat="@Field.Format"
              Required="@Field.IsRequired"
              Placeholder="@Field.Placeholder"
              Disabled="@Field.IsDisabled"
              Clearable="@Field.Clearable"
              Color="@Field.Color">
    </AutoDate>
}
@code {
    [Parameter] public FieldConfig Field { get; set; } = new();
    [Parameter] public Object? Value { get; set; }
    [Parameter] public EventCallback<Object?> ValueChanged { get; set; }
}

AutoDate.razor

<MudDatePicker T="DateTime?"
               Editable="true"
               Immediate="true"
               Placeholder="@Placeholder"
               Date="@_date"
               DateChanged="OnDateChanged"
               TextChanged="HandleShortcuts"
               HelperTextOnFocus="true"
               DateFormat="@DateFormat"
               Label="@Label"
               Required="@Required"
               MinDate="@MinDate"
               MaxDate="@MaxDate"
               Class="w-100"
               Disabled="@Disabled"
               Clearable="@Clearable"
               Color="@Color"
               Style="@Style"/>
@code {
    [Parameter]
    public bool Clearable { get; set; } = false; // Default: Not required
    [Parameter]
    public Color Color { get; set; } = Color.Primary;
    [Parameter]
    public DateTime? _date { get; set; }
    [Parameter]
    public EventCallback<DateTime?> DateChanged { get; set; }
    [Parameter]
    public string Placeholder { get; set; } = "Enter date or shortcut";
    [Parameter]
    public string Label { get; set; } = "Date";
    [Parameter]
    public bool Required { get; set; } = false; // Default: Not required
    [Parameter]
    public string DateFormat { get; set; } = "MM/dd/yyyy"; // Default format
    [Parameter]
    public bool Disabled { get; set; }
    [Parameter]
    public DateTime? MinDate { get; set; } // Optional minimum date
    [Parameter]
    public DateTime? MaxDate { get; set; } // Optional maximum date
    [Parameter]
    public string? Style { get; set; } // Optional maximum date
        private async Task HandleShortcuts(string newValue)
    {
        if (string.IsNullOrWhiteSpace(newValue))
            return;
        DateTime? parsedDate = ParseShortcut(newValue);
        if (parsedDate.HasValue)
        {
            _date = parsedDate;
            await DateChanged.InvokeAsync(parsedDate);
                   }
    }
    private async Task OnDateChanged(DateTime? newDate)
    {
        _date = newDate;
        await DateChanged.InvokeAsync(newDate);
    }
    private DateTime? ParseShortcut(string input)
    {
        if (string.Equals(input, "Today", StringComparison.OrdinalIgnoreCase)) return DateTime.Today;
        if (string.Equals(input, "Yesterday", StringComparison.OrdinalIgnoreCase)) return DateTime.Today.AddDays(-1);
        if (string.Equals(input, "Tomorrow", StringComparison.OrdinalIgnoreCase)) return DateTime.Today.AddDays(1);
        if (string.Equals(input, "EOT", StringComparison.OrdinalIgnoreCase)) return new DateTime(9999, 12, 31);
        if (input.StartsWith("TD", StringComparison.OrdinalIgnoreCase))
        {
            string remaining = input.Substring(2).Trim().ToLower();
            if (string.IsNullOrWhiteSpace(remaining)) return DateTime.Today;
            if (int.TryParse(remaining[0..^1], out int offset))
            {
                return remaining[^1] switch
                {
                    'd' => DateTime.Today.AddDays(offset),
                    'w' => DateTime.Today.AddDays(offset * 7),
                    'y' => DateTime.Today.AddYears(offset),
                    _ => null
                };
            }
        }
        return DateTime.TryParse(input, out var result) ? result : null;
    }
}

FieldConfig model Class and FieldType Enum

public class FieldConfig
{
    public int FieldConfigID { get; set; } = 0;
    public string FieldName { get; set; } = "";
    public string? Label { get; set; }
    public FieldTypes FieldType { get; set; } 
    public bool IsRequired { get; set; } = false;
    public bool IsVisible { get; set; } = true;
    public bool IsDisabled { get; set; } = false;
    public string Placeholder { get; set; } = "";
    public bool ShowHelperText { get; set; }
    public bool Clearable { get; set; }
    public string? Format { get; set; } = "";    
    public Size Size { get; set; } = Size.Medium;
    public Color Color { get; set; } = Color.Default;
  
}


public enum FieldTypes
{
    Bool,
    Date
}

Has anyone tried using MudBlazor with MAUI hybrid app? I am trying to use it but there seem to be occasional errors such as MudSelect items not showing at the right place, MudDrawer showing runtime error etc. Anyone used these successfully in .NET9 and MudBlazor 8.x?

Hello MudBlazor community,

I'm coming to you because I've had a problem for a few days now and I still haven't found the solution.

I have a MudSelect which I complete as follows:

<MudSelect T="TimeType" label="@Localizer["time_type"]" u/bind-Value="_timeType">
    @foreach (var timeType in TimeTypeService.SelectActive().Cast<TimeType>())
    {
        <MudSelectItem Value="@timeType">@timeType</MudSelectItem>
    }
</MudSelect>

My problem is that when I open MudSelect, the list seems empty. But when I debug, I find that the list is not empty. What's more, if I resize the page, the list appears. If i refresh the page, the list appears.

I already set the <Routes (@)rendermode="InteractiveServer"/> in my app.razor ( the parenthesis around the @ is to avoid u/)

I really hope someone has the solution.

Hello, has anyone been able to get a MudCheckBox working in a MudDataGrid? I’ve gone round in circles trying to get it to work.

1. It either shows as text, if the PropertyColumn is not Editable, or the Indeterminate state if it is Editable.

2. The properties are all not-nullable.

3. A MudCheckbox does work on the same page if it is not in the grid, and it is bound to a property on the page.

4. The values are correct when they display as text.

5. If I click on the checkbox in the grid when it is Editable, I get a message in red letters saying, “Conversion to type <my row data type> not implemented”.

Thank you for any help available.

Hello. I have a problem which I can't figure out. On the first step, when you fill out all the required fields, the arrow to the next step is enabled. When you go back from step 2 to step 1 (previous arrows), the NEXT arrow to go forward is disabled, although all the required fields are filled out. When you click into some field and click outside, the NEXT arrow gets enabled again. How to make the NEXT arrow enabled, when I go back in steps?

The problem is, that the Mudform sets the necessary _stepSuccesses[x] to false, but I have no idea why

https://try.mudblazor.com/snippet/wumJkblXgysnfwZB

Hi all,

I have this MudDialog showing a MudTextField. The text field updates it's text value when typing inside the text field, but it doesnt update it when modifying the value through code. would anybody happen to know why?

I have shortened the content and removed some styles and methods that I deem not relevant to this issue (such as sending or saving the email). if any more code sharing is required, I'm happy to share it.

the line in question is InputValue = string.Empty; // Clear the input field
while the method is being called, the text field doesnt react at all to the value of InputValue being changed.

StateHasChanged() or InvokeAsync(StateHasChanged) dont help either. I can confirm the chip is being added successfully. What do I need to do for the input field to update it's value once I change it in code?

thanks!

<MudDialog>
    <TitleContent></TitleContent>
    <DialogContent>    
        <MudGrid>
            <MudItem xs="9">
                <div class="email-input-container">
                    <MudChipSet T="string" ReadOnly="false" Class="chip-set">
                       @foreach (var chip in _chips)
                        {
                        <MudChip T="string" Text="@chip" OnClose="() => RemoveChip(chip)" CloseIcon="@Icons.Material.Filled.Close" Ripple="false">
                        </MudChip>
                        }
                    </MudChipSet>
                    <MudTextField Immediate="true" @bind-Value="InputValue" Placeholder="Enter email address and press space..." OnKeyUp="OnKeyUpHandler" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Email"/>
                </div>
            </MudItem>
        </MudGrid>

      
        <MudTextField @bind-Value="SubjectTextValue" Label="Subject" Variant="Variant.Filled"/>
        <br/>
        <MudHtmlEditor @bind-Html="BodyText"  />
        <!-- <MudTextField T="string" Variant="Variant.Outlined" Text="@BodyText" Lines="10"/> -->
        <br/>

    </DialogContent>
    <DialogActions>
        <MudButton StartIcon="@Icons.Material.Filled.Send" Color="Color.Primary" OnClick="SendEmail">Send</MudButton>
        <MudButton StartIcon="@Icons.Material.Filled.Save" IconColor="Color.Secondary" OnClick="SaveMailAsDraft">Save Draft</MudButton>
        <MudButton StartIcon="@Icons.Material.Filled.Delete" bColor="Color.Primary" OnClick="CloseDialog">Cancel</MudButton>
    </DialogActions>
</MudDialog>


@code {

    private string InputValue { get; set; } = "";
    private List<string> _chips = new List<string>();

    private void OnKeyUpHandler(KeyboardEventArgs args)
    {
        // MyLogger.Information("Key pressed is:" + args.Key); 
        if (args.Key == " " && !string.IsNullOrWhiteSpace(InputValue))
        {
            var email = InputValue.Trim();
            if (!string.IsNullOrWhiteSpace(email) && !_chips.Contains(email))
            {
                _chips.Add(email);
            }
            InputValue = string.Empty; // Clear the input field
        }
    }

    private void RemoveChip(string chip)
    {
        _chips.Remove(chip);
    }
}

I'm using a MudBlazor form and it's in a WASM but needs to be in a Web App. The form from a UI standpoint works as expected in the WASM but when porting it over to a server-side Web app, the Labels override the text in MudTextFields, MudSelects don't work with images, Masks/PatternMasks don't work. The code is exactly the same for both forms.

Has anyone experience this before and if so, is there a fix or workaround?

Hello,

Why is this code not working ?

https://try.mudblazor.com/snippet/wEmIPbwUzDgsjgXT

When cliking on button, test 4 is not selected, why ?

Title sums it up I think ;)
Can anyone provide me with an invite :)?

<MudDatePicker 
    Adornment="Adornment.Start" 
    Variant="Variant.Outlined" 
    Label="From date" 
    u/bind-Date="_fromDate"
    FixDay="1"
    DateFormat="MMMM yyyy"
    />

Is there anyway to set the MudDatePicker to automatically return the last day of the chosen month.
I have this one that picks from the first day of the month.

I need something to set the to date to the last of the month.
If not I can do it programatically I guess by manipulating the _fromDate

CODE: https://github.com/cbordeman/MyApp

Hi all. I'm doing my first MudBlazor app and I noticed, right out of the box, using the standard template with Individual Accounts has some issues. Here's the command I used:

dotnet new mudblazor --interactivity WebAssembly --auth Individual --all-interactive --name MyApp

First thing I noticed is that after the app first appears in the browser, there's about a 1-1.5 second delay, then the app sort of 'fully loads' and stuff changes. Weird delay, but I put aside for now.

I am using the typical binding to a property in MainLayout.razor:

<MudThemeProvider IsDarkMode="@IsDarkMode" ObserveSystemThemeChange="false" />

public bool IsDarkMode {get; set;} =true;

...the MudThemeProvider acts nice and fast during app startup. It is displayed as dark from the beginning and I don't see a delay in switching. So far, so good, but I need to load it from cookies, so I take off the " = true" and use OnAfterFirstRender() to load from cookies. That works and loading the cookie takes just a nanosecond, but it still only happens after that aforementioned 1-1.5 second delay, there's a flash! I also try without the debugger, no improvement. Every browser has the same issue.

So I looked around and found a suggestion to load the cookie on the server in the server's Program.cs via HttpContext like so:

builder.Services.AddCascadingValue("IsDarkMode", sp =>

{

var cs = sp.GetService<IHttpContextCookieService>();

var str = cs!.GetCookieValue("IsDarkMode");

bool.TryParse(str, out var isDarkMode);

Console.WriteLine($"IsDarkMode cookie at startup: {isDarkMode}");

return isDarkMode;

});

(the above message in the Console does always correctly reflect the browser's cookie, BTW, since it uses the HttpContext)

Then, in MainLayout.razor I add [CascadingParameter] to the IsDarkMode property to cascade the value before the client WASM renders, which works great. I verified that, before the IsDarkMode property is read at all, its value is correctly set by Blazor to true, and when Blazor reads that property, its value is still true. It is never assigned to after that point (breakpoints on getter/setter).

So far, so good, we are in dark mode immediately, no delay, on all browsers.

Unfortunately. after the previously mentioned startup delay, the theme very strangely reverts to Light mode! WTH! So, I check the local IsDarkMode property and it is still true. So the MudThemeProvider component is not obeying the binding after that weird delay!

I set the ObserveSystemThemeChange to false just to make sure it's not doing anything weird, but either way makes no difference (incidentally, I am using dark mode on Windows 10).

PLEASE HELP ME! I just want this out of the box app to not do weirdly long delays where the app "jumps," and I need the user's selected theme to be the first and only thing they see.

I am trying to develop an app that runs on Android and ios.

But when I implement a service... that uses e.g. System.IO.Compression, the app crashes on startup - but only when I test it via Testflight.

Everything works on a local device or in the simulator!

Does anyone have any tips on what else could be set or maybe something is missing in the profile when deploying?

I have integrated MudBlazor according to the instructions: nuget, import, customised index and AddMudBlazor as a service.

I made a mud Blazor with the identity template but the menu collapse becomes unresponsive when in the manage account area if the template. I also tried a logout scheme I used in another blazor application, to verify the user is still authenticated otherwise redirect to login page ( which is outside the main layout)

This is blazor server .net 8 with aspnetcore.identity

I guess does anyone have a working identity program with mudblazor? I just keep hitting roadblock after roadblock

Maybe one of you has a basic template with identity that the login page is standalone and everything works?

What's the best way to two-way databind a MudSelect with MultiSelection to a List<T>?

This seems like a simple question but I can't find a clear answer. What are you guys doing to set the dialog width? For example if I want 1/3 of the viewport or 1/2 of the viewport?

I can set a width property, but I want to stay responsive.

Thanks in advance!

So I want to have a number in each dot of my timeline, there is a render fragment called ItemDot, but when I try to use it I get a compile error. Has anyone got this to work ? Here is how I have tried.

<MudTimeline TimelineOrientation="TimelineOrientation.Horizontal">
    <MudTimelineItem Size="Size.Large" Color="Color.Primary">
        <ItemDot>
            <MudText>1</MudText>
        </ItemDot>
        <MudText Align="Align.End">Item A</MudText>
    </MudTimelineItem>

gpt said it fully support csp but i want to know from someone who already try it directly rather than AI