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

HeaderTemplate's component events

8 Answers 385 Views
TileLayout
This is a migrated thread and some comments may be shown as answers.
Ivan
Top achievements
Rank 3
Iron
Iron
Iron
Ivan asked on 19 Dec 2020, 12:54 AM

Hello!

Place TelerikNumericTextBox component in TileLayoutItem's HeaderTemplate.

The up/down buttons will not trigger and cause for tile's reordering event.

<TileLayoutItem ColSpan="4" RowSpan="7">
  <HeaderTemplate>
     <span>Title</span>
     <TelerikNumericTextBox Value="@interval" ValueChanged="@ChangeInterval" Step="1" T="int" Min="0" Max="50"  />
  </HeaderTemplate>
<TileLayoutItem />

8 Answers, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 21 Dec 2020, 02:55 PM

Hi Ivan,

After I fixed the markup (I assume it was a copy-paste issue), this seems to work fine for me with 2.20.0. I am attaching below a short video from one of my tests so you can confirm if I am missing something. If you can reproduce a problem with this, could you modify the snippet and point out what I am missing?

 

<TelerikTileLayout Columns="5" RowHeight="100px">
    <TileLayoutItems>
        <TileLayoutItem ColSpan="4" RowSpan="7">
            <HeaderTemplate>
                <span>Title</span>
                <TelerikNumericTextBox Value="@interval" ValueChanged="@( (int v) => ChangeInterval(v) )" Step="1" T="int" Min="0" Max="50" />
            </HeaderTemplate>
            <Content>The tile</Content>
        </TileLayoutItem>
        <TileLayoutItem HeaderText="Second">
            <Content>Another tile</Content>
        </TileLayoutItem> 
        <TileLayoutItem HeaderText="Three">
            <Content>Third tile</Content>
        </TileLayoutItem>
    </TileLayoutItems>
</TelerikTileLayout>

@code{
    int interval { get; set; }

    void ChangeInterval(int v)
    {
        interval = v;
    }
}

 

 

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
Ivan
Top achievements
Rank 3
Iron
Iron
Iron
answered on 22 Dec 2020, 08:09 AM
Hello Martin!
You need to set Reorderable property of TelerikTileLayout to "true" and problem is reprodused in your sample too.
0
Accepted
Marin Bratanov
Telerik team
answered on 22 Dec 2020, 10:08 AM

Hi Ivan,

When Reorderable is true, the tile layout captures the mouse events on the header to allow for dragging. That's why you wouldn't be able to focus the input or use other elements with the mouse. If you use Tab to get in the numeric textbox, you will be able to change its value with the keyboard, it's the mouse events that can't get there. I've added a note about this in the docs (commit link).

 

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
Ivan
Top achievements
Rank 3
Iron
Iron
Iron
answered on 22 Dec 2020, 10:27 AM
Thank you!
Рad to place a numeric box field outside the header.
0
Greg
Top achievements
Rank 1
answered on 04 Jan 2021, 07:44 PM
Perhaps in a future release you can incorporate a button or container for buttons that would allow hiding, minimizing, etc. in the top right of the header by default. So it could be used almost like an accordian.
0
Marin Bratanov
Telerik team
answered on 05 Jan 2021, 07:36 PM

Hello Greg,

The column menu already allows the user to do these things - there is a column chooser so they can hide columns, they can filter, sort, pin columns. You can see it in action here: https://demos.telerik.com/blazor-ui/grid/column-menu. In case that's not enough for your case, using the template and adding the desired code is the way to go. You can apply any CSS and popups you require, and you can also use the grid's parameters to bind to fields in the view-model so you can control it, or you can use its state. With all those capabilities already in place, I do not find it likely that a highly specific button container would be created in the grid. Nevertheless, you could open a public feature request in our Feedback Portal to explain the goals, how those features are not enough and what exactly you expect from such a feature. This will let the community vote and comment on such a feature so we can see if there is interest in it.

 

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
Greg
Top achievements
Rank 1
answered on 05 Jan 2021, 08:02 PM

Hi Marin.

 

Thanks for the quick reply! However, I am not talking about the grid component - I am talking about the Tile Layout and having a header template button added to the TileLayoutItem header.

0
Marin Bratanov
Telerik team
answered on 05 Jan 2021, 08:07 PM

Hi Greg,

My apologies for the mistake, I have no idea why I thought this is about the grid. Maybe because most questions are :)

The situation with the tile layout is similar - you should add your own buttons and if they need to change the tile layout settings - you can use parameters and its state and put buttons in its header template. Minimizing is not a feature of the component because it aims at creating a layout on the page, the Window can be minimized. Hiding is something you can do with conditional markup (an if-block around the desired tile) but keep in mind that this can cause issues with the state - the state is loaded sequentially tile by tile, so if it is not applied to the same collection of tiles you can get unexpected sizes and positions.

That said, if features like hiding/closing and minimizing ever become available in the tile layout - it is highly likely that there will be some sort of built-in action bar/buttons for that.

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/.

Tags
TileLayout
Asked by
Ivan
Top achievements
Rank 3
Iron
Iron
Iron
Answers by
Marin Bratanov
Telerik team
Ivan
Top achievements
Rank 3
Iron
Iron
Iron
Greg
Top achievements
Rank 1
Share this question
or