Razor Pages and DevExpress - Showing multiple images in one cell

Question

I have a cshtml page, a Devextreme Datagrid defined with columns on it, containing data from my Model. My model has some properties, but also a ICollection Attachemnts property which is a List of Atachment Ids in the db.

In the Datagrid i have a CellTemplate where i want to display a button for each Attachment Id from my Model. Therefore i Need to loop over the Ids.

The XXXXXX part in code needs to be replaced by Attachment count.

I tried to access the Model.Attchments.Count but it doesnt work.(foor loop) I can set this value in a textbox but i cant pass it to the dor loop.

<code>
    class UFe : U, IUF
    {
        private List<int> _attId;

        internal UFe()
        {
            this._attId = new List<int>();
        }

        public string BookingNr { get; set; }

        public ICollection<int> Attachments
        {
            get => this._attId;
            set
            {
                this._attId = value as List<int>;
            }
        }

        public void AddUAttid(int attId)
        {
            this._attId.Add(attId);
        }
    }
</code>

Here is a part of my datagrid:

<code>              
    @(Html.DevExtreme().DataGrid<IUF>()
                      .ID("MyGrid")
                      .DataSource(d => d.Array().Data(Model.UFeList).Key("BookingNr"))
                      .ShowBorders(true)
                      .ColumnAutoWidth(true)
                      )
.Columns(columns =>
                      { columns.AddFor(m => m.BookingNr).Caption("Number").Alignment(HorizontalAlignment.Right);
                                 .CellTemplate(@<text>
                                            @Html.DevExtreme().TextBox().Name(<b>"tryingToPassThisValue"</b>).Value(new JS("data.Attachments.length")).Visible(true)</code>
<code>
                                            @for (int i = 0; i < XXXXXXXX; i++)
                                                {

                                                <form method="get" asp-page-handler="file">
                                                    <button>
                                                        <img src="att.png">
                                                    </button>
                                                </form>
                                                }
                                </text>);    
</code>

Instead of XXXXX i want to pass the Model.Attchments.Count or data.Attachments length object but cant get it work.

Answer 1

I found a solution:

Add a column to the grid with the current Data and then call a JS on it, like this:

columns.Add().DataField("Attachments").Caption("YourCaption").CellTemplate(new JS("function(container, options) {cellTemplate(container, options);}"));

Then write jour JS function

<script>
    function cellTemplate(container, options) {
    //Set her your code - in my case thats the form from the previous example.
}
</script>

Works perfect for me.