Is it possible to control the visibility on the columns on the datagrid based on the device type a user is accessing it from? The use case for me is that on mobile I would like to limit the amount of information shown about a record to say the Title, created date, and status. This would make it cleaner to view without excess scrolling. The full browser window could still show 8-10 columns.
Sure! You can bind the column Visible property to current user role. For example:
${security.user.isInRole('admin')}
How would the role change if the same user logged in from a smartphone browser vs a PC? I can understand the use for role membership but am not clear how the role changes based on either the window size of the browser or the device type a user is logging in from.
Example - Joe Smith has access to a datagrid page. The datagrid has 10 columns on his Windows PC.
- Joe logs in from his phone and accesses the same screen. The datagrid shows 3 columns.User roles are not related to used device to open the app or screen size. Roles are set by administrator for every user and will not change during the application execution.
Hmm.. I've misunderstood your question. It should be possible to hide/show columns depending on the screen size. I'll do my best to post here an example later today.
very cool. thank you.
Hi Josh,
Sorry for the late reply!
You can create a page property equal to ${window.innerWidth} and bind it to column Visible property :
Best Regards,
Vladimir
Thank You so much. This gave me an idea to use this on 2 controls instead of just the columns. I had my existing page with a datagrid on it and I added a datalist above it. I set the property on page load and then bound the datalist visibility to ${windowWidth < 768}. This works when the window is sized for a phone and displays or hides the list. I then set the datagrid visibility to ${windowWidth > 767} and it does not work. I actually get no grid or list and it seems to stop responding as I cannot move to any other screen after that. I remove the visibility code for the datagrid and it works fine again.
Am I missing something?
I felt like being able to choose the list or grid would fit better but have a single screen to manage.
Any JS errors? When you hide an entire component the reference property in the page becomes null. If there is any code that uses the hidden component e.g. this.grid0.allowPaging it will not work.
Yes I have "count" properties being set that use this. Oh well would have been nice. I'll just change the column visibility on the grid.
When I attempt to do this I get an error on build that says "dotnet: Pages\SiteTraffics.razor.designer.cs(80,27): error CS0103: The name 'window' does not exist in the current context [C:\Users\kenne\OneDrive\Documents\NewPromoEngine\server\NewPromoEngine.csproj]"
Sorry I see this is angular ... Do you have a similar example for blazor?
1 Like
@Kenney_Myers no this is not possible in Blazor since the solution relies on JavaScript. I suggest you set the Responsive property of the DataGrid to false for now. This will disable the responsive CSS that is applied on mobile devices.
I have found a way to get the screen size and track when it resizes using a nuget package https://github.com/EdCharbeneau/BlazorSize
1 Like
Now I just need to figure out how to make columns not visible dynamically. Do you think I can use a variable in the Visible property dynamically? Probably not.
SWEET! That works! You can just set the Visible property to a boolean that is tied to the window width provided by BlazorPro.BlazorSize. Very nice!
I HIGHLY recommend this nuget package to anyone wanting to turn off the responsive flag and manage which columns show using the Visible property. Works like a charm!
Oh yeah sorry for the crosspost this is specific to BLAZOR not angular.
1 Like