Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions knowledge-base/attaching-images-dotnet-maui-chat.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ I want to know how to attach an image in the .NET MAUI Chat and display the imag
This knowledge base article also answers the following questions:
- How to upload an image in .NET MAUI Chat?
- How to create a custom template for images in .NET MAUI Chat?
- How to use ItemTemplateSelector to manage media content in .NET MAUI Chat?
- How to use `ItemTemplateSelector` to manage media content in .NET MAUI Chat?

## Solution

Expand Down Expand Up @@ -115,13 +115,13 @@ add additional elements here <ImageButton /> or <telerik:RadTemplatedButton />

Use the following steps to display images in the chat:

1. Implement the logic for uploading images in the button's command.
**1.** Implement the logic for uploading images in the button's command.
>note To handle image uploads in .NET MAUI, you need to ensure your application has the necessary permissions to access the device's storage and camera.

2. Create a custom `ItemTemplate` to display image messages.
3. Use the `ItemTemplateSelector` to dynamically choose templates based on message content.
**2.** Create a custom `ItemTemplate` to display image messages.
**3.** Use the `ItemTemplateSelector` to dynamically choose templates based on message content.

Follow the steps outlined in the [ItemTemplateSelector documentation](https://docs.telerik.com/devtools/maui/controls/chat/item-template-selector) to configure this functionality.
Follow the steps outlined in the [`ItemTemplateSelector` documentation](https://docs.telerik.com/devtools/maui/controls/chat/item-template-selector) to configure this functionality.

Example of an `ItemTemplate` for rendering messages with images:

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
---
title: Remembering and Restoring Expanded Rows in TreeDataGrid for .NET MAUI
description: Learn how to efficiently remember expanded rows and restore them in TreeDataGrid for .NET MAUI.
type: how-to
page_title: Efficiently Remember and Restore Expanded Rows in TreeDataGrid for .NET MAUI
meta_title: Efficiently Remember and Restore Expanded Rows in TreeDataGrid for .NET MAUI
slug: remembering-restoring-expanded-rows-treedatagrid-dotnet-maui
tags: treedatagrid, .net maui, expand, collapse, isexpanded, isexpandablebinding
res_type: kb
---

## Environment

| Version | Product | Author |
| --- | --- | ---- |
| 11.1.0 | Telerik UI for .NET MAUI TreeDataGrid | [Dobrinka Yordanova](https://www.telerik.com/blogs/author/dobrinka-yordanova) |

## Description

I want to remember the expanded rows in the TreeDataGrid and restore them later. What is the most efficient way to achieve this?

This knowledge base article also answers the following questions:
- How can I store expanded items in TreeDataGrid for later use?
- How can I restore the expansion state in TreeDataGrid after changes?
- What is the best way to manage expanded rows in TreeDataGrid?

## Solution

To achieve the scenario you can use one of the following approaches:
* [Using `Expand` and `Collapse` methods](#using-expand-and-collapse-methods)
* [Using `IsExpandableBinding` property of the `TreeDataGridDescriptor`](#using-isexpandablebinding)

### Using Expand and Collapse Methods

To achieve this, follow these steps:

1. Use `Expand()` and `Collapse()` methods to expand or collapse items.
2. Use the `IsExpanded` method to check whether an item is expanded.
3. Store the expanded items in a collection, such as a `List<YourDataClass>`.
4. Iterate through the collection to restore the expanded state by calling the `Expand()` method.

```C#
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
this.BindingContext = new ViewModel();
}

// Collection for storing expanded items
List<Data> expandedItems = new List<Data>();

private void Button_Clicked(object sender, EventArgs e)
{
var items = (IEnumerable)this.tdg.ItemsSource;
this.expandedItems = new List<Data>();
AddExpandedItems(items, expandedItems);
}

private void AddExpandedItems(IEnumerable items, List<Data> expandedItems)
{
foreach (Data item in items)
{
if (this.tdg.IsExpanded(item))
{
expandedItems.Add(item);
}

IEnumerable childrenOfTheItem = item.Children;
AddExpandedItems(childrenOfTheItem, expandedItems);
}
}

private void Button2_Clicked(object sender, EventArgs e)
{
foreach (Data item in this.expandedItems)
{
this.tdg.Expand(item);
}
}
}
```

### Using `IsExpandableBinding`

As an alternative, use the [`IsExpandableBinding`](https://docs.telerik.com/devtools/maui/controls/treedatagrid/descriptor) property at the descriptor level. This approach provides direct control over the expandability of rows via data binding.

1. Add a `bool` property in the data model to indicate whether an item is expandable.
2. Bind this property to the `IsExpandableBinding` property of the TreeDataGrid descriptor.
3. Implement the logic in button clicks to get and restore expanded items.

## See Also

- [TreeDataGrid Overview](https://docs.telerik.com/devtools/maui/controls/treedatagrid/overview)
- [Expand and Collapse Methods in TreeDataGrid](https://docs.telerik.com/devtools/maui/controls/treedatagrid/methods)
2 changes: 1 addition & 1 deletion styling-and-themes/overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@ After applying the `Purple` swatch, the ToggleButton looks like this:

## Applying Theme Colors throughout the App

You can use the colors provided by the Telerik theming mechanism and apply them everywhere in your application. Each theme swatch provides a set of colors that you can use in parts of your app that aren't Telerik components. This allows you to achieve a consistent look and feel.
You can use the colors provided by the Telerik theme and its swatches. Each theme swatch provides a set of colors that you can use in parts of your app that aren't Telerik components. This allows you to achieve a consistent look & feel.

For example, you can use the `RadAppSurfaceColor` and `RadOnAppSurfaceColor` colors for background/text color respectively, and `RadPrimaryColor` for the accent color to match the appearance of the Telerik controls:

Expand Down
Loading