Showing partial view in tooltip on grid column hover

[Joe]

Yea, I know...that's a lot to ask.  I've gotten very close.  My code is below.

What I need is a tooltip that renders the results of a partial view when user hovers a specific column (column #6) in the kendo grid (mvc razor).  I need to show a list of active orders for the given row in the grid.

If the row.OnOrder = 0, I see the proper tooltip text "- no orders found -".

But when row.OnOrder > 0 and the AJAX call is necessary, the tooltip just shows an empty tooltip box (shown in screenshot).  In Chrome Network tab I can see the ajax call made, and I can see the html response of the partial view.  So I'm fairly certain the partial call is working and responding correctly.  VS debugger shows the controller gets hit and returns the view.  But the result doesn't populate to the tooltip.  I just get a little grey box.

I feel like I'm missing some really, really small but I can't tell what.  Any suggestions?  The partial view does have a kendo grid in it as well, if that matters.

document.ready():

            $("#grdStockLevels").kendoTooltip({
                filter: "td:nth-child(6)", // Adjust the selector to target the specific column
                position: "top",
                content: function (e) {
                    var dataItem = $("#grdStockLevels").data("kendoGrid").dataItem(e.target.closest("tr"));

                    if (dataItem.OnOrder > 0) {
                        return $.ajax({
                            url: '@Url.Action("OpenOrderList", "Purchasing")',
                            type: 'GET',
                            async: false,
                            data: {
                                productId: dataItem.ProductId,
                                optionList: dataItem.OptionList
                            }, 
                            dataType: 'html'
                        });
                    } else {
                        return "- no open orders -";
                    }

                }
            }).data("kendoTooltip");

 

Controller partial view:

        public ActionResult OpenOrderList(int productId, string optionList)
        {
            // validate product
            Product p = _productRepo.Load(productId);
            if (p == null) return new HttpStatusCodeResult(HttpStatusCode.BadRequest);

            // locate open order items
            var orderItemList = p.SupplierOrderItems.Where(z => z.OptionList == optionList && z.Order.OrderStatus.IsActive).ToList();

            IList<SupplierOrderModel> model = orderItemList.Select(x => new SupplierOrderModel()
            {
                OrderNumber = x.Order.OrderNumber,
                EtaDate = x.Order.EtaDate,
                SupplierShipMethodId = x.QtyRemain
            }).ToList();

            return PartialView("_OpenOrderListPopup", model);
        }

 

partial view:

@model IList<SupplierOrderModel>


@(Html.Kendo().Grid(Model)
    .Name("grdOpenOrderList")
    .Columns(columns =>
    {
        columns.Bound(p => p.OrderNumber).Title("Order Number");
        columns.Bound(p => p.EtaDate).Title("ETA Date").Format("{0:MM/dd/yyyy}");
        columns.Bound(p => p.PurchaseMethodId).Title("Qty On Order");
    })
    .HtmlAttributes(new { style = "height: 550px;" })
)

[Ivaylo]

Hello Joe,

Thank you for the details provided.

In this case, you can use the new "Template" component to incorporate the "Grid" in the "ToolTip". Here is an example of the implementation:

Html.Kendo().Tooltip()
    .For("#grid")
    .Filter("td:nth-child(4)")
    .Content(Html.Kendo().Template()
        .AddComponent(grid => grid.Grid<API.Models.GridModel>()
            .Name("childGrid")
            .Columns(columns =>
            {
                columns.Bound(p => p.Name);
                columns.Bound(p => p.Description);
            })
            .Scrollable()
            .Pageable()
            .DataSource(d => d
                .Ajax()
                .PageSize(10)
                .Read(r => r.Action("Items", "Home"))
            )
        )
    )

 

If you require more information about the "Template" component, please review this resource:

• https://docs.telerik.com/aspnet-mvc/html-helpers/template/overview#aspnet-mvc-template-overview

Furthermore, I prepared a sample application, where the code can be tested.

I hope this information was helpful. Let me know about your thoughts.

Regards,
Ivaylo
Progress Telerik

[Joe]

Thank you for the detailed example.  How will I pass the two values from the parent grid row ProductId and OptionList?

Also, I'm getting a syntax problem in my view with your example.  See below.  We are using Kendo 2022.1.412

[Ivaylo]

Hello Joe,

Thank you for the details provided.

I created a sample application where I am implementing this behavior. In this demo, I am registering for the "mouseover" event of the specific column.

.HtmlAttributes(new { onmouseover = "onTooltipShow(event)" });

In this approach, the "event.target" will refer to the specific cell, from which the corresponding "dataItem" can be retrieved.

var dataItem = $("#grid").data("kendoGrid").dataItem(event.target.closest("tr"));

Once the "dataItem" is retrieved, the next step is to display the "ToolTip" and initialize the "Grid" within it. It is important to note that the "Content" of the "ToolTip" consists of a single "div", which will serve as the element for initializing the "Grid".

Html.Kendo().Tooltip()
    .For("#grid")
    .Filter("td:nth-child(5)")
    .Content("<div id='tooltipContent'></div>")
    .Width(1000)
    .Position(TooltipPosition.Left)

var tooltip = $("#grid").data("kendoTooltip");
tooltip.show($(event.target));

$("#tooltipContent").kendoGrid({
    dataSource: {
        transport: {
            read: {
                url: "/Home/Items",
                data: {
                    productId: dataItem.ProductID
                }
            }
        },
        schema: {
            model: {
                fields: {
                    Id: { type: "number" },
                    Name: { type: "string" },
                    Description: { type: "string" }
                }
            },
            data: "Data"
        },
        pageSize: 3,
        serverPaging: true,
        serverFiltering: true,
        serverSorting: true
    },
    height: 550,
    filterable: true,
    sortable: true,
    pageable: true,
    columns: [
        {
            field: "Id",
            filterable: false
        },
        {
            field: "Name"
        },
        {
            field: "Description"
        }
    ]
});

Furthermore, I attached the sample application to this reply where the code can be observed and tested.

I hope this information was helpful.

Greetings,

Ivaylo 

[Joe]

Outstanding help.  Your example gave me exactly what I needed to resolve my problem.  With a few minor adjustments I was able to make the mouseover only happen if OnOrder > 0. 

Ideally I would want to do this using an MVC partial view.  But your example works well and I can move on with my project.    So I'm good with it.  Thank you.  Your help is greatly appreciated!