Completed
Last Updated: 11 Sep 2020 13:56 by ADMIN
Release 2.17.0
James
Created on: 26 Sep 2019 15:53
Category: UI for Blazor
Type: Feature Request
25
Dashboard layout component

Please add a dashboard layout component.

 

ADMIN EDIT: There seems to be demand for such a component/feature, so we have re-opened it to gather feedback on what is the expected functionality and use cases. You can Vote for this, Follow its progress, and leave a comment with your expectations/requests. You can also review the discussion for some technical limitations that prevent an implementation at the moment.

ADMIN EDIT 2: The component will be similar to this one: https://demos.telerik.com/kendo-ui/tilelayout/index

19 comments
ADMIN
Marin Bratanov
Posted on: 06 May 2020 03:35

Thank you for your feedback, Hugo. I will make sure to send these resources to the rest of the team.

At this point, it is likely that we will provide templates where the application will choose what to load, as this is the typical approach a component library should use, so the consuming app itself can decide what and how to render there.

 

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.
Hugo Augusto
Posted on: 05 May 2020 22:47

Also this one is very interesting

blazor-dragdrop library

Ben Hayat
Posted on: 10 Apr 2020 10:44

I also was going to say, Azure dashboard is a good direction as many people use it and MSFT has done a lot of investment in it.
So having a similar look & feel will attract developers to use such dashboard.
We have to use use such dashboard in two places
1) Our SaaS system Admin module for internal use with Blazor Server.
2) Each SaaS tenant Admin system to manage their users, settings, and etc.

It's more like the old Ribbon system.

 

Geoff
Posted on: 10 Apr 2020 00:18

Keeping my comment simple: my opinion is that there should be a dashboard layout component like Azure dashboard.  Tha Azure dashboard isn't perfect but is more than adequate - and there could be limitations on a Blazor dashboard like all blazor components on one row be the same height.

Blazor components would neatly fit into a dashboard scenario.  So many of Telerik controls have UI and functionality which can 'nearly' be an adequate dashboard - but not quite.

Dashboards are such a great asset for any application - with the ability to act like a visual menu but also displaying graphs and real-time data.  The User needs to be able to choose blazor components from a list to pin to the dashboard, then in edit mode, choose the size and move position (all like Azure).

Geoff

ADMIN
Marin Bratanov
Posted on: 27 Nov 2019 09:10

Thank you, Patrick. I must note once again that programmatic component creation is impossible in Blazor, so something like .AddContent() or .AddInstance() will be tough and will likely require foreach loops over view models. Let's see how the framework evolves, though, something might become available that will make such a task more manageable.

--Marin

Patrick
Posted on: 26 Nov 2019 19:03

1. I would think creating a json form would be the least of the concerns. Everytime a change is made you can track it and keep an internal representation of that. You certainly don't need to perform blazor voodoo magic at the end to accomplish this.

As for the item itself you can have an interface or a callback to get a text representation. You can even avoid this by assigning each panel a guid and the user can use that to track things. It certainly doesn't have to be end of the world complicated.

2. Adding could be configurable to be top-left or top-right and things move down "away" to make room. Logic should be very simple. Adding could even be such that I can add an x by y panel to x1, y1. This logic is trivial if it is assumed that there is infinite space at the bottom thus things can always move down.

3. I would prefer to not read things using a for loop. I would prefer to either get a string[] or a byte[] and just stick it in the DB. Reading and reconstituting would be very similar. I certainly don't want to have to do a huge amount of logic for something that shouldn't be my concern to begin with. If every panel as a unique Id then I could even do something like AddContent(guid, url) would would populate the panel.

4. Dragging and resizing should be very easy if the control is divided into x by y blocks. If there is a conflict through positioning then a block either moves to a free adjacent space or it moves down. This logic is then perform recursively until all blocks are conflict free.

 

ADMIN
Marin Bratanov
Posted on: 26 Nov 2019 18:05

Thank you for your feedback, Patrick. To bring some thoughts from the other end of this implementation and to ask some clarifying questions:

  • Serializing components is impossible in blazor, the render tree is not serializable. Thus, any state saving will have to be some custom implementation, especially for the content. This is one of the trickiest parts. If you are familiar with WebForms - take a look at the complexities around  this in our RadDock - the situation is pretty similar (but you have far fewer lifecycle events in blazor and you can't create components programmatically like in WebForms).
  • How would you expect adding/removing a panel (card, dock) to happen? What is the UI and UX of that action? How should the component know where to add an item and with what size and content, especially considering the declarative-first nature of Blazor?
  • Even if a method is available that returns a form of state (let's say number of panels, their locations, sizes, titles), it would be possible to read it in a foreach loop. At the moment, you can do something similar in your own view-models. A similar example is available for our tab strip (see the last snippet here). Would such store-restore of the state work for you, as it would also let you define components for the content from the view model? What kind of component would you expect on top of that, considering you can add your own cards as components, and you could also style those cards with our themes right now (apart from some form of drag/resize)?
  • How would you expect dragging and resizing to expose the new state? How should they re-arrange the other contents considering that we can't know the HTML layout and sizes (for example, the entire layout component should not allow other content but cards, and they should resize in some steps, or through some other constraints)?

The point in asking these questions is that there is a huge amount of undefined and non-deterministic behavior in such a component, and exposing configuration options and API for it will either limit some scenarios, or require a lot of application logic. Clarifying such expectations and preferences on how you expect to use it can help defining them.

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
Patrick
Posted on: 26 Nov 2019 17:46

I commented previously however want to establish a more concise list of my requirements.

My understanding is a dashboard layout component is really no different from a button. They both are UI controls that accomplish specific purposes. Therefore the only reason I would think to not create this is if it was fundamentally complicated and very difficult to get correct. Otherwise it would be very nice to have available.

With that said I am building an application where users can essentially mix and match items and create their own customized dashboard layout. For this I have the following simple requirements:

  1. Add panels
  2. Remove panels
  3. Resize panels with others dynamically moving to make room
  4. Move panels with others dynamically moving to adjust
  5. Save layout to json/xml
  6. Restore layout from json/xml
  7. Save and restore should allow the contents of the panel to be serialized/deserialized so the exact dashboard (contents) could be realized.

The layout system would likely be composed of a fixed sized block where every x and y size is a multiple of that box.

ADMIN
Marin Bratanov
Posted on: 26 Nov 2019 14:33

To everyone, we have reopened this to gather feedback and requests. You can still review the discussion for the technical issues that prevent implementation at the moment, yet you can keep voting and commenting on what you need and what is the use case, so we can get a better picture of what you need, so we could build it.

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
ADMIN
Marin Bratanov
Posted on: 26 Nov 2019 13:46

Hi Andries,

To expand a bit on this, as this is a public thread.

We do have a similar component in our UI for ASP.NET AJAX suite - RadDock. It encroaches into application logic territory and with the amount of features it is expected to provide, it becomes quite difficult to use, maintain and configure. For one, it requires zones, layouts and some for of persistence, plus a way of re-generating instances from a data source, and their content. In Blazor (or, generally, Razor), the idea is that you can put all of this conditional markup and component generation in your own application code so it can directly step on the models and data you have, without an added layer of complexity.

Another major problem is that this is basically CMS-level functionality - letting your users re-arrange and save layouts/designs. It is by far not a simple task at the component level - this is why entire applications exists that perform this task. For example, in the Telerik Sitefinity CMS you can create custom modules for your end users to re-arrange and they can create dashboards like that.

These are some more of the reasons why we are reluctant to implement such a component for Blazor, it is not just the technical feasibility - it simply goes beyond the scope of components, and becomes messy. On the other hand, if we create a draggable component, it is likely that it will offer an event or a way to know where it was dropped, so it is likely that you will be able to implement similar logic yourself by storing all necessary data with your own code, logic, approach and preferences.

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
Andries
Posted on: 26 Nov 2019 13:32

 

Hi Marin,

 

I understand. Thanks for the feedback.

 

Cheers

Andries

ADMIN
Marin Bratanov
Posted on: 26 Nov 2019 13:27

Hello Andries,

To the best of my knowledge, the Syncfusion Blazor components are wrappers over their jQuery suite, and not native components, while we are working on creating native components from the ground up.

In our tests so far dragging stuff in Blazor that has native components inside is limited, at best. While dragging with just HTML is likely possible, things will get messy when actual native components are thrown into the mix. Even if we implement a draggable component, we will have to wait for the framework to mature enough to allow it.

Moreover, our components do not aim at creating layouts, but at fitting into the application layout. Thus, I can suggest you consider Bootstrap or another similar grid layout tool for creating the layouts of the application, so you can fill them in with our components.

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
Andries
Posted on: 26 Nov 2019 11:56

We're also migrating to blazor and one of the most demanded feature from our clients would be able to have a grid-structured layout component that helps create static and dynamic dashboard layouts with panels.. 

Noticed that syncfusion provides a great solution..

ADMIN
Marin Bratanov
Posted on: 24 Oct 2019 08:13

Hi Patrick,

It is out of the scope of the component suite because:

  • Layouts are out of the scope of our components in general. We will not implement layouts as components or features of ours, even if we do create examples in our demos and sample apps.
  • Dragging things in Blazor is next to impossible right now - not only is there no provision for it, but you have to actively fight with the framework to achieve it, and that's just dragging HTML, not components.

At this point I can't say whether docks will be implemented in Blazor at all. We don't have them in Kendo, and in WebForms where we do, they have historically been difficult to use and have been causing a lot of issues and difficulties, mostly because state persistence and re-creation is very tricky. This is why such tooling is usually in the realm of full-blown CMS solutions and not component suites.

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
Patrick
Posted on: 23 Oct 2019 19:31

Is it out of scope because of complexities in Blazor?

How is this different from the WPF layout or docking controls?

For my blazor application I actually do need a dashboard where users can drag and drop with resize.
If needed I can create separate items for the layout and docking control requests.

ADMIN
Marin Bratanov
Posted on: 30 Sep 2019 08:27

Hi James,

We produce UI components and not a CMS or layout generator. Perhaps a drawer-like side-nav would be implemented at some point as per your other request, and perhaps a toolbar, but a drag-and-drop layout generator is out of our product scope.

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
James
Posted on: 27 Sep 2019 14:57
please consider the component that one of your competitors has that does this. It allows for drag and drop movement of card components. It combines a sidenav bar and app bar functionality. 
ADMIN
Marin Bratanov
Posted on: 27 Sep 2019 06:52

Hi James,

Layouts are something highly specific to the concrete app and are not very reusable. We focus on reusable components instead. Layouts are usually created through other tools (such as bootstrap) for the particular needs of the site.

What I can suggest is that you download our demos and see how we made the layout there, or download the dashboard app we have to see if you like its layout so you can reuse it: https://github.com/telerik/blazor-dashboard.

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor