add column to grid as drop down list

[samaremad]

i have users row and each user have more than 1 department so the relation between them is many to many

i want to add column to user grid as a drop down list contain all user's departments
how can i do that ?

[luongnv6]

https://serenity.is/demo/Northwind/Product

https://github.com/serenity-is/Serene/blob/master/Serene/Serene.Core/Modules/Northwind/Product/ProductGrid.ts

[samaremad]

good morning my freind can you help me more i didnt know exastly what to do ?

beside user table connected to department table by a third table (many to many relationship ) how to do that ?

[wezmag]

I will use the Order grid in Northwind sample to show you how to do.
In Northwind sample, order and product are also many to many relationship with a third table "OrderDetail" in between.
To accomplish you request, here are the steps.

1. We need to make sure the return rows in OrderService/List contain a list of products/product ids
2. We need to write a formatter to display the list of products/product ids in <select> element.
3. Add ProductList in column

Step 1

Originally, the row/entity returned from OrderService/List looks as below:

{
    "OrderID": 11077,
    "CustomerID": "RATTC",
    "EmployeeID": 1,
    "OrderDate": "2016-11-06T00:00:00.000",
    "RequiredDate": "2016-12-03T00:00:00.000",
    "ShipVia": 2,
    "Freight": 8.5300,
    "ShipName": "Rattlesnake Canyon Grocery",
    "ShipAddress": "2817 Milton Dr.",
    "ShipCity": "Albuquerque",
    "ShipRegion": "NM",
    "ShipPostalCode": "87110",
    "ShipCountry": "USA",
    "CustomerCompanyName": "Rattlesnake Canyon Grocery",
    "EmployeeFullName": "Nancy Davolio",
    "EmployeeGender": 2,
    "ShipViaCompanyName": "United Package"
}

We want to add a property ProductList contains an array of product.
So, we modify the OrderRow.cs and add ProductList using LinkingSetRelation.

...
[DisplayName("Products")]
[NotMapped]
[LinkingSetRelation(typeof(OrderDetailRow), "OrderID", "ProductID")]
[MinSelectLevel(SelectLevel.List)]
public List<Int32> ProductList
{
    get { return Fields.ProductList[this]; }
    set { Fields.ProductList[this] = value; }
}

public class RowFields : RowFieldsBase
{
    ...
    public ListField<Int32> ProductList;
}

Now, the row/entity returned from OrderService/List looks like below:

{
    "OrderID": 11077,
    ....
    "ProductList": [2, 3, 4, 6, 7, 8, 10, 12, 13, 14, 16, 20, 23, 32, 39, 41, 46, 52, 55, 60, 64, 66, 73, 75, 77, 17]
    ....
}

Step 2

We now have product id list, but we want to display it as drop down list and use product name as text.
So, we create a OrderProductFormatter.ts, in which we will return <select> html.

namespace StartSharp1.Northwind {

    @Serenity.Decorators.registerFormatter()
    export class OrderProductFormatter implements Slick.Formatter {
        format(ctx: Slick.FormatterContext) {
            let options:string = '';
            (ctx.value as number[]).forEach(value => {
                var product = ProductRow.getLookup().itemById[value];
                options += Q.format('<option value="{0}">{1}</option>', value, product.ProductName);
            });
            return '<select>' + options + '</select>';
        }
    }
}

Don't forgot to run T4 template if you are using the older .net framwork version.

Step 3

Add ProductList in OrderColumns.cs

using Serenity.ComponentModel;
using System;
using System.Collections.Generic;

namespace StartSharp1.Northwind.Columns
{
    [ColumnsScript("Northwind.Order")]
    [BasedOnRow(typeof(Entities.OrderRow), CheckNames = true)]
    public class OrderColumns
    {
        [EditLink, AlignRight, SortOrder(1, descending: true), Width(70)]
        public String OrderID { get; set; }

        ....

        [OrderProductFormatter]
        public List<Int32> ProductList { get; set; }
    }
}

If you got everything right, you will see the final result as expected.
Please don't forgot to mark this as answer, if this answers your question.