@(Html.Kendo().Tooltip()
    .For("#image-info")
    .Position(TooltipPosition.Left)
    .Content("Here is my tooltip text")
    .Width(250)
    //.Animation(a =>
    //{
    //    a.Open(o =>
    //    {
    //        o.Expand();
    //    });
    //})
    .ToClientTemplate())

<form asp-action="CreatePO" id="PorequestForm" name="PorequestForm"><div asp-validation-summary="ModelOnly" class="text-danger"></div><fieldset><legend>Materials</legend>

        @*@Html.LabelFor(category => category.Justification)
        @Html.EditorFor(category => category.Justification)*@

        @(
            Html.Kendo().Grid(Model.POMaterials)
                .Name("PoMaterial")
                .ToolBar(tools => tools.Create().Text("Add PO Materials"))
                .Editable(editable => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Bottom))
                .Columns(columns =>
                {
                columns.Bound(p => p.ItemNumber).ClientTemplate("#= ItemNumber #" +
                "<input type='hidden' name='POMaterial[#= index(data)#].ItemNumber' value='#= ItemNumber #' />"
                );
 
                columns.Bound(p => p.Description).ClientTemplate("#= Description #" +
                "<input type='hidden' name='POMaterial[#= index(data)#].Description' value='#= Description #' />"
                );
               
                columns.Bound(p => p.Amount).ClientTemplate("#= Amount #" +
                "<input type='hidden' name='POMaterial[#= index(data)#].Amount' value='#= Amount #'/>"
                );
                
                columns.Bound(p => p.UnitCost).ClientTemplate("#= UnitCost #" +
                "<input type='hidden' name='POMaterial[#= index(data)#].UnitCost' value='#= UnitCost #' />"
                );

                columns.Bound(p => p.PomaterialId).Hidden().ClientTemplate("#= PomaterialId #" +
                "<input type='hidden' name='POMaterial[#= index(data)#].PomaterialId' value='#= PomaterialId #' />"
                );

                columns.Command(command => command.Destroy()).Width(100);
            })
            .DataSource(dataSource => dataSource.Ajax()
            .Model(model =>
            {
                model.Id(p => p.PomaterialId);
                model.Field(p => p.PomaterialId).Editable(false);
            })
            .Batch(true)
            //.Read(read => read.Action("ReadPoRequest", "Grid"))
            //.Create(create => create.Action("AddPORequest", "Grid"))
            .ServerOperation(false)
            )
            )
    </fieldset>
 
</form>
    
    
        

public IActionResult CreatePO()
{
    
    ViewData["WorkflowStatusId"] = new SelectList(_ob.WorkFlowStatuses.ToList(), "WorkFlowStatusId", "Value");
    ViewData["ApprovalStatusId"] = new SelectList(_ob.ApprovalStatuses.ToList(), "ApprovalId", "Value");
    TempData["poId"] = _ob.Porequests.Max(x => x.Id + 1);
    return View(new Porequest());
}
       
[HttpPost]
//[ValidateAntiForgeryToken]
public IActionResult CreatePO(Porequest porequest)
{
    porequest.VendorId = (int)TempData["VenId"];//Insert breakpoint here to check for the values being passed by the view
    _ob.Add(porequest);
    _ob.SaveChanges();
    return RedirectToAction(nameof(PurchaseOrders));
}

<script>
    function index(dataItem) {
        var data = $("#PoMaterial").data("kendoGrid").dataSource.data();

        return data.indexOf(dataItem);
    }
</script>

<div id="divGrid">
                @(Html.Kendo().Grid<dynamic>()
                .Name("gridItem")
                .Columns(columns =>
                {
                    if (Model != null)
                    {
                        foreach (System.Data.DataColumn column in Model.Columns)
                        {
                            columns.Bound(column.ColumnName);
                        }
                    }
                })
                .Pageable()
                .Sortable()
                .Filterable()
                .Groupable()
                .Scrollable()                
                .HtmlAttributes(new { style = "width: 1800px; height: 600px;" })                
                .Events(e => e.DataBound("ModuleItem.OnColumnWidth"))
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .Model(model =>
                    {                
                        if (Model != null)
                        {
                            foreach (System.Data.DataColumn column in Model.Columns)
                            {
                                var field = model.Field(column.ColumnName, column.DataType);
                                field.Editable(false);
                            }
                        }
                    })
                    .Read(read => read.Action("Read", "Item"))
                )
                )

            </div>
@section Scripts {
    
        <script src="~/js/item.js" asp-append-version="true"></script>
   

    
 }

var ModuleItem = (function () {

    var init = function () {
        
        

    };

    var setColumnWidth = function () {

        debugger;
        var options = $("#gridItem").data("kendoGrid").getOptions();
        for (i = 0; i < options.columns.length; i++) {
            options.columns[i].width = "100px";
        }
        $("#gridItem").data("kendoGrid").setOptions(options);
    };

    return {
        Init: init,
        OnColumnWidth: setColumnWidth
    };

})();

$(document).ready(function () {

    ModuleItem.Init();    
});