Creating Dynamic Tooltip for GridView in ASP.NET MVC

Question

I have a GridPanel component in my EXT.NET MVC project, and I would like to create a dynamic tooltip that will display the text/data in each cell when hovered over. Since the .ToolTips() component isn't compatible with this, I am using JavaScript to try to render a dynamic tooltip. My current code creates HTML elements, and then adds tooltips to them:

var el = Ext.getBody().createChild({
    html: '<div data-num="1" class="item">Foo</div>' +
        '<div data-num="2" class="item">Bar</div>' +
        '<div data-num="3" class="item">Baz</div>' +
        '<div class="notip">No tip here</div>'
});
new Ext.tip.ToolTip({
    target: el,
    delegate: '.item',
    listeners: {
        beforeshow: function (tip) {
            var current = tip.currentTarget.dom;
            tip.setHtml('Item #' + current.getAttribute('data-num'));
        }
    }
});

And here is the code for the GridPanel I want to attach it to:

Html.X().GridPanel()
.Title("Request Priorities")
.ID("reqPrioritiesGrid")
.ColumnWidth(1)
.MarginSpec("0 0 0 0")
.Flex(1)
.ToolTips(t => t.Add(Html.X().ToolTip().Html("hello").ID("storeTip").Target("App.storeReqPriorities")))
.Border(true)
.Store(
    Html.X().Store()
        .ID("storeReqPriorities")
        .AutoLoad(true)
        .DataSource(Model.RequestPriorities)
        .Model(
            Html.X().Model()
                .Fields(f =>
                {
                    f.Add(Html.X().ModelField().Name("RequestPriorityKey").Type(ModelFieldType.Int));
                    f.Add(Html.X().ModelField().Name("RequestPriorityName").Type(ModelFieldType.String));
                    f.Add(Html.X().ModelField().Name("RequestPriorityDescription").Type(ModelFieldType.String));
                    f.Add(Html.X().ModelField().Name("SortOrder").Type(ModelFieldType.Int));
                    f.Add(Html.X().ModelField().Name("ResponseTarget").Type(ModelFieldType.String));
                    f.Add(Html.X().ModelField().Name("ResponseFormat").Type(ModelFieldType.String));
                    f.Add(Html.X().ModelField().Name("ResponseSLA").Type(ModelFieldType.String));
                })
        )
        .ServerProxy(
            Html.X().AjaxProxy()
                .Url(Url.Action("ManageLists_GetRequestPriorities", "Admin", new { area = "Cadence" }))
        )
)
        .Listeners(l =>
        {
            l.Select.Handler = "handleReqPopulate(record.data);" + "toggleEditRequest();" + "resetAddNew();";
        })
        .ColumnModel(
            Html.X().Column().Flex(1).Text("Request Priority Name").DataIndex("RequestPriorityName"),
            Html.X().Column().Flex(3).Text("Request Priority Desciption").DataIndex("RequestPriorityDescription"),
            Html.X().Column().Flex(1).Text("Sort Order").DataIndex("SortOrder"),
            Html.X().Column().Flex(1).Text("Response Target").DataIndex("ResponseTarget"),
            Html.X().Column().Flex(1).Text("Response Format").DataIndex("ResponseFormat"),
            Html.X().Column().Flex(1).Text("Response SLA").DataIndex("ResponseSLA")
)

Is there a method similar to .createChild() used in the JavaScript above that can attach a tooltip to an element that is being dynamically created in MVC?

Answer 1

You can bind the ToolTip component to the grid's view with a custom show handler that would fetch the cell data (or row, or entire grid) and show the way you instruct. Wouldn't that suffice for your scenario?

In this case you won't be creating child tooltips though, but rather using the same tooltip to show specific data depending on where you hover the mouse over.

Add this after the grid -- yes, outside it. Given your code snippets, the ToolTip component declaration should look like this:

@(Html.X().ToolTip()
    .Target("={App.reqPrioritiesGrid.getView().el}")
    .Delegate(".x-grid-cell")
    .TrackMouse(true)
    .Listeners(l => l.Show.Handler="onShow(this, App.reqPrioritiesGrid)")
)

Then have a handler fill the tooltip's contents like this:

var onShow = function (toolTip, grid) {
    var view = grid.getView(),
        store = grid.getStore(),
        record = view.getRecord(view.findItemByChild(toolTip.triggerElement)),
        column = view.getHeaderByCell(toolTip.triggerElement),
        data = record.get(column.dataIndex);

    toolTip.update(data);
};

From this point, you could further customize the show function to build the tooltip the way you need it.

A grid with a per-cell tooltip is showcased in Ext.NET examples (WebForms) at Miscellaneous > Tooltips > GridPanel Cell Tooltip.

Hope this helps!