@model DateTime?

@(Html.Kendo().DateTimePickerFor(m => m).HtmlAttributes(new { title = Html.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName("")}))

@if (Model?.GroupDetail?.IsMec == false)
                                    {
                                        <th class="text-secondary" style="width: 140px;">Group Info</th>
                                    }

<th class="text-secondary">
                                        @if (Model?.GroupDetail?.IsMec == false)
                                        {
                                            <text>Office</text>
                                        }
                                        else
                                        {
                                            <text>Role</text>
                                        }
                                    </th>

// the template reference
.ClientDetailTemplateId("template-controls")

//the child grid definition, variable interpolation in the grid name and the toolbar, both work
<script id="template-controls" type="text/x-kendo-template">
    @(Html.Kendo().Grid<ChildItem>()
        .Name("GroupGrid_#=GroupID#")
        .ToolBar(toolbar =>
        {
            toolbar.Template(
                "<div class='edit-toolbar'>" 
                    +"<button onclick='editChild(" + Model.ID + ",0,#=GroupID#, this)'>Edit</button>" 
                + "</div>"
            );
        })
    )
</script>

//the template reference
<grid-detail-template>
    <kendo-grid name="GroupGrid_${data.GroupID}">
        <toolbar client-template-id="GroupGrid_Toolbar"></toolbar>
    </kendo-grid>
</grid-detail-template>


//the child grid definition, variable interpolation works in the grid name , but the interpolation in toolbar do not
<script id="GroupGrid_Toolbar" type="text/html">
    <div class='edit-toolbar'>
        <button onclick=' editChild(@Model.ID,0,#=GroupID#, this)'>Edit</button>
    </div>
</script>

with (data) {
        $kendoOutput = '\n\n        <div class=\'edit-toolbar\'>\n            <button onclick=\'editChild(11941,0,' + (GroupID) + ', this)\' \n                    >\n                ' + ($kendoHtmlEncode(data.GroupID)) + ' : ' + (GroupID) + ' Edit #\n            </button>\n </div>\n ';
    }

<toolbar>
                                    <toolbar-button>
                                        <toolbar-command-template>
// the variable interpolation placed here
                                        </toolbar-command-template>
                                    </toolbar-button>
                                </toolbar> 

@(
Html.Kendo().Grid<ContractBenefitViewModel>()
    .Name("ContractBenefitGrid")
    .Columns(columns =>
    {
        columns.Bound(c => c.Id).Hidden(true);
        columns.Bound(c => c.Contracts)
            .ClientTemplate("#= displayContracts(data) #")
            .EditorTemplateName("Contracts")
            .Width(400)
            .Filterable(false)
            .Sortable(false);
        columns.ForeignKey(c => c.BenefitId, (IEnumerable)ViewBag.Benefits, "Id", "DisplayName");
        columns.Bound(c => c.Gl)
            .Width(150);
        columns.Bound(c => c.Comments);
        columns.Bound(c => c.Active).Hidden(true);
        columns.Bound(c => c.Deleted).Hidden(true);
        columns.Command(command =>
            {
                command.Edit();
                command.Destroy();
            })
            .HtmlAttributes(new { style = "text-align: center;" })
            .Width(200);
    })
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .ToolBar(toolbar =>
    {
        toolbar.Create();
    })
    .Pageable(pager =>
    {
        pager.Refresh(true);
        pager.PageSizes([10, 20, 50]);
    })
    .Sortable()
    .Filterable()
    .NoRecords()
    .DataSource(dataSource => dataSource
        .Ajax()
        .Batch(true)
        .PageSize(10)
        .ServerOperation(true)
        .Events(events => events.Error("error_handler").RequestEnd("onRequestEnd('staticNotifications')"))
        .Model(model =>
        {
            model.Id(p => p.Id);
            model.Field(p => p.Contracts).DefaultValue(ViewBag.ContractId as List<ContractModel> ?? new List<ContractModel>());
            model.Field(p => p.BenefitValue).DefaultValue(ViewBag.BenefitId);
            model.Field(p => p.Comments);
            model.Field(p => p.LastUpdatedBy).DefaultValue(ViewData[Literals.EmailKey]);
            model.Field(p => p.Active).Editable(false).DefaultValue(Literals.Yes);
            model.Field(p => p.Deleted).Editable(false).DefaultValue(Literals.No);
        })
        .Filter(f =>
        {
            f.Add(x => x.Active).IsEqualTo(Literals.Yes);
            f.Add(x => x.Deleted).IsEqualTo(Literals.No);
        })
        .Read(read => read.Action("GetContractBenefits", "ContractBenefit").Data("forgeryToken"))
        .Create(create => create.Action("CreateContractBenefits", "ContractBenefit").Data("forgeryToken"))
        .Update(update => update.Action("UpdateContractBenefits", "ContractBenefit").Data("forgeryToken"))
        .Destroy(destroy => destroy.Action("DeleteContractBenefits", "ContractBenefit").Data("forgeryToken"))
        .Sort(sort =>
        {
            sort.Add(x => x.BenefitValue);
        })
    )
)

<script type="text/javascript">
    function displayContracts(data) {
        window.console.log('displayContracts()');
        return $.map(data.Contracts, function (e) { return e.DisplayName; }).join(", ");
    }
</script>

public class ContractBenefitViewModel
{
    public long Id { get; set; }

    public long BenefitId { get; set; }

    [Display(Name = "Benefit")]
    public string BenefitValue
    {
        get
        {
            var sb = new StringBuilder();
            if (Benefit is not null)
            {
                sb.Append(Benefit.Value);
                if (!string.IsNullOrWhiteSpace(Benefit.Gl))
                {
                    sb.Append(" (");
                    sb.Append(Benefit.Gl);
                    sb.Append(")");
                }
            }

            return sb.ToString();
        }
    }

    [Display(Name = "GL Code")]
    public string Gl => Benefit?.Gl ?? string.Empty;

    [Display(Name = "Comments")]
    [StringLength(ModelLiterals.CommentsLength)]
    [MaxLength(ModelLiterals.CommentsLength)]
    public string? Comments { get; set; }

    public string Active { get; set; } = ModelLiterals.Yes;
    public string Deleted { get; set; } = ModelLiterals.No;
    public string LastUpdatedBy { get; set; } = string.Empty;

    public BenefitModel? Benefit { get; set; } = null!;

    [UIHint("Contracts")]
    public IList<ContractModel> Contracts { get; set; } = new List<ContractModel>();
}

@model Lookups.ContractModel

<div style="width: 99%">
    @(Html.Kendo().MultiSelectFor(m => m)
    .DataValueField("Id")
    .DataTextField("DisplayName")
    .DownArrow()
    .AutoClose(false)
    .BindTo((IEnumerable<Lookups.ContractModel>)ViewData["contracts"])
        )
</div>

[HttpGet]
public async Task<IActionResult> IndexAsync()
{
    Logger.LogDebug("{NameOf}()", nameof(IndexAsync));

    var contracts = await Client.GetContractsAsync();  //Client is my API client library - it fetches data from my API
    var benefits = await Client.GetBenefitsAsync();

    ViewBag.Contracts = contracts;
    ViewData["contracts"] = contracts;
    ViewBag.Benefits = benefitFinancialSupports;
    ViewBag.DefaultContractId = contracts?.FirstOrDefault()?.Id ?? -1;
    ViewBag.DefaultBenefitId = benefits?.FirstOrDefault()?.Id ?? -1;

    return View();
}

[HttpPost]
[ValidateAntiForgeryToken]
public async Task<JsonResult> GetContractBenefitsAsync([DataSourceRequest] DataSourceRequest request)
{
    Logger.LogDebug("{NameOf}()", nameof(GetContractBenefitsAsync));
    var stopwatch = Stopwatch.StartNew();
    try
    {
        if (!ModelState.IsValid) return Json(InvalidModelStateMessage);
        var models = await Client.GetContractBenefitsAsync();
        var viewModels = models
            .Where(x => x is { Benefit: not null, Contract: not null })
            .GroupBy(x => x.BenefitId)
            .Select(g => new ContractBenefitViewModel
            {
                BenefitId = g.Key,
                Benefit = g.First().Benefit,
                Contracts = g.Select(x => x.Contract!).Distinct().ToList(),
                Id = g.First().Id,
                Comments = g.First().Comments,
                Active = g.First().Active,
                Deleted = g.First().Deleted,
                LastUpdatedBy = g.First().LastUpdatedBy
            })
            .ToList();

        return Json(await viewModels.ToDataSourceResultAsync(request));
    }
    catch (Exception ex)
    {
        Logger.LogError(ex, "{NameOf}()", nameof(GetContractBenefitsAsync));
        return Json(new { success = false, message = ex.Message });
    }
    finally
    {
        stopwatch.Stop();
        Logger.LogInformation("**** {NameOf} took [{Elapsed}]", nameof(GetContractBenefitsAsync),
            stopwatch.Elapsed);
    }
}