[CLOSED] MVC - Grid Tool tips

  1. #1

    [CLOSED] MVC - Grid Tool tips

    Hi Guys,

    I am looking to get tooltips working on a grid reusing the code I have previously used on a form (http://forums.ext.net/showthread.php...ooltips-in-MVC), if possible I'd like it to generate the tooltip for each cell however I'd settle for it to generate the tooltip for each row.

    Can anyone help?

    Cheers
    Last edited by Daniil; Feb 06, 2015 at 1:00 PM. Reason: [CLOSED]
  2. #2
    Hello,

    There are two examples related to grid tooltips that should help:

    Grid Cell Tooltip
    Grid Row Tooltip

    It's all client side really and should work for mvc, too.

    --

    Checked, it works for mvc. Actually, I've decided to produce a simple example for you:

    Index.cshtml


    @model System.Collections.IEnumerable
    
    @{
        Layout = null;
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Grid</title>
        <script>
            var template = '<span style="color:{0};">{1}</span>';
    
            var change = function (value) {
                return Ext.String.format(template, (value > 0) ? "green" : "red", value);
            };
    
            var pctChange = function (value) {
                return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
            };
    
            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>  
    
    </head>
    <body>
        @(Html.X().ResourceManager())
        @(Html.X().GridPanel()
            .ID("GridPanel1")
            .Title("Array Grid")
            .Width(600)
            .Height(350)
            .Store(Html.X().Store()
                .Model(Html.X().Model()
                    .Fields(
                        new ModelField("company"),
                        new ModelField("price", ModelFieldType.Float),
                        new ModelField("change", ModelFieldType.Float),
                        new ModelField("pctChange", ModelFieldType.Float),
                        new ModelField("lastChange", ModelFieldType.Date, "M/d hh:mmtt")
                    )
                )
                .DataSource(Model)
            )
            .ColumnModel(
                Html.X().Column().Text("Company").DataIndex("company").Flex(1),
                Html.X().Column().Text("Price").DataIndex("price").Renderer(RendererFormat.UsMoney),
                Html.X().Column().Text("Change").DataIndex("change").Renderer("change"),
                Html.X().Column().Text("Change").DataIndex("pctChange").Renderer("pctChange"),
                Html.X().DateColumn().Text("Last Updated").DataIndex("lastChange")
            )
        )
    
        @(Html.X().ToolTip()
           .Target("GridPanel1")
           .Delegate(".x-grid-cell")
           .TrackMouse(true)
           .Listeners(l =>
           {
               l.Show.Handler = "onShow(this, #{GridPanel1});";
           })
        ) 
    </body>
    </html>

    Model

    public class Companies
    {
        public static IEnumerable GetAllCompanies()
        {
            return new object[]
            {
                new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
                new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },
            };
        }
    }

    Controller

    public ActionResult Index()
    {
        return View(Companies.GetAllCompanies());
    }
    Last edited by Dimitris; Jan 30, 2015 at 1:40 PM.
  3. #3
    Thanks,

    I'll give it a try!

Similar Threads

  1. [CLOSED] IE11 Tool Tips
    By Kev in forum 2.x Legacy Premium Help
    Replies: 6
    Last Post: Jan 10, 2014, 11:20 AM
  2. [CLOSED] Text on Series and Tool tips for Grouped Bar Chart
    By WHISHWORKS in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Jul 16, 2012, 10:59 AM
  3. [CLOSED] Tool tip for grid cell in case of failed validation
    By AnulekhaK in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Dec 13, 2011, 12:15 PM
  4. [CLOSED] Grid view Paging tool bar
    By majestic in forum 1.x Legacy Premium Help
    Replies: 9
    Last Post: Dec 01, 2010, 11:37 AM
  5. Replies: 1
    Last Post: Oct 09, 2009, 3:46 AM

Posting Permissions