This is a migrated thread and some comments may be shown as answers.

Setting column visibility using media breakpoints

16 Answers 137 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 1
Veteran
Michael asked on 26 Mar 2020, 08:45 PM

Can you provide an example of how to set column visibility using media breakpoints?  For example, I want to be able to display more columns when the user is using an application from a desktop browser and just the essential columns when it's viewed on a phone.

 

 

16 Answers, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 27 Mar 2020, 09:05 AM

Hello Michael,

You can use an if-block in the markup to render the columns only when needed. We do something similar in this sample app: https://github.com/telerik/blazor-stocks/blob/master/Client/Pages/RealTime.razor#L47. In this sample we use a small package that offers some responsive design (https://github.com/EdCharbeneau/BlazorSize) - in this case we use the window.resize event to determine what to do, you can also tie the properties to media queries.

 

Regards,
Marin Bratanov
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Michael
Top achievements
Rank 1
Veteran
answered on 27 Mar 2020, 05:59 PM
Thanks-- I'll check it out.
0
Daniel
Top achievements
Rank 1
answered on 15 May 2020, 11:19 PM

Hello Marin,

I tried BlazorSize on my grid and it works.  However I noticed that grid columns that rely on the media queries always get added to the end of the grid.  For example, if I have a grid with four columns, and I want to hide middle columns #2 and #3 on small screens, the grid will always display them in the order 1, 4, 2, 3.  Is there any way around this without repeating the column definitions for each size scenario?

0
Marin Bratanov
Telerik team
answered on 16 May 2020, 07:31 AM

Hi Daniel,

The following feature needs to be implemented for this to happen: https://feedback.telerik.com/blazor/1434835-preserve-column-order-when-showing-hiding-columns-dynamically. In my last post there I have added a workaround through a loop over a column descriptor collection - if you populate the collection as desired, the order of the columns will come from the order of the models in the collection.

 

Regards,
Marin Bratanov
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Daniel
Top achievements
Rank 1
answered on 18 May 2020, 05:45 PM

Hi Marin,

Thank you for the reply and the link.  This approach works well as long as I don't specify any widths on the columns.  The grid's underlying table has a colgroup element that retains the original column widths even after they are dynamically regenerated.

0
Marin Bratanov
Telerik team
answered on 18 May 2020, 06:04 PM

Hi Daniel,

You can track that here: https://feedback.telerik.com/blazor/1466356-changing-the-grid-columns-collection-shows-the-new-columns-with-the-initial-widths.

 

Regards,
Marin Bratanov
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Jason
Top achievements
Rank 1
Veteran
answered on 09 Sep 2020, 09:48 PM
I'm trying to do the same which is simple with Bootstrap. Is adding class to columns on the roadmap? I want to just add class=".d-none .d-xl-block"
0
Marin Bratanov
Telerik team
answered on 10 Sep 2020, 12:45 PM

Hi Jason,

We are considering an event that will let you do that: https://feedback.telerik.com/blazor/1456957-conditional-row-and-cell-class-for-styling. If that would serve your needs, feel free to click the Vote button to raise its priority. If now, please add a comment on how you expect that to be exposed so we can take it into account when implementing that functionality.

 

Regards,
Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Jason
Top achievements
Rank 1
Veteran
answered on 10 Sep 2020, 03:26 PM

If it includes the ability to add Class to the TH and TD then yes. This may also fix the spacing issues with Column widths if you allowed a class rather than Width in GridColumn.
<th class="d-none d-xl-block"></th>
<td class="d-none d-xl-block"></td>

0
Curt
Top achievements
Rank 1
answered on 11 Feb 2021, 03:37 PM

Marin,

I cannot get the example you mention in this thread to work at all. There seems to be multiple projects involved. I have implemented exactly as the instructions indicate but I get this error?

Cannot provide a value for property 'listener' on type 'MyProject.Client.Pages.FetchData'. There is no registered service of type 'BlazorPro.BlazorSize.ResizeListener'. I copied his code exactly and it compiles and runs until I click on the FetchData link. I know this thread was written sometime ago, is there a more Telerik native solution yet? Any help you can provide is greatly appreciated! Curt

0
Marin Bratanov
Telerik team
answered on 11 Feb 2021, 05:25 PM

Hi Curt,

This looks like some missing setup for the BlazorSize package - maybe its service isn't registered when the application starts.

I made an example here that shows how you can use it (basically, copied its readme) and then I added a grid where one of its columns is only visible on larger screens. It is attached to the end of this post.

 

Regards,
Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Curt
Top achievements
Rank 1
answered on 12 Feb 2021, 02:54 PM

Marin,

Yes the project works exactly as I want mine to. It is probably because I am new to Blazor and have something set up incorrectly. Your sample project is different in that my project has the standard three WASM; Client, Server, and Shared. My project doesn't have a _host.chtml. It has an index.html in the wwwroot folder and I have made the reference to the package there.How should I configure this in the Client, then in the Server projects? Thank you again for the project. I know it will work I am just missing something. 

Curt

0
Marin Bratanov
Telerik team
answered on 13 Feb 2021, 01:28 PM

Hi Curt,

I simply used a server-side blazor project while you seem to be using a client-side blazor proeject, I can suggest you review resources like our online video training, or this free e-book on blazor,  to get a better picture of the common things, and the differences between them.

That said, I made an example for you that uses the same logic and package but on a WebAssembly project so you can compare them too.

Regards,
Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Ed
Top achievements
Rank 1
Iron
answered on 21 Jun 2021, 05:10 PM

Update: With the latest version of Telerik UI for Blazor you can use the new MediaQuery component as a replacement for BlazorSize. 

BlazorSize is still a valid solution, but the Telerik MediaQuery will reduce the number of dependencies in your project and is officially supported by Telerik.

 

https://docs.telerik.com/blazor-ui/components/mediaquery/overview

 

Best regards,

Ed Charbeneau

Pr. Developer Advocate for Progress

 

0
Unb
Top achievements
Rank 1
Iron
answered on 21 Jun 2021, 08:37 PM

@Ed this is very good news. I am trying to implement Telerik Blazor Chart to my project but I did not created my project as WebAssembly but server-client base so the sample was written for webassembly and it uses BlazorSize.

The question is that how can I replace BlazorSize with MediaQuery? BlazorSize gives me the window size with a method called GetBrowserWindowSize. I checked the examples of MediaQuery in the telerik website. And pre-defined sizes have been used in the all examples. Such as

<TelerikMediaQuery Media="(max-width: 600px)" OnChange="((changed) => XSmall = changed)"></TelerikMediaQuery>

OnChange method returns a boolean value and I created a ref object but could not find something related with size.

As I understand, this component only gives us result whether it matches size of the media or not.

here is the source code of the project which uses BlazorSide. Could you please check the client project?

https://github.com/telerik/blazor-ui/tree/master/sample-applications/blazor-stocks

 

thank you

 

0
Hristian Stefanov
Telerik team
answered on 24 Jun 2021, 02:07 PM

Hi Unb,

Indeed, TelerikMediaQuery component reports if the viewport size matches the condition in its Media attribute. The component does not have a method like GetBrowserWindowSize.

Can you please share scenarios where such a method can be valuable and how it should be used? This feedback is helpful for us.

We have a couple of examples with a responsive Chart and MediaQuery:

https://docs.telerik.com/blazor-ui/components/mediaquery/integration#chart-integration

https://github.com/telerik/blazor-ui/tree/master/chart/responsive-chart

Let me know if you need any additional information. Thank you.

Regards,
Hristian Stefanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid
Asked by
Michael
Top achievements
Rank 1
Veteran
Answers by
Marin Bratanov
Telerik team
Michael
Top achievements
Rank 1
Veteran
Daniel
Top achievements
Rank 1
Jason
Top achievements
Rank 1
Veteran
Curt
Top achievements
Rank 1
Ed
Top achievements
Rank 1
Iron
Unb
Top achievements
Rank 1
Iron
Hristian Stefanov
Telerik team
Share this question
or