Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
lambrech
@lambrech
oh sry ^^ this is the wrong gitter - my fault
mariposaben
@mariposaben
@Simon-Miller I think you understood my problem perfectly. Thank you for the suggestions. I am going to try this code and see if it works. I will report back either way especially if I need to tweak it.
@Simon-Miller And apologies for the lack of detail. I realize after rereading that I should have at least provided the name of the component with that property.
mariposaben
@mariposaben
@Simon-Miller I had to grab master and compile it locally to get access to CurrentPageChanged ie version 2.9 however the code sample above is not working nothing is being triggered when page is changed.
mariposaben
@mariposaben
@Simon-Miller Got it working after switching to 2.9 and using Chrome to debug with. Also realized that I was trying to handle paging when MatBlazor already handles it for us. Thanks again for the help.
Simon-Miller
@Simon-Miller
@mariposaben You're welcome, and for anyone else listening - the fiddle with the example in question, does work against latest pre-release version of MatBlazor. Note also, that when I defined the <MatTable> I explicitly set a couple of parameters ShowPaging="true" PageSize="3" to make the intention of seeing the paging controls, as well as reducing the page size to force the small amount of cars available to be listed in pages. This is so when clicking on any active paging control, the callback in question CurrentPageChanged="@pageChanged" could be triggered!
Looking at the source code history, Eduardo Naretto introduced this feature nearly a year ago (25/11/2020) and is not featured in the current stable release 2.8 - When's the official 2.9 guys? Will it be a Merry Christmas and a happy new year??
novfal
@novfal

<table id="myTable" class="table table-striped table-class" style="width:100%">
<thead>
<MatSortHeaderRow SortChanged="@SortData">
<MatSortHeader SortId="Area">Area</MatSortHeader>
<MatSortHeader SortId="Topic">Topic</MatSortHeader>
<MatSortHeader SortId="Material">Material</MatSortHeader>
<MatSortHeader SortId="Lesson">Lesson</MatSortHeader>
<MatSortHeader>Option</MatSortHeader>
</MatSortHeaderRow>

                  </thead>
                  <tbody>
                    @if (areas != null)
                    {
                      @foreach (var area in areas)
                      {
                        @if (area.Topics != null)
                        {
                          @foreach (var topic in area.Topics)
                          {
                            @if (topic.Materials != null)
                            {
                              @foreach (var material in topic.Materials)
                              {

                                @if (material.Lessons != null)
                                {
                                  @foreach (var lesson in material.Lessons)
                                  {

                                    <tr>
                                      <td>@area.AreaName</td>
                                      <td>@topic.TopicName</td>
                                      <td>@material.MaterialName</td>
                                      <td>@lesson.LessonName</td>
                                      <td>
                                        <MatIcon>add_circle_outline</MatIcon>
                                        <MatIcon>remove_red_eye</MatIcon>
                                      </td>
                                    </tr>
                                  }}}}}}

                      }}
                  </tbody>

                </table>

How achive this is Mattable

How Use Matpaginator in Html table
Simon-Miller
@Simon-Miller
@novfal It looks like you're trying to filter your data before you render rows. If you're going to be intelligent about the data you want to render, then you need to filter your incoming data (assume from a database) probably using a Linq query of some sort instead of all the foreach loops. Once you've got your filtered list, you can pass that on to a <MatTable> for displaying. If that's going to be a common feature in your project, and you want to make a re-usable component (what I've done commercially) then you can really go to town! I included a parameter called FilterFunc of type Func<List<T>, List<T>> where I allow you to pass the filtering function to the custom table component. It would be nice if that were already build into MatTable but there you go. Perhaps we'll see that in a future release? - As for the second part of your question, the pagination is part of the MatTable component, so can't be used separately. But given what I have already suggested, you can pass your filtered data to a MatTable and benefit from the built-in pagination by including the ShowPaging="true" parameter.
Simon-Miller
@Simon-Miller
@novfal here's a bit of pseudo code for the filtering that I was thinking of: var filteredData = incomingData.Where(area => area.Topics != null && area.Topics.Count > 0 && area.Topics.Any(topic => topic.material != null && topic.meterial.Count > 0 && topic.material.Any(material => material.Lessons != null && material.Lessons.Count > 0))). Something like this could replace all that markup logic, leaving your markup to concern itself with rendering a @context that a MatTable gives you (each row). Hope this helps?
novfal
@novfal
@Simon-Miller thanks i tested like this
dave0292
@dave0292
is it possible to make a matcard clickable without having any buttons? I want to have something like a summary of a post in a card and make it clickable to access details in another Razor file.
Simon-Miller
@Simon-Miller
@dave0292 something like this ?? A <MatCard> just renders out a <div> with some pre-defined css classes. The content is what ever you want it to be, as you've no doubt figured out. But all MatBlazor components (as far as I know) all include this: [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object> Attributes { get; set; }, and therefore captures things that are not specifically supported, and renders them to the <div>. So in the example, you can see I've exploited the html @onclick= to make the whole div including your rendered content, something I can click on. To visually aid in this, I also added a css style to make the mouse pointer (I hate calling it a cursor) appear as a pointer, as you would expect with a button or a link. Hope this helps.
dave0292
@dave0292
Hi @Simon-Miller! Yes, I think this could be a nice solution, thank you very much :)
cgrundem
@cgrundem
how do i change the font solution-wide?
Simon-Miller
@Simon-Miller
@cgrundem Different components use different CSS classes to provide default styling. Many components inherit their font size, so at least are defaults for their html element type. MatBlazor provides a MatTheme but I don't think that's what you're after. The notion of a font-size being measured in REMs or EMs implies that setting the font size on the root <html style="font-size: 24px;"> will affect the default font size, and so many elements will be affected. But not all. So you might want to consider some other options, like simply setting the zoom level for the page. But literally everything will get larger or smaller, and pixels won't measure in on-screen pixels when you go down that road. So sadly, there's no quick fix for this. Commercially speaking, I've overriden some css classes used by some labels as they don't seem to be 100 consistent between components. But some will work with you, for example, on a MatTextField, if you use a label, it floats above using css classes, and its font-size appears smaller. It works like this: .mdc-floating-label--float-above { transform: translateY(-106%) scale(0.75); }, so the <html> font-size idea should affect it. That's about as much as I can offer you - no easy fix, but this might get you somewhere towards where you're trying to get to?
PKeeneATX
@PKeeneATX
Does anyone else have a problem where the scroll bar just disappears after making an api call and returning some data? It just happens randomly... thanks in advance!
Simon-Miller
@Simon-Miller
@PKeeneATX I'm not aware of that issue myself. I know the scrollbar disappears when you open a modal popup: When closing, the scrollbar is not restored - at least, in older versions of MatBlazor. I had to make a work-around that removed a CSS class being applied to the <body> as I recall, with a little JS interop. Here's the javascript: function makeWindowScrollbarVisibleIfNeeded(): { document.querySelector('body.mdc-dialog-scroll-lock')?.classList.remove('mdc-dialog-scroll-lock'); } - If you try calling this after you've called your api, it might be a work-around?
PKeeneATX
@PKeeneATX
@Simon-Miller thanks let me try that!
PKeeneATX
@PKeeneATX
@Simon-Miller Thanks! that worked... been battling that for a long time!
maritaadal
@maritaadal
@mtrevena
Did you get any further on your row height issue? I have the same issue: I want to make the row height in my MatTable smaller, but I have not yet figured out how. I can change font size and color, background color and padding around my table using style, but still not the row height. Any tips anyone??
jweschenfelder
@jweschenfelder
Hello all,
I tried to use MatVirtualScroll already weeks ago and there was already my problem that the examples on the MatBlazor website were not working. They were not working for me in my project either because the Nuget packages were not up-to-date back then. Meanwhile that got solved and they are working so far: https://blazorfiddle.com/temp/f72bef73-1d8f-400d-8459-368deff689aa. Now I have the next issue (in the example on the MatBlazor website (examples) and the same in my project, see https://blazorfiddle.com/temp/f72bef73-1d8f-400d-8459-368deff689aa): If I want to change <MatVirtualScroll style="height: 500px;" ItemType="string" Items="@items" ItemHeight="50"> into <MatVirtualScroll style="height: 100%;" ItemType="string" Items="@items" ItemHeight="50"> or <MatVirtualScroll style="height: 100vh;" ItemType="string" Items="@items" ItemHeight="50">, the items are not or only partially displayed. I think the problem was already described and bugfixed here: SamProf/MatBlazor#696. If I look into the current BaseMatVirtualScroll.cs, it still looks wrong there. Can you please look into it? I have tried with CSS, but I could not solve it with CSS only. I'm going to switch back to my old and own solution.
maritaadal
@maritaadal
Is there a way to make MatPaginator to display the total number of rows in a table, not only the number of pages?
Simon-Miller
@Simon-Miller
@maritaadal @mtrevena The MatTable supports adding a css class name for both the table, and each Table row it renders. So something like <MatTable Items="@cars" RowClass="custom-height"> is how you inject the change. However, by default, each row is given a height of 48px. So you need to override that too. tr.custom-height { height: auto !important; } tr.custom-height td { padding: 0px 0px; line-height: 1rem; }
This should look terrible! But I'm sure you'll be happy with the result :-)
Simon-Miller
@Simon-Miller
@maritaadal The MatPaginator concerns itself with pages; what you're asking sounds like a separate concern, but nothing you couldn't add yourself. Simplest would be to just add a <p>@numberOfRecords</p> where you know that information because of the list of entities you're giving to the MatTable. You could place it inside a MatTableHeader? This means you've do something like <MatTable ...> <MatTableHeader><tr><td>rows: @myList.Count</td></tr> but you'd ideally pad the TR with as much colspan as necessary, because you've not provided any headers yet!? Not that the header allows you to put in multiple header rows? Hence, the need for a <tr/>. Hope this helps.
Simon-Miller
@Simon-Miller
@Christian-Oleson Any idea what's happening with #696 - over the last year you've been the most active MatBlazor code contributor on Gitter (that I can see), so hoping you might be able to give us some insight?
Kattabomane
@Kattabomane_gitlab

Hello,
Can anyone help me on how to bind a list of item on a MatList ?

                                     <MatList SingleSelection="true" @bind-???>
                                        @foreach (var it in ListManager)
                                        {                                               
                                            <MatListItem Value="@it">
                                                 @it.FirstName - @it.LastName
                                            </MatListItem>
                                        }
                                    </MatList>

I would like to get the selectedvalue.

Thanks

Kattabomane
@Kattabomane_gitlab
@tossnet1_twitter
Hello, it seems that you was looking on how to bind a MatList.
Could you please share in case you have any hints ?
Thanks
Christian Oleson
@Christian-Oleson
@Simon-Miller , sadly no. Ive stopped controbuting since it looks and feels likenit may be dead.
Ive heard nothing from Vlad in a while (since last release).
Simon-Miller
@Simon-Miller
@Kattabomane_gitlab I've just had a quick look at the code, and it doesn't support binding a value. So currently, your solution involving a foreach is correct. However, there's nothing stopping you creating your own component to wrap this functionality into say Kattabomane.MatList You could inherit from MatList and provide your own rendering. There's very little to what's in MatList: <ul class="@ClassMapper.AsString()" style="@StyleMapper.AsString()" aria-orientation="vertical" @ref="Ref" @attributes="Attributes" Id="@Id"> @ChildContent </ul> So you'd just wrap the @ChildContent with your foreach loop. If you're not so familiar with creating components of your own, with parameters etc, I'd be happy to give you an example.
Simon-Miller
@Simon-Miller
@Kattabomane_gitlab Given the component initialises some javascript code as a one-off, I can't say if it would be happy with being dynamic. I do know a trick for that, as dirty as it might be - but no point talking about it if you're all good. For anyone else listening, consider also overriding MatListItem if you intend to handle each item from the collection, otherwise you'll have one very specific component that can only really handle a list of a known type, and render the <li /> of each with known parameter names. That may be agreeable to you in your scenario, otherwise more separation of concerns are necessary, hence the need for your own list item component too.
Keith
@enkodellc
@Christian-Oleson , we just added MudBlazor to BlazorBoilerplate. We still have MatBlazor Theme but I think Vladimir is not interested in contributing anymore.
aviabunin
@aviabunin
I'm having trouble scaling my matBlazor application when using different scales and resolutions. How to make, for example, matTextField change its size and font size in accordance with the change in scale. I would be grateful for any links to read. (When I zoom in a browser or open my site on computers with different resolutions - the components look bad)
Simon-Miller
@Simon-Miller
@aviabunin MatBlazor uses HTML defaults. So text is based on 16px height. If you'd prefer this change, you can always override the CSS defaults. In my own project I've made made inputs (including textarea) use 1REM instead, so in CSS I can use media queries to set the html font size depending on width/height/orientation. This is where Bootstrap steps in, and provides some nice defaults, and the ability to have different layouts based loosely on resolution. But its media queries at the end of the day, and I find professionally, that designers just don't understand scaling fonts (BS4 can do). Lastly, a point about MatBlazor components: Many of them have a FullWidth property. I've used this in conjuction with bootstrap's grid system which makes for a more controlled and cleaner looking display.
Ben Craig
@bcraig83_gitlab
hi all....very quick question. I'm trying to add a label to a MatBlazor slider. It never displays though? I'm guessing I must be doing something stupid...
Here's what I've got:
                            <MatSlider @bind-Value="@_site.FlightDisplayWindowPastInHours"
                                       Step="1" EnableStep="true" ValueMin="0" ValueMax="5"
                                       Markers="true" Pin="true" Discrete="true"
                                       Label="Flight Display Window">
                            </MatSlider>
Simon-Miller
@Simon-Miller
@bcraig83_gitlab Hiya. I've just had a quick peek at the code for a MatSlider and Label isn't what you might be expecting. It actually renders the aria-labelattribute of a div. See here - - so if you want to add a label above, that's your own html. Hope this makes sense.
larseggan
@larseggan
Has anyone testet MatBlazor with Blazor WebAssebly on .NET 6?
1 reply
tiham
@tiham:matrix.org
[m]
Net 6.0 works with Server Side Blazor without issues, I haven't tested WebAssembly yet^^
larseggan
@larseggan
Update: I ported my projects (WebAssembly) to .NET 6 with MatBlazor 2.9.0-develop-042.
So far no problems.
emelhu
@emelhu

@ghost~5e286e11d73408ce4fd779fa

"Is there a way to show validation messages without EditContext? ... HelperTextValidation"

Is there any answer?
Simon-Miller
@Simon-Miller
@emelhu How will you validate your data? Most developers are looking to use model validation, and for that to work, you need something that can 'pick up' from the child input controls that are bound to a model, and therefore provide validation. So when we place a <ValidationSummary /> component on screen, its always going to be a child of the <EditContext> component. See Here. I assume you just want access to the validation messages from elsewhere. I would say the best bet (I've done this) is to create a method that can take a model, and validate it. This means you have to create an EditContextwhich you also need to tell it to use DataAnnotationValidation. You can then call .Validate()on it, and then it populates itself with validation error messages that you can access.
public (bool valid, IEnumerable<string> messages) ValidateModel(object model) { var validator = new EditContext(model); validator.AddDataAnnotationsValidation(); if(validator.Validate()) return (true, null); return (false, validator.GetValidationMessages()); }
  • I hope this helps.
larseggan
@larseggan
Anyone who know if you cam combine MatTable (without paging) with MatVirtualScroll?
larseggan
@larseggan
Is MatBlazor dead? I've seen no activity here the last month.
5 replies
Chris Owen
@chrisowen2015:matrix.org
[m]
Has anyone managed to get tooltips to display on the TrailingIcon in the MatTextField components? Seems like a very neat way of having inputs and tooltips organized, but I couldn't find a way to point the tooltip directly to the icon that renders inside the input component
Chris Owen
@chrisowen2015:matrix.org
[m]
After some time playing around with it, nesting a MatIcon inside of the MatTextField component seems to work
RajNZ
@RajNZ
Hey, I've discovered the @bind-ActiveIndex bug in MatTabGroup as explained here : SamProf/MatBlazor#856
I suppose the only recourse in 2022 is to swap to another control suite instead, like MudBlazor?
Niranjan
@NiranjanRK22

Hey,
May i know how can i change the background color of the selected tab for the below code,

<MatTabGroup>
<MatTab Label="First">
First Content
</MatTab>
<MatTab Label="Second">
Second Content
</MatTab>
<MatTab>
<LabelContent>
Third <MatIcon Icon="@MatIconNames.Close"></MatIcon>
</LabelContent>
<ChildContent>
Third Content
</ChildContent>
</MatTab>

</MatTabGroup>