https://github.com/skybrud/skybrud.umbraco.griddata
Strongly typed model for the grid in Umbraco.
https://github.com/skybrud/skybrud.umbraco.griddata
csharp dotnet grid limbo package skybrud umbraco umbraco-package umbraco-packages umbraco-v10 umbraco-v11 umbraco-v12 umbraco-v7 umbraco-v8 umbraco-v9
Last synced: 10 months ago
JSON representation
Strongly typed model for the grid in Umbraco.
- Host: GitHub
- URL: https://github.com/skybrud/skybrud.umbraco.griddata
- Owner: skybrud
- License: mit
- Created: 2014-09-18T07:09:27.000Z (over 11 years ago)
- Default Branch: v13/main
- Last Pushed: 2024-09-28T14:07:47.000Z (over 1 year ago)
- Last Synced: 2025-07-22T10:28:58.561Z (11 months ago)
- Topics: csharp, dotnet, grid, limbo, package, skybrud, umbraco, umbraco-package, umbraco-packages, umbraco-v10, umbraco-v11, umbraco-v12, umbraco-v7, umbraco-v8, umbraco-v9
- Language: C#
- Homepage:
- Size: 3.08 MB
- Stars: 36
- Watchers: 12
- Forks: 12
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Skybrud Grid Data
[](https://github.com/skybrud/Skybrud.Umbraco.GridData/blob/v13/main/LICENSE.md)
[](https://www.nuget.org/packages/Skybrud.Umbraco.GridData)
[](https://www.nuget.org/packages/Skybrud.Umbraco.GridData)
[](https://marketplace.umbraco.com/package/skybrud.umbraco.griddata)
**Skybrud.Umbraco.GridData** is a package with a strongly typed model for the grid in Umbraco. The package makes it easy to work the grid in your MVC views, master pages or even in your custom logic - eg. to index the grid data in Examine for better searches.
Version 13 of this package specifically targets Umbraco 3, but past major versions also support older versions of Umbraco. For the Umbraco 10-12 package, see v4/main branch. For the Umbraco 9 package, see v4/main branch. For the Umbraco 8 package, see v3/main branch.
## Links
- Installation
- Examples
- Indexing with Examine
- Rendering the grid
- Extending the grid
## Installation
The Umbraco 13 version of this package is only available via NuGet. To install the package, you can use either .NET CLI:
```
dotnet add package Skybrud.Umbraco.GridData --version 13.0.0
```
or the older NuGet Package Manager:
```
Install-Package Skybrud.Umbraco.GridData -Version 13.0.0
```
**Umbraco 10-12**
For the Umbraco 9 version of this package, see the [**v5/main**](https://github.com/skybrud/Skybrud.Umbraco.GridData/tree/v5/main) branch instead.
```
**Umbraco 9**
For the Umbraco 9 version of this package, see the [**v4/main**](https://github.com/skybrud/Skybrud.Umbraco.GridData/tree/v4/main) branch instead.
**Umbraco 8**
For the Umbraco 8 version of this package, see the [**v3/main**](https://github.com/skybrud/Skybrud.Umbraco.GridData/tree/v3/main) branch instead.
## Add-ons
- [**Skybrud.Umbraco.GridData.Dtge**](https://github.com/skybrud/Skybrud.Umbraco.GridData.Dtge)
Adds support for working with [**Doc Type Grid Editor**](https://github.com/skttl/umbraco-doc-type-grid-editor).
## Examples
The package has its own property value converter, so you can simply get the grid model as:
```C#
GridDataModel grid = Model.Content.GetPropertyValue("content");
```
If you have the raw JSON string, you can parse it like:
```C#
GridDataModel grid = GridDataModel.Deserialize(json);
```
But you can also just call an extension method to get the grid model:
```C#
GridDataModel grid = Model.Content.GetGridModel("content");
```
The benefit of the extension method is that it will always return an instance of `GridDataModel` - even if the property doesn't exists or doesn't have a value, so you don't have to check whether the returned value is `null`. However if you need it, you can use the `IsValid` property to validate that the model is valid (eg. not empty).
## Indexing with Examine
As of `v2.0`, the `GridDataModel` contains a `GetSearchableText` method that will return a textual representation of the entire grid model - see the example below:
```C#
@using Skybrud.Umbraco.GridData
@using Skybrud.Umbraco.GridData.Extensions
@inherits UmbracoTemplatePage
@{
GridDataModel grid = Model.Content.GetGridModel("content");
@grid.GetSearchableText()
}
```
The `GetSearchableText` method works by traversing all the controls of the grid, and calling a similar `GetSearchableText` method on each control. The end result will then be a string combined of the returned values from all the controls.
This of course requires that each control (or the model of it's value, really) can provide a textual representation of it's value.
If you need further control of the indexing, you can have a look at this example Gist:
* [Gist: Indexing the Umbraco Grid.md](https://gist.github.com/abjerner/bdd89e0788d274ec5a33)
## Rendering the grid
The package supports a number of different ways to render the grid. If we start out with the entire grid model, you can do something like (`Fanoe` is the framework/view that should be used for rendering the grid):
```C#
@using Skybrud.Umbraco.GridData
@using Skybrud.Umbraco.GridData.Extensions
@inherits UmbracoTemplatePage
@{
GridDataModel grid = Model.Content.GetGridModel("content");
@Html.GetTypedGridHtml(grid, "Fanoe")
}
```
This works by first getting the grid value, and then rendering the model into the current view. This can also be done in a single line instead (`Model.Content` as specified for the first parameter is an instance of `IPublishedContent`):
```C#
@using Skybrud.Umbraco.GridData.Extensions
@inherits UmbracoTemplatePage
@Html.GetTypedGridHtml(Model.Content, "content", "Fanoe")
```
Since both examples specifies the `Fanoe` view, the package will look for a partial view located at `~/Views/Partials/TypedGrid/Fanoe.cshtml` and with an instance of `GridDataModel` as the model. You can find an example of this partial view at the link below:
https://github.com/abjerner/UmbracoGridDataDemo/blob/master/dev/web/Views/Partials/TypedGrid/Fanoe.cshtml
You can also have a look at an example partial view for rendering the individual rows of the grid:
https://github.com/abjerner/UmbracoGridDataDemo/blob/master/dev/web/Views/Partials/TypedGrid/Rows/Default.cshtml
## Extending the grid
The package will only provide models for the grid editors thats comes with Umbraco by default (as well as the editors from the Fanoe starter kit), but it is also possible to create your own models for custom controls.
This process might however be a bit complex, so I've written an article for [**Skrift.io**](http://skrift.io/) that describes this a bit further:
http://skrift.io/articles/archive/strongly-typed-models-in-the-umbraco-grid/