diff --git a/knowledge-base/attaching-images-dotnet-maui-chat.md b/knowledge-base/attaching-images-dotnet-maui-chat.md index 5b991e15..8bc908c8 100644 --- a/knowledge-base/attaching-images-dotnet-maui-chat.md +++ b/knowledge-base/attaching-images-dotnet-maui-chat.md @@ -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 @@ -115,13 +115,13 @@ add additional elements here or 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: diff --git a/knowledge-base/remembering-restoring-expanded-rows-treedatagrid-dotnet-maui.md b/knowledge-base/remembering-restoring-expanded-rows-treedatagrid-dotnet-maui.md new file mode 100644 index 00000000..1fc85f2c --- /dev/null +++ b/knowledge-base/remembering-restoring-expanded-rows-treedatagrid-dotnet-maui.md @@ -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`. +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 expandedItems = new List(); + + private void Button_Clicked(object sender, EventArgs e) + { + var items = (IEnumerable)this.tdg.ItemsSource; + this.expandedItems = new List(); + AddExpandedItems(items, expandedItems); + } + + private void AddExpandedItems(IEnumerable items, List 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) diff --git a/styling-and-themes/overview.md b/styling-and-themes/overview.md index c86f68ee..78a15c50 100644 --- a/styling-and-themes/overview.md +++ b/styling-and-themes/overview.md @@ -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: