.Columns(columns =>
{
    columns.ForeignKey(p => p.PrimaryKeyId, ds => ds.Read(r => r.Action("CustomerList", "Customer")), "CustomerId", "CustomerName")
        .Title("Company")
        .ClientTemplate("<a href='/Customer/Edit/#=data.PrimaryKeyId#' class='link-primary'>#=data.Customer.CustomerName#</a>")
        .HeaderHtmlAttributes(new { @class = "small" });
    columns.Bound(c => c.Primary).HeaderHtmlAttributes(new { @class = "small" });
    columns.ForeignKey(p => p.SiteId, ds => ds.Read(r => r.Action("xCustomerSitesJSon", "Customer", new { custId = 0 })), "SiteId", "SiteName")
        .Title("Site")
        .HeaderHtmlAttributes(new { @class = "small" });
    columns.Command(command =>
    {
        command.Edit();
    });
})

@(Html.Kendo().Template()
    .AddHtml("<div class=\"k-edit-label\">")
    .AddHtml(Html.LabelFor(m => m.WeekDays).ToHtmlString())
    .AddHtml("</div>")
    .AddHtml("<div class=\"k-edit-field\">")
    .AddComponent(c => c.ListView<CheckboxList>()
        .Name("weekDays")
        .TagName("div")
        .ClientTemplateHandler("weekDaysTemplateHandler")
        .HtmlAttributes(new { data_bind = "source: daysDataSource"})
    )
    .AddHtml("</div>")
)

function weekDaysTemplateHandler(data){
 
    var result = '<div style="width: 33%;">';
    result += `<input class="weekDays" data-name="${kendo.htmlEncode(data.Name)}" data-id="${kendo.htmlEncode(data.ID)}" name="weekDays" type="checkbox" style="vertical-align: -2px" data-bind="checked:weekDays[${kendo.htmlEncode(data.ID)}].Selected" />`;
    result += ` <span>${kendo.htmlEncode(data.Name)}</span>`;
    result += "</div>"
    return result;
}
var viewmodel = new kendo.observable({
    dataSource: [],
    weekDaysDataSource: new kendo.data.DataSource({
        data: []
    }),
    OnEdit: function(e){
         this.weekDaysDataSource.data(e.model.WeekDays);
    }
});

WeekDays: [
    {
          ID: 1,
          Name: "Monday",
          Selected: false
    },
    {
         ID: 2,
        Name: "Tuesday",
        Selected: false
   },
   .... <rest of the days>
];

 kendo.drawing.drawDOM("#grid", {
                  paperSize: "A4",
                  margin: "3cm",
                  template: $("#page-template").html()     //WORKS
              }).then(function(group){
                  kendo.drawing.pdf.saveAs(group, "filename.pdf");
              });

kendo.drawing.drawDOM("#grid", {
              }).then(function(group){
		return kendo.drawing.exportPDF(group, {
                        paperSize: "A4",
                        margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" },
                        template: $("#page-template").html()   //IGNORED
                    });
              })
                .done(function (data) {
                    kendo.saveAs({
                        dataURI: data,
                        fileName: "filename.pdf",
                        //proxyURL: "myurl/Test/"
                    });
                });

@(Html.Kendo().Grid<ParteMovimientoLineaVM>()
    .Name("listadoMovimientosLinea")
    .Mobile()
    .Columns(columns =>
    {
        columns.Bound(model => model.ParteMovimientoLineaID).Hidden();
        columns.Bound(model => model.Cantidad).Title("Cantidad").Width("10%");
        columns.Bound(model => model.TipoMovimiento).Title("Movimiento");
        columns.Bound(model => model.MedioAuxiliar).Title("Medio / Maquinaria");
        columns.Bound(model => model.TipoEstado).Title("Estado / Ret. Completa");
        columns.Command(command => { 
            command.Destroy().Text(" ").IconClass("bi bi-trash");
            command.Edit().Text(" ").IconClass("bi bi-pencil-square");
        });
    })
    .ToolBar(t =>
    {
        t.Custom().Text("Añadir").HtmlAttributes(new { id = "addLineBtn" });
    })
    .Editable(editable =>
    {
        editable.Mode(GridEditMode.PopUp).TemplateName("_FormMovimientoLinea");
    })
    .BindTo(Model.Lineas) // This is a test, it should be a dataSource with the Read Action
)

@model MyPath.Models.Movimientos.ParteMovimientoLineaVM

<fieldset class="k-edit-form-container d-flex flex-column gap-4">
    <div class="k-form-field">
        @(Html.Kendo().NumericTextBoxFor(m => m.Cantidad)
            .Min(1)
            .Step(1)
            .Value(1)
            .Format("n0")
            .Spinners(true)
            .Label(l => l.Content("Cantidad")))
    </div>
    <div class="k-form-field">
        @(Html.Kendo().DropDownListFor(m => m.TipoMovimiento)
            .BindTo(new List<string> { "Movimiento 1", "Movimiento 2", "Movimiento 3" })  // Datos de prueba
            .OptionLabel("Selecciona un movimiento")
            .Label(l => l.Content("Tipo de movimiento"))
        )
    </div>
    <div class="k-form-field">
        @(Html.Kendo().DropDownListFor(m => m.MedioAuxiliar)
            .BindTo(new List<string> { "Medio 1", "Medio 2", "Medio 3" })  // Datos de prueba
            .OptionLabel("Selecciona un medio")
            .Label(l => l.Content("Medio Axuiliar"))
        )
    </div>
    <div class="k-form-field">
        @(Html.Kendo().DropDownListFor(m => m.TipoEstado)
            .Label(l => l.Content("Estado / Ret. Completa"))
            .DataTextField("Text")
            .DataValueField("Value")
            .OptionLabel("Selecciona un estado")
            .DataSource(source =>
            {
                source.ServerFiltering(true);
                source.Read(read => read.Action("GetMantenimientosDropDown", "MantenimientosSimples", routeValues: new { entidad = EMantenimientoGenericoEntidad.TipoEstado }));
            }))
    </div>
</fieldset>

AddEventos(): void {
    if (this.grid) {
        this.grid.bind("save", (e: kendo.ui.GridSaveEvent) => {
            if (e.model?.isNew()) {
                console.log("New row save:", e.model);
            }

            e.model!.dirty = false;
            this.grid?.refresh();
        });

        this.grid.bind("remove", (e: kendo.ui.GridRemoveEvent) => {
            console.log("Row delete:", e.model);

            this.grid?.dataSource.remove(e.model!);

            this.grid?.refresh();
        });
    }
}

AddCustomButtonEvent(): void {
    $("#addLineBtn").on("click", () => {
        if (this.grid) {
            this.grid.addRow();
        }
    });
}