Dimo,

I've implemented what I wanted using your GridLayout.  I've attached an animated GIF demonstrating it so you can reference it when implementing the "Able to drag tile on empty spaces on TelerikTileLayout" ticket.

• Grid starts off seemingly empty / whitespace (locked/normal/running/non-edit mode) but in truth has a set number of columns and rows.
• User adds a 'widget' tile (custom content wrapped in a GridLayoutItem) and the layout switches to 'edit mode' (I highlight the grid boxes so user can see the snap points)
• User can dynamically add/remove as many tiles as they wish (automatically finds and places it in the first available valid/empty location or rejects the operation if no space is available)
• User can dynamically resize any tile they wish (snaps to grid)
• User can dynamically drag/move any tile to any valid location (snaps to grid)
• If user drags a tile over another tile (or off screens/out of bounds) they get a warning or some indication there's a problem and their move/resize gets rejected.
• The layout can be serialized and then reloaded later (user will define the layout in edit mode, save it and then load/use it for display purposes as they see fit)

Hopefully this helps at least provide a visual context for what I'm looking for.  Obviously I'm good to go now, but once you have your new component generally available I'll switch as I'd rather have as few custom components as possible.  Thanks for entertaining this request!

Sure thing, this system is for sensor data acquisition and visualization, so:

What are the tiles (items) that users will be arranging on the screen? What type of information will they contain?

The tiles will contain other Telerik components to visualize real-time numeric sensory data (mainly basic tables, telerik charts, gauges, text/numeric textboxes and buttons)

1. What brings the need to have empty spaces (holes) in the arranged layout?

This is a request from the userbase.  The dashboard(s) are user defined both in content and in layout.  They group related items (everything coming from a genre of sensors for example) together and want to be able to position them all over their monitors.  For example they may place all port sensors (this is on a ship) on the left and all starboard sensors on the right.  They also want to maximize whitespace as visual buffers to distinguish between logical groupings.

1. What exactly is frustrating for your users now?

The lack of intuitive methods to go from the initial basic linear layout to the end-goal desired layout in their head.  For example in the prior image I sent you I had white space above the "Bounce Rate" box.  If I'm honest I have no idea how I got that nor could I easily repeat it if I wanted it.  When I wanted to move it back up I wasn't allowed to by drag&drop, but if I fiddled with other things it "automatically" repositioned itself into the area I wasn't allowed to drop it in.  This makes not sense, either it can or it cannot go there & if it can then I should be able to drag it there.  This type of experience leads to frustration, especially if I as the developer cannot explain to them what's going on.

1. Do you think these possible future TileLayout enhancements will serve your purpose:
   • Drag and drop between TileLayouts - with this feature, each TileLayout will be a separate placeholder with defined dimensions and position. Users will be able to move tiles from one instance to another, and the other tiles will rearrange less.
   • Disable reordering and resizing of specific TileLayout tiles

No, probably not.  Having multiple TileLayouts w/interchangeable tiles would be beneficial if I knew before-hand the general layouts they desires, but when it's fully user-defined that won't help.  As for locking specific tiles - in my use case the dashboard is either fully in 'edit' mode (all tiles have reorder/resize enabled) or in 'view' mode (all tiles are locked).  

Thanks for the quick reply, Dimo. 

When creating a dashboard it's usually for a decent sized monitor, I'd much rather be able to logically group and place objects all over the screen manually than have assistance.  In the current version of our software we use jQuery UI (see 'current_js_version') which gives the user total control.  Some folks like this, but in practice I think it usually ends up in cluttered and visually unappealing mess.  I'd prefer to block the ability to overlap, which of course I can do with what I've got already via javascript but I'm trying to move over to Blazor for this next major version.

You've already written all the code for what I (and I think most others who've been asking for something similar) want.  It's a hybrid between your TileLayout and your GridLayout.  Basically a GridLayout with manual 'tile resize/movement' features.

So, a simplified GridLayout where I predefine a set number of columns and rows (equally spaced) upon which I can add Tiles.  The user can resize/move the tiles similar to the TileLayout to any coordinate in the grid (column, row == upper left corner of tile, width == ColumnSpan, height == RowSpan). 

If the user's operation results in an overlap (eg they move the tile and any part of where it would land is already occupied by another tile) then the two tiles turn red or you can present whatever "you can't do that" type of indicator you'd like rather than trying to adjust everything to accommodate them.  If the user really wants that tile to go there then they'd have to clear the space manually by dragging the existing tile out of the way or resize/delete it, before they can do so.

The resizing and the drag and drop features of the TileLayout are great, exactly what I want.  But I'd rather do the space optimization manually.

So I'd write something like this:

<GridLayout Columns="160" Rows="90" Resizable="true" Reorderable="true">

    <GridLayoutItems>

            <GridLayoutItem ...

    ....
</GridLayout>
 

I know this allows gaps as I can just randomly comment out one of your entries in a REPL example and it disappears.  This is exactly what I want, all it needs is the added ability for a user to resize/move the items.