Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
  • Jun 13 18:10
    nilayjoshi89 starred SamProf/MatBlazor
  • Jun 13 03:05
    ibocon starred SamProf/MatBlazor
  • Jun 12 04:06
    aijkl starred SamProf/MatBlazor
  • Jun 10 15:31
    Software-Simian starred SamProf/MatBlazor
  • Jun 09 15:03
    onemoreuserinthisworld commented #890
  • Jun 09 12:10
    onemoreuserinthisworld opened #890
  • Jun 09 12:10
    onemoreuserinthisworld labeled #890
  • Jun 09 07:53
    ericdes starred SamProf/MatBlazor
  • Jun 09 04:10
    Borislobachev starred SamProf/MatBlazor
  • Jun 08 06:36
    ThoLorenz starred SamProf/MatBlazor
  • Jun 07 12:46
    JAMALEEY starred SamProf/MatBlazor
  • Jun 07 11:53
    GioviQ commented #886
  • Jun 07 07:14
    Christian-Oleson commented #886
  • Jun 07 00:41
    AYB-cmd starred SamProf/MatBlazor
  • Jun 06 08:59
    jeisonjei commented #826
  • Jun 05 17:32
    Jakar510 starred SamProf/MatBlazor
  • Jun 05 17:06
    Nergy101 closed #888
  • Jun 05 17:05
    Nergy101 commented #888
  • Jun 04 21:40
    fabianschurz commented #688
  • Jun 04 21:38
    fabianschurz commented #688
Christian Oleson
@Christian-Oleson
MudContainer belongs to MudBlazor, not MatBlazor @flipch
Simon-Miller
@Simon-Miller
@novfal I'm using the MatDatePicker in my project, but don't understand what you're trying to do. Would love to offer help from my own experience. So what exactly are you trying to do? Can you share a BlazorFiddle ?
rik coleman
@coleman-rik
can anyone explain the difference between; "AppGates.Net.MatBlazor" (v2.10.1.xxxx) and "MatBlazor" (v2.9.0-develop-042)??
rik coleman
@coleman-rik
hi all, is there a multi-select component in MatBlazor? If, not, any idea how I would impliment it? thanks.
rik coleman
@coleman-rik
having some problems with MatCheckBox. getting: RapidRate.razor(21, 64): [RZ9991] The attribute names could not be inferred from bind attribute 'bind-value'. Bind attributes should be of the form 'bind' or 'bind-value' along with their corresponding optional parameters like 'bind-value:event', 'bind:format' etc.
anyone have any ideas?
<MatCheckBox TValue="bool" Label="Include Small Pack?" @bind-value="rapidRate.IncludeSmallPack" ></MatCheckBox>
Simon-Miller
@Simon-Miller
@coleman-rik It's pretty easy to fall for that ol' chestnut of a lower-case 'v' when it should read @bind-Value="rapidRate.IncludeSmallPack"
Simon-Miller
@Simon-Miller
@coleman-rik with regards to AppGates.Net.MatBlazor, and regular MatBlazor - I've just taken a quick look, and it appears to be an alias - nothing more than a recommendation to use MatBlazor. Who ever did it, were kind enough to credit SamProf (Vladimir Samoilenko) as the author. Looking at NuGet there's an option to open the package in FuGet which allowed me to look at the package. If you use the site, be patient! It doesn't seem to be very responsive, as in, 30 seconds to load. ok, could be longer! But it does work!!
The package itself contains <repository type="git" url="https://github.com/SamProf/MatBlazor" /> so I'd say it retrieves the latest stable release of MatBlazor. That's the long answer.
The short answer? They're the same. But I personally wouldn't consider MatBlazor as part of AppGates. Unless you see AppGates as a 'launcher' for MatBlazor. Knowing nothing about AppGates, I can only guess by its name!
Simon-Miller
@Simon-Miller
@coleman-rik with regards to multi-select: I couldn't extend the MatSelectItem as it wants to close the 'popup' the moment you click on something. So I went down the road of a MatDialog where I render a MatTable where each row has a MatCheckbox and other details. So my code is responsible for maintaining a List<bool> of checked checkboxes. When the OK is clicked, I then call a Func<List<T>> function passed as a parameter into my component, where I translate the List<bool> into a List<T> where T is the entity type I want to show as a select-list. I also use the public RenderFragment ChildContent {get; set;} approach so the caller can tell me how to render content of a row after the checkbox. Sorry I can't share it. I've certainly heard discussion about a multi-select for MatBlazor before.
see: SamProf/MatBlazor#654 and raise your support!
rik coleman
@coleman-rik
@Simon-Miller thanks for all the help.
aviabunin
@aviabunin
Hy all
Can anybody say how to change matdialog position from center to left, or change width ?
I tried to put matDialog in a div with my own style, didn't help
vallgrenerik
@vallgrenerik
Hi!
I have a problem with scroll position.
Has anyone had the same problem?
See this for mor info:
SamProf/MatBlazor#593
Afshin Moatari
@AfshinMoatari
Hi, I'm using MatBlazor for one of my projects and in this project, I need the MatDatePicker component to restricting users from selecting certain days of the week (for instance disabling all the Mondays and Wednesdays from the selector).
I understand that with the Maximum and Minimum attribute I can add an iteration of buffer time in between days but How can I achieve the weekday(s) restriction with the Maximum and Minimum attribute since the buffer time in-between days are dynamic and can not be iterated? Can this be achieved in any other way?
Simon-Miller
@Simon-Miller
@aviabunin I've had some success fixing the width. Here's my CSS (which you'll need to add the w-75vw to your MatDialog's Class property).
@media (min-width: 992px) { /* MatBlazor only allows modal popups to 560px wide.  That's a little too restrictive for us. */
    .mdc-dialog .mdc-dialog__surface {
        max-width: 960px;
    }

    /* fudge: force dialogue width */
    .w-75vw .mdc-dialog__container .mdc-dialog__surface {
        width: 75vw;
    }
}
Simon-Miller
@Simon-Miller
@vallgrenerik If I'm getting where you're coming from - you've a page that has more content than fits in the browser, so naturally you get a scrollbar. You navigate to another "page" and find the scrollbar has not moved back to the top. With any Blazor application you will likely have the same issue, because your site isn't really navigating to another page. The App component (in the root of your project) captures link navigation, and translates the url to a component that matches the route. The App then re-draws the page using which ever layout (Shared\MainLayout.razor) is defaulted or set. So you never left the brower's window/ page at all. it just appears that way. So the scrollbar is not reset. I've no idea if anyone implemented a "fix" for this. It sounds like a javascript interop call to me. You could write a bit of javascript, and have a base-class for all your "page" components that will call this when they get instantiated, to reset the scroll position. Sorry I don't have a pre-written solution for you though - but that's how I'd go about it.
Simon-Miller
@Simon-Miller
@AfshinMoatari I too am using the DatePicker in a project I'm working on. I don't know if there's any way to do that with the built-in properties, but I do know you could write a custom validator attribute, and apply this logic to an EditForm - -so at least you can get meaningful errors via validation. Alternatively, you could implement your own class inheriting from the MatDatePicker, and write the behaviour into your own class (component) whilst not having to write any UI related stuff, hence, the inheritance I mention. I'd like to think the MatBlazor developers will enhance the DatePicker to support week days, weekends, etc. Or provide a hook into some validatingValue event ?? That would be nice!
kelley0905
@kelley0905
How can I pre-select a chip in a chipset when the page is loaded? I have tried the IsSelected attribute for both the chip and chipset. This does pre-select the chip, but then you cannot select any other chips in the chipset.
Simon-Miller
@Simon-Miller
@kelley0905 sounds like your MatChipSet is missing the Filter="true" parameter. According to the instructions, this also requires that each MatChip has the IsCheckable="true" parameter too. see MatChip example code.
Paul Schroeder
@Paul-Schroeder

Anyone know how I can request the focus on a MatBlazor component? In this specific case, a MatTextField. In .net 5, there seems to be a new feature where you can call FocusAsync() if you reference the component as an ElementReference. The issue is, I can't @ref = "<blah>" a MatBlazor component where blah is declared an ElementReference... I get an error when I try to compile.

@YTN0 , I use a ViewModel approach and got this to work by adding a protected MatTextField<string> variable. Here's sample code in the ViewModel class:

        protected MatTextField<string> _productNameInputReference;

        protected async override Task OnAfterRenderAsync(bool firstRender)
        {
            await base.OnAfterRenderAsync(firstRender);

            if (firstRender)
            {
                await _productNameInputReference.InputRef.FocusAsync();
            }
        }

Then, in my razor page, I have code that looks like this:

    <MatTextField @ref="_productNameInputReference"></MatTextField>
Simon-Miller
@Simon-Miller
@Paul-Schroeder Thanks for sharing this Paul, I've just given it a quick try, and applied the same logic to a button click to simulate setting focus on text input that fails validation, or something like that. Works a treat! I tried creating a BlazorFiddle without success though. So to anyone reading, be aware that currently BlazorFiddle doesn't understand the FocusAsync() method, but it will work in your own MatBlazor projects.
monica monica
@stellina8778_twitter
Hello everybody. I'm new to MatBlazor. It is possible to insert a custom image in MatProgressCircle?
Simon-Miller
@Simon-Miller
@stellina8778_twitter Hi, Monica, and welcome. Please understand that MatBlazor is really a wrapping around the Material Design (web)components. So the functionality offered by MatBlazor is really an interop between Blazor and Javascript, where the underlying components come from the Material project. MatBlazor therefore tries to offer the same functionality, and uses the same resources as the underlying project (Material - backed by Google, if you look). If looks to me that the underlying ProgressCircle doesn't support any way of replacing the animating image with your own. I was hoping it was CSS, and could therefore suggest some kind of override - but its actually SVG elements rendered in-place. So it would actually be easier to roll your own component than try to force the MatProgressCircle to use a different image. Sorry I can't be of any more assistance. Perhaps someone else in the community has a bright idea?
monica monica
@stellina8778_twitter
@Simon-Miller Thank you very much for the reply. I solved it by creating a custom div! :D Another question .... Regarding the FilterByColumnName in the tables is it possible to insert more than one? Or is it also necessary to build custom components here?
Simon-Miller
@Simon-Miller

@stellina8778_twitter This is a FUN one! Here's a line of code from the source-code of MatTable.razor :

FilteredColumns => FilterByColumnName?.Split(";") ?? Array.Empty<string>();

so, can you see that you can use more than one column name by separating them with semi-colons? column1;column2;someOtherColumn etc ? Secondly, what ever you type in is converted to lowercase, as are the fields you're searching against. Partial matches. So that's pretty good for an out-of-the-box component, right? Beyond that, like me on a commercial project, you'll have to roll your own.

larseggan
@larseggan
Anyone know how to create a multiline MatTooltip?
monica monica
@stellina8778_twitter
@Simon-Miller WOWW!!! thank you!!!!!!
larseggan
@larseggan

multiline MatTooltip solved with: style="white-space: pre-line;"

<MatTooltip Tooltip="@resultString" Position="@MatTooltipPosition.Right" Wrap="true" style="white-space: pre-line;">
</MatTooltip>
Then a StringBuilder with AppendLine() for each line in the tooltip.

Simon-Miller
@Simon-Miller
@larseggan Also worthy of note, is that MatTooptip supports ChildContent, So this should work too:
<MatTooltip Tooltip="@resultString" Position="@MatTooltipPosition.Right" >
   <p>some text</p>
   <p>some other text</p>
</MatTooltip>
monica monica
@stellina8778_twitter
@Simon-Miller my guru!!!! It's possible in MatStringField creating the oninput envent (@bind-value="xxx" @bind-value:event="oninput") ???
Simon-Miller
@Simon-Miller

@stellina8778_twitter I'm not sure what you're asking.

class MatStringField : MatTextField<string>

It simply wraps MatTextField, without any extra functionality over MatTextField. It is therefore an alias of MatTextField (the official name!). The code you're indicating, looks like you're asking about changing the way that MatBlazor (Blazor in this case) binds a html UI event to Blazor. I can only guess from our previous conversation points that you want to have your own search filter on screen, where you get a realtime filtering, with each key press. As far as I can see, this is not directly possible, but you could create your own MonicaMatTable that inherits from MatBlazor's MatTable. This would give you access to MatTable's protected SearchTerm property. With each keypress, you'd just need to set the SearchTerm and call this.InvokeStateHasChanged(); so the table can filter, and show results to the UI. Is this what you're asking? If not, you'll have to give me a little more background on what you need help with.

monica monica
@stellina8778_twitter
@Simon-Miller ..... that was just what I was asking "where you get a realtime filtering, with each key press" ;)
Simon-Miller
@Simon-Miller
@stellina8778_twitter I've made a little BlazorFiddle however, it doesn't seem to work in BlazorFiddle! If you copy the code to a razor page in a project on your local machine, and assuming you've a recent enough NuGet package of MatBlazor, it does work. You can type the filter text in, and it tries to match in multiple columns. I've used inline data in the example, so there's no external dependencies. Note the delay (a kind of debounce) between you typing, and filtering of results.
kurtnelle
@kurtnelle
Does anyone know how to remove the virtual scroll from MatTable
larseggan
@larseggan
Does anyone know if you can have a MatTable wihtout a visible MatTableHeader?
Simon-Miller
@Simon-Miller
@kurtnelle I'm not sure what you're referring to exactly. You can give a MatTable a collection, and choose not to show any paging controls. It would have no choice but to show all rows. I'm not sure what you mean about the virtual scroll exactly - perhaps I'm confused because MatBlazor now offers a MatVirtualControl component.
Simon-Miller
@Simon-Miller
@larseggan The MatTable component has a HeaderRowClass property. Here's a BlazorFiddle that demonstrates hiding the header row using a CSS class from Boostrap d-none.
larseggan
@larseggan
Thanks @Simon-Miller , d-none fixed my issue, I now have a MatTable without header :-)
kurtnelle
@kurtnelle
@Simon-Miller The MatTable component has its own horizontal scroll that prevents the window's horizontal scroll from appearing. I need, need, desperately need to use the browser's horizontal scroll.
kurtnelle
@kurtnelle
@Simon-Miller, I want to disable the virtual scroll on the MatTable.
essentially I need the table headers to stay visable regardless of how the user scrolls on the page.
agreentejada
@agreentejada
Hey everyone, I don't want to waste anyone's time, but I want to migrate a desktop app to Blazor and I need to answer a question.
To test out databinding, I created a simple app 1. Enter in your name to <input>. 2. Submit your name with a <button>. 3. Print your name.
Since I'm using blazor server, I want to bind to the input ONLY when the submit button is hit.
But unfortunately, I can't do that without first binding to a placeholder field.
<div class=""> <div class="form-group"> <h4>Two variable method data-binding.</h4> <label for="username">Name</label> <input type="text" class="form-control" id="username" @bind-value="@name" /> <button id="submitName" class="btn-primary" @onclick="SetName">Submit!</button> <small class="@Collapse">Your name is @Name.</small> </div> </div> this is the HTML
<div class="">
    <div class="form-group">
        <h4>Two variable method data-binding.</h4>
        <label for="username">Name</label>
        <input type="text" class="form-control" id="username" @bind-value="@name" />
        <button id="submitName" class="btn-primary" @onclick="SetName">Submit!</button>
        <small class="@Collapse">Your name is @Name.</small>
    </div>
</div>
@code {
    private string name;
    private string Name { get; set; } = null;
    private string Collapse { get { return !string.IsNullOrWhiteSpace(Name) ? null : "collapse"; } }

    void SetName()
    {
        Name = name;
    }
}
agreentejada
@agreentejada
Is there any way to get rid of SetName() and name by setting the @bind-value:event directly to the onClick event of <button>?