public class ErpProductModel
{
    public string Title { get; set; }
    public string Code { get; set; }
    public string ShortCode { get; set; }
    public int MinStock { get; set; }
    public int ShelfLife { get; set; }
    public int CategoryId { get; set; }
    public int TaxCategoryId { get; set; }
    public decimal AmountInProduct { get; set; }
    public int MeasureWeightId { get; set; }
    public int CountryId { get; set; }
    public int StatusId { get; set; }
    public List<ErpProductPackageTypeModel>? PackageTypes { get; set; } = [];
}

public record ErpProductPackageTypeModel 
{
    public int? ProductId { get; set; }
    public string Barcode { get; set; }
    public int Quantity { get; set; }
    public string? PackageType { get; set; }
    public int PackageTypeId { get; set; }

    public List<SelectListItem> AvailablePackageTypes { get; set; } = [];
}

<script type="text/x-kendo-tmpl" id="packageTypeTemplate">
         <div class="card widget widget-info">
             <div class="card-body">
                 <div class="widget-info-container">
                     <div class="widget-info-image" style="background: url('@Url.Content("/Assets/Images/barcode_mock.png")')"></div>
                     <h5 class="widget-info-title">#=Barcode#</h5>
                     <p class="widget-info-text">#=PackageType# / #=Quantity# PCS</p>
                 </div>
             </div>
         </div>
</script>

@(Html.Kendo().ListView<ErpProductPackageTypeModel>()
            .Name("package-types")
            .BindTo((IEnumerable<ErpProductPackageTypeModel>)Model.PackageTypes)
            .TagName("div")
            .Bordered(false)
            .Layout("grid")
            .Grid(p=> p.Cols(4).Gutter(20))
            .ClientTemplateId("packageTypeTemplate")
            .HtmlAttributes(new { @class= "rubi-listview package-types" })
            .DataSource(dataSource => 
                dataSource.Ajax()
                .Batch(true)
                .ServerOperation(false))
            )

[HttpPost]
public virtual async Task<IActionResult> EditAsync(ErpProductModel model)
{
    var erpProduct = await _erpProductService.GetErpProductAsync(model.Id);
    if (erpProduct == null)
        return RedirectToAction("List");
    erpProduct = model.ToEntity(erpProduct);

    await _erpProductService.UpdateErpProductAsync(erpProduct);

    return RedirectToAction("Edit", new { id = erpProduct.Id });
}

@(Html.Kendo()
    .Grid<ViewModels.MyViewModel>()
    .Name("grid_" + uniqueId)
    .Sortable()
    .Editable(editable => editable.Mode(GridEditMode.InCell))
    .Filterable()
    .ToolBar(x =>
    {
        x.Create().Text("Add New");
        x.Save().SaveText("Save").CancelText("Cancel");
    })
    .Columns(columns =>
    {
        columns.Bound(c => c.Value)
        .Width(125)
        .Filterable(ftb => ftb.Multi(true).Search(true).CheckAll(true));
    })
    .DataSource(ds => ds
            .Ajax()
            .Batch(true)
            .ServerOperation(false)
            .Read(r => r.Url("/api/ControllerName?handler=MethodName").Data("grid_getReadParameters"))
            .Events(events => events.Error("grid_error"))
            .PageSize(100)
            .Model(m =>
            {
                m.Field(id => id.Value).Editable(true);
            })
    )
)

let ttt = $("#VideoSubtitleText").kendoTextArea().data("kendoTextArea");
 ttt.value("New subtitle text");
 ttt.trigger("change");

@(Html.Kendo().Grid<VideoSubtitle>
     ()
     .Name("subtitlegrid")
     .Filterable()
     .Editable()

     
     .Selectable(selectable => selectable
     .Mode(GridSelectionMode.Single))
     .Scrollable()
     .ClientDetailTemplateId("templateSubtitleStyle")
     .ToolBar(toolbar =>
     {

         toolbar.ClientTemplateId("GridToolbarTemplate");
     })

     .Columns(columns =>
     {

         columns.Bound(column => column.VideoSubtitleBeginTimeStr).Title("Start Time").Width(70).Filterable(false);
         columns.Bound(column => column.VideoSubtitleEndTimeStr).Title("End Time").Width(70).Filterable(false);
         columns.Bound(column => column.VideoSubtitleText).Title("Text").Width(380).HtmlAttributes(new { @class = "wrap" });

         columns.Command(column =>
         {                                                
             column.Edit();
             column.Destroy();
         }).Width(140);

     })
     .DataSource(ds => ds.Ajax()
     .Sort(sort => sort.Add("VideoSubtitleBeginTimeStr").Ascending())
     .Read(r => r.Url("/VideoDataDetails?handler=ReadSubtitles").Data("forgeryToken"))
     .Update(u => u.Url("/VideoDataDetails?handler=UpdateSubtitle").Data("forgeryToken"))
     .Create(c => c.Url("/VideoDataDetails?handler=CreateSubtitle").Data("forgeryTokenAndLocale"))
     .Destroy(d => d.Url("/VideoDataDetails?handler=DestroySubtitle").Data("forgeryToken"))

     .Model(m => m.Id(id => id.VideoSubtitleId))
     .Events(ev => ev.RequestEnd("gridRequestEnd"))

     )

     .Events(events => events
     .Change("onSubtitleSelected")
     .Save("onSaveSubtitle")
     .SaveChanges("onSaveSubtitle")
     .Remove("onRemove")
     .Edit ("onSubtitleEdit")

     )
     .HtmlAttributes(new { style = "height: 600px;" })

 )

@(Html.Kendo().TextBox()
    .Name("PropertyX")
    .Placeholder("Property X")
    .HtmlAttributes(new { type = "password" }))
<span toggle="PropertyX" class="k-icon k-i-eye toggle-password"></span>

@(Html.Kendo().TextBoxFor(m => m.PropertyX)
    .Placeholder("Property X")
    .HtmlAttributes(new { type = "password" }))
<span toggle="PropertyX" class="k-icon k-i-eye toggle-password"></span>

@(Html.Kendo().TextBoxFor(m => m.PropertyX)
    .Placeholder("Property X")
    .Value(Model.PropertyX)
    .HtmlAttributes(new { type = "password" }))
<span toggle="PropertyX" class="k-icon k-i-eye toggle-password"></span>