[CLOSED] MVC Grid Cell Tooltip

[JakeM]

This question is an extension of this link: http://forums.ext.net/showthread.php...ooltip-Problem

I still can not seem to get the tooltip to appear when added through the controller for a cell. Here is the code I worked up that demonstrates the problem.

=================C# Controller=======================

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Ext.Net;
using Ext.Net.MVC;
using TPWC.Models;

namespace TPWC.Controllers
{
    public class BigQuestionController : Controller
    {
        // GET: BigQuestion
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult CreateQuestionGrid()
        {
            GridPanel grid = new GridPanel();
            grid.Title = "ToolTipTest";

            Store store = new Store();
            Model model = new Model { IDProperty = "ID" };

            GridView gView = new GridView { StripeRows = true };
            grid.View.Add(gView);

            AjaxProxy ajaxProxy = new AjaxProxy { Url = Url.Action("GetStore", "BigQuestion") };
            ajaxProxy.Reader.Add(new JsonReader { Root = "data" });

            store.Proxy.Add(ajaxProxy);
            grid.Store.Add(store);

            Button refreshButton = new Button { Text = "Reload", Icon = Icon.ArrowRefresh };
            refreshButton.Listeners.Click.Handler = "this.up('grid').getStore().reload();";

            Toolbar topTool = new Toolbar();
            grid.TopBar.Add(topTool);
            topTool.Items.Add(refreshButton);

            ToolTip tTip = new ToolTip();
            tTip.Target = grid.ClientID;
            //tTip.Target = "#{" + grid.ClientID + "}";
            tTip.Delegate = ".x-grid.cell";
            tTip.IsDynamic = true;
            tTip.TrackMouse = true;
            tTip.AutoHide = false;
            tTip.Hidden = false;
            //tTip.Html = "testing";
            tTip.Listeners.Show.Handler = "onShow(this, #{" + grid.ID + "});";
            //tTip.Listeners.Show.Handler = "onShow(this, " + grid.ID + ");";
            grid.ToolTips.Add(tTip);
            
            Column idCol = new Column { DataIndex = "ID", Text = "ID Header", Flex = 1 };
            grid.ColumnModel.Columns.Add(idCol);
            model.Fields.Add(new ModelField { Name = "ID", Type = ModelFieldType.Int });

            Column col1 = new Column { DataIndex = "Column1", Text = "Header", Flex = 1 };
            grid.ColumnModel.Columns.Add(col1);
            model.Fields.Add(new ModelField { Name = "Column1", Type = ModelFieldType.String });
            
            store.Model.Add(model);

            return this.ComponentConfig(grid);
        }

        public ActionResult GetStore()
        {
            List<BigQuestion> questionList = BigQuestion.QuestionTestData;

            return this.Store(questionList);
        }

    }
}

==============================================

===============Model===========================

using System;
using System.Collections.Generic;
using System.Web.Mvc;
using Ext.Net;
using Ext.Net.MVC;

namespace TPWC.Models
{
    public class BigQuestion
    {
        public int ID { get; set; }
        public string Column1 { get; set; }

        public static List<BigQuestion> QuestionTestData
        {
            get
            {
                return new List<BigQuestion>
                {
                    new BigQuestion{ID = 1, Column1="fred@flintstone.com"},
                    new BigQuestion{ID = 2, Column1="wilma@flintstone.com"},
                    new BigQuestion{ID = 3, Column1="pebbles@flintstone.com"},
                    new BigQuestion{ID = 4, Column1="barney@rubble.com"},
                    new BigQuestion{ID = 5, Column1="betty@rubble.com"},
                    new BigQuestion{ID = 6, Column1="bambam@rubble.com"}
                };
            }
        }
    }
}

===========================================

==============View==========================

@{
    var X = Html.X();
    ViewBag.Title = "Question Page";
    Layout = "~/Views/Shared/_BaseLayout.cshtml";
    
    <script>
        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);
        };
    </script>
}

@(X.ResourceManager(ViewBag.ManagerConfig as MvcResourceManagerConfig))
@section mainStuff
{
    @(X.Panel()
        .Title("Question Panel")
        .Items(
            X.Panel()
                .Layout(LayoutType.Fit)
                .Resizable(true)
                .Loader(X.ComponentLoader()
                    .Url(Url.Action("CreateQuestionGrid", "BigQuestion"))
                    .Mode(LoadMode.Component)
                    .LoadMask(lm => lm.ShowMask = true)
                )
        )//Panel Items
    )
}

I have commented out some of the things I have tried.
Thanks in advance.

[Daniil]

Hi @JakeM,

There are a couple of moments.

1. The ToolTip's Delegate is wrong - tTip.Delegate = ".x-grid.cell";.

Please change to tTip.Delegate = ".x-grid-cell";

2. I think the ToolTip is targeted before the target element (GridPanel's view) is rendered.

To fix that I can suggest to use this approach.

Please remove

tTip.Target = grid.ClientID;

and

tTip.Listeners.Show.Handler = "onShow(this, #{" + grid.ID + "});";

Please replace

grid.ToolTips.Add(tTip);

with

grid.Bin.Add(tTip);
grid.Listeners.AfterRender.Handler = @"var grid = this,
                                           tooltip = grid.getBinComponent(0);

                                       tooltip.setTarget(grid.getView().el);
                                       tooltip.on('show', function() { onShow(this, grid); });";

[JakeM]

Hi @Daniil,

Thank you for the quick response! I have implemented your changes, but I am now getting "onShow is undefined" as an error. Both "this" and "grid" are properly defined now.

[Daniil]

I guess it means that the onShow function is not rendered to client.

You can try to define the onShow function in _BaseLayout.cshtml within a page's <head> element. You can also define a section within a page's <head> element and change the view to have the <script> tag within that section.

[JakeM]

Hi @Daniil,

Thank you once more. I placed the script and function in _BaseLayout in the head section and all works as intended. Thank you very much for your help and you may mark this Closed.