Hi there!

I have created a component (Component) that is a TileLayoutItem. It renders fine for the first time but it doesn't re-render after its properties changes (OnClickHandler).

Am I doing something wrong? The exact same code works if added directly on Main.

Running example: https://blazorrepl.telerik.com/mnbQmvlX24maslQE52

Component

<TileLayoutItem>
    <HeaderTemplate>
        <a href="#">Component<span class="k-icon k-i-caret-alt-right widget-title-icon"></span></a>
    </HeaderTemplate>
    <Content>
        @test
        <TelerikButton OnClick="@OnClickHandler">Click me!</TelerikButton>        
    </Content>
</TileLayoutItem>
@code {
    private string test = "Button was not clicked yet";
    private void OnClickHandler(MouseEventArgs args)
    {
        test = "Button was clicked at: " + DateTime.Now.ToString();            
    }
}

Main

<TelerikTileLayout Columns="1">
    <TileLayoutItems>
        <Component></Component>
        <Component></Component>
        <TileLayoutItem>
            <HeaderTemplate>
                <a href="#">TileLayoutItem<span class="k-icon k-i-caret-alt-right widget-title-icon"></span></a>
            </HeaderTemplate>
            <Content>
                @test
                <TelerikButton OnClick="@OnClickHandler">Click me!</TelerikButton>        
            </Content>
        </TileLayoutItem>
    </TileLayoutItems>
</TelerikTileLayout>
@code {
    private string test = "Button was not clicked yet";

    private void OnClickHandler(MouseEventArgs args)
    {
        test = "Button was clicked at: " + DateTime.Now.ToString();            
    }
}

Hello all,

In my app I use tile layout to let the user manage a bunch of charts and other things. when in "edit mode" I want the headers of the tiles to be displayed, but in "browse" mode I want the headers of the tiles to be invisible as the title of the tile et all is already in the chart displayed in the tiles content.

Using an empty <HeaderTemplate> I still get an empty  one line header for each tile.

Is there a way around this,? Otherwise, please see this as a FR.

Regards,

Hans

I'm working on a landing page builder, I need to be able to do a couple of extra things with TileLayout. I would like this behaviour to be added optionally by configuration. 

I would like to Drag & Drop elements between two TelerikTileLayout collections.

In my dahsboard I want to have groups of tiles, like the ones in SAP launchpad, here are some images. I want to move tiles from one section to another.

https://experience.sap.com/wp-content/uploads/sites/56/2021/06/SAP-Fiori-Launchpad-Spaces_MyHome_1.96.png

I would like to specify the actual position of a element with the Row & Column index.

I want to build a launchpad like the one in Azure. Here are some images of what I want to build. As you can see, you are free to chose any row/col you want in the grid.

https://media.licdn.com/dms/image/C5112AQGroL99SJPhag/article-cover_image-shrink_720_1280/0/1559712744601?e=2147483647&v=beta&t=0_c13EnPEq_pxXxf8SNuH1jzC4_N8hUYR_uf2kUKmSA

https://adamtheautomator.com/wp-content/uploads/2022/09/image-93.png

Hi there,

I'm facing a problem with charts in a tile layout. I have a TileLayout in my applicaton and added some charts (which are in another component) to it. I checked the documentation about TileLayout and resizing so I followed those steps. Please check out my code:

Razor MainPage:

<TelerikTileLayout Columns="5"
           ColumnWidth="300px"
           Reorderable="true"
           Resizable="true"
           OnResize="TileItemResize">
    <TileLayoutItems>
        <TileLayoutItem HeaderText="My Item Text" RowSpan="2">
            <Content>
                <TurnoverComparisonWidget @ref="TurnoverComparisonRef" SelectedWidget="widget" IsLoad="true"></TurnoverComparisonWidget>
            </Content>
        </TileLayoutItem>
    </TileLayoutItems>
</TelerikTileLayout>

Razor TurnoverComparisonWidget:

<TelerikChart @ref="ChartRef" Height="100%">
    <ChartTooltip Visible="true"></ChartTooltip>

    <ChartSeriesItems>
        <ChartSeries Type="ChartSeriesType.Column" Data="ChartData" Field="@nameof(ChartDataItem.Value)" CategoryField="@nameof(ChartDataItem.CategoryName)">
            <ChartSeriesLabels Visible="true" Format="{0:C2}"></ChartSeriesLabels>
        </ChartSeries>
    </ChartSeriesItems>
</TelerikChart>

C# MainPage:

public TurnoverComparisonWidget TurnoverComparisonRef { get; set; }

private void TileItemResize()
{
    TurnoverComparisonRef.Refresh();
}

C# TurnoverComparisonWidget:

public TelerikChart ChartRef { get; set; }

public void Refresh()
{
    ChartRef.Refresh();
}

But the chart is not resizing when I resize the tile layout item. It just stays the same size and never changes. Did I forget anything? I can't figure it out.

Best Regards,
Roman

I recall being told I would have access to source code once I buy a licence.

Now that I have a licence, how do I get access to the source so I can do a local build?

The example for the OnReorder feature returns a null result. The Id (args.Id) is never shown in the console log message.

@* Handle the OnResized event *@

<TelerikTileLayout Columns="3"
                   Reorderable="true"
                   OnReorder="@OnReorderHandler">
    <TileLayoutItems>
        <TileLayoutItem HeaderText="Panel 1">
            <Content>Regular sized first panel.</Content>
        </TileLayoutItem>
        <TileLayoutItem HeaderText="Panel 2">
            <Content>You can put components in the tiles too.</Content>
        </TileLayoutItem>
        <TileLayoutItem HeaderText="Panel 3" RowSpan="3">
            <Content>This tile is three rows tall.</Content>
        </TileLayoutItem>
        <TileLayoutItem HeaderText="Panel 4" RowSpan="2" ColSpan="2">
            <Content>This tile is two rows tall and two columns wide</Content>
        </TileLayoutItem>
    </TileLayoutItems>
</TelerikTileLayout>

@code{
    async Task OnReorderHandler(TileLayoutReorderEventArgs args)
    {
        Console.WriteLine($"tile {args.Id} reordered, might be a good time to save the state.");
    }
}

Right now, each tile can be created in each Content and TilelLayoutItem tag. The way my current list works is to use the TileLayout inside of a TelerikListView component using my list as the data. Like this:

<TelerikListView Data=@Data
                 Pageable="true"
                 PageSize="int.MaxValue">
                 <Template>



    <TelerikTileLayout Columns="1"
                       Reorderable="true"
                       Resizable="false"
                       RowHeight="180px">


        <TileLayoutItems>
            <TileLayoutItem HeaderText="Descriptors">
                <Content>@context.Description</Content>
            </TileLayoutItem>

        </TileLayoutItems>
    </TelerikTileLayout>
        </Template>
    </TelerikListView>

It shows each item from the list in a new tile as expected, but the problem with this is that since I put it in just one Content/TileLayout tag, each tile somehow counts as one tile, so the Reorderable feature doesn't work. You can test this by adding a another Content tag. The contents of the second tag will only be able to swap with the contents of the first tag, but the contents of the first tag still won't be able to swap with each other. Does the same thing if you use a foreach loop to display the list data as well.

How do I achieve using Tile Layout to display preexisting data/ list items that can reorder? Or how can I reorder the tiles while using a foreach loop?

Hi,

I'm using Telerik UI for Blazor and I want to use the "alert-danger" bootstrap css class to change the color of a tile item.

I put the css class in the TileLayoutItem (@_cssClass) :

But the color is overrided by the k-card class. I know I could create my custom css class and put !important in it, but I would just copy the same code as in alert-danger class.

I also tried to set the class in the html element I built, but the background color is not "expanding" to all the tiles :

If I put the css class in the div k-tilelayout-item-header and in the div k-tilelayout-item-body, I can have the desired result too, but I didn't find a way to set those in the code.

Is there another way I could acheive the result I want without having to create my own css class ?

Thank you.

When user resizes a TileLayoutItem in a TileLayout, I am trying to detect the new RowSpan and ColSpan values using the OnResize Event.

However, it appears as if the RowSpan and ColSpan values don't update?

Simple Example, resize a tiled item and look at the console output (it never changes regardless of the new user-set spans):

@using Telerik.Blazor.Components

<TelerikTileLayout Reorderable="true" Resizable="true" Columns="4" ColumnWidth="200px" RowHeight="200px" 
                                 OnResize="@OnResize">
        <TileLayoutItems>
            <TileLayoutItem @ref="@_tileItem1" Id="tile1" HeaderText="Tile 1" ColSpan="1" RowSpan="1">
                <Content>Tile 1</Content>
            </TileLayoutItem>
            <TileLayoutItem @ref="@_tileItem2" Id="tile2" HeaderText="Tile 2" ColSpan="1" RowSpan="1">
                <Content>Tile 2</Content>
            </TileLayoutItem>
        </TileLayoutItems>
</TelerikTileLayout>

@code {

    private TileLayoutItem _tileItem1 = null;
    private TileLayoutItem _tileItem2 = null;

    private void OnResize(TileLayoutResizeEventArgs args)
    {
        if (args.Id == "tile1") { Console.WriteLine($"rows: {_tileItem1.RowSpan}, cols:{_tileItem1.ColSpan}"); }
        else if (args.Id == "tile2") { Console.WriteLine($"rows: {_tileItem2.RowSpan}, cols:{_tileItem2.ColSpan}"); }
    }

}

Hi

I saw this demo: https://github.com/telerik/blazor-ui/tree/master/tilelayout/add-remove-tiles

It looks great but its added code.

So it would be nice to have this behavior build into the component:

1. Have a property with a list of available components

2. have the component let the user pick from a list (The list could be a dropdown value list)

3. With saving state also save the connected component

4. have an event on which we instantiate the component when the layout is shown

Eric