Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: ToolTip not loading on a grid row- URGENT NEED

  1. #1
    Ext User
    Join Date
    Nov 2009
    Location
    INDIA
    Posts
    21

    Question ToolTip not loading on a grid row- URGENT NEED

    Hi,
    I need a tooltip for my project which shows a individual row on mouse over,But tooltip is not loading.

    I read many articles but couldn't find the solution

    my code:
    grid.on('mouseover',function(e,t)
    {

    var idx = grid.getView().findRowIndex(e.target);
    var row = this.getStore().getAt(idx);
    var rowID = row.id;
    var Connection = new Ext.data.Connection();
    Connection.request({
    url: 'Handler.ashx',

    method: 'post',
    success: function(o)
    {

    Tooltip = new Ext.ToolTip({

    target:this.view.mainBody,
    title: 'Events',
    autoHide: true,
    showDelay:60,
    hideDelay:0,
    autoHeight:true,
    width:400,
    html: o.responseText
    })

    },
    params:
    {
    get_data: 'toolTip',
    get_id: rowID,
    docRevId:docId
    }
    });
    Tooltip.show();
    });
    handler .ashx is writing the following string as responce:

    {success:true,o:<table><tr><td>Date</td><td>1/30/2010</td></tr><tr><td>Action</td><td>Withdraw</td></tr></table>}

    Thanq,
    Sai Dasika

  2. #2
    Sencha User tobiu's Avatar
    Join Date
    May 2007
    Location
    Munich (Germany)
    Posts
    2,751

    Default

    a not shown tooltip is "URGENT"? *lol*

    a closer look to the api of tooltip (delegate) shows this example:

    Code:
    var myGrid = new Ext.grid.gridPanel(gridConfig);
    myGrid.on('render', function(grid) {
        var store = grid.getStore();  // Capture the Store.
    
        var view = grid.getView();    // Capture the GridView.
    
        myGrid.tip = new Ext.ToolTip({
            target: view.mainBody,    // The overall target element.
    
            delegate: '.x-grid3-row', // Each grid row causes its own seperate show and hide.
    
            trackMouse: true,         // Moving within the row should not hide the tip.
    
            renderTo: document.body,  // Render immediately so that tip.body can be referenced prior to the first show.
    
            listeners: {              // Change content dynamically depending on which element triggered the show.
    
                beforeshow: function updateTipBody(tip) {
                    var rowIndex = view.findRowIndex(tip.triggerElement);
                    tip.body.dom.innerHTML = "Over Record ID " + store.getAt(rowIndex).id;
                }
            }
        });
    });
    if you use the advanced forum-search for "grid tooltip" with titles only, you can find it quite fast.

    kind regards,
    tobiu
    Best regards
    Tobias Uhlig

  3. #3

  4. #4
    Ext User
    Join Date
    Nov 2009
    Location
    INDIA
    Posts
    21

    Default through a ajax request

    Hi,
    thanq Eugen,tobiu.
    what i need is through a ajax request.I want it something like this

    grid.on('mouseover',function(e,t)
    {
    if(grid.getView().findRowIndex(e.target)!=null)
    {
    var idx = grid.getView().findRowIndex(e.target);

    var row = this.getStore().getAt(idx);
    var rowID = row.id;
    var Connection = new Ext.data.Connection();
    Connection.request({
    url: 'VersionHandler.ashx',

    method: 'post',
    success: function(object)
    {


    Ext.QuickTips.init(); //i am modifying the object and which should come in tooltip



    Ext.apply(Ext.QuickTips.getQuickTip(), {
    width: 200,


    trackMouse: true,
    text:object.responseText,
    title:'Events'
    });

    },
    params:
    {
    get_data: 'toolTip',
    get_id: rowID,
    docRevId:docRevId
    }
    });

    }
    });
    return grid;

  5. #5
    Sencha User Eugen_'s Avatar
    Join Date
    Feb 2010
    Posts
    106

    Default

    Quote Originally Posted by Sai Dasika View Post
    Hi,
    thanq Eugen,tobiu.
    what i need is through a ajax request.I want it something like this
    Why you don't want load a tooltip text in your grid store a priori?

  6. #6
    Ext User
    Join Date
    Nov 2009
    Location
    INDIA
    Posts
    21

    Default table format

    Hi,
    I want the tooltip to have a tabular format with some styles and fonts,so i am trying to make it at a handler and trying to return it.

    The tooltip is not visible on the screen.Please help me out.
    Thanx,
    Sai Dasika

  7. #7
    Sencha User Eugen_'s Avatar
    Join Date
    Feb 2010
    Posts
    106

    Default

    Quote Originally Posted by Sai Dasika View Post
    Hi,
    I want the tooltip to have a tabular format with some styles and fonts,so i am trying to make it at a handler and trying to return it.
    You can generate tooltip text:

    Code:
    <table><tr><td>Date</td><td>1/30/2010</td></tr><tr><td>Action</td><td>Withdraw</td></tr></table>
    on the server side when you generate content for your grid store and put this text as additional field in the grid store.

    For styles and fonts try to use css.

  8. #8
    Ext User
    Join Date
    Nov 2009
    Location
    INDIA
    Posts
    21

    Default Long Load time

    Quote Originally Posted by Eugen_ View Post
    You can generate tooltip text:

    Code:
    <table><tr><td>Date</td><td>1/30/2010</td></tr><tr><td>Action</td><td>Withdraw</td></tr></table>
    on the server side when you generate content for your grid store and put this text as additional field in the grid store.

    For styles and fonts try to use css.
    We already have a long grid load time at the start due to many records.So,we want it to have a ajax request.We also have multiple grid refreshes..So,automatically this is the only option we were left with.

    Please give some help to make tooltip visible.The object is getting returned in the correct form.So we want the tooltip to display.

  9. #9

    Default Solutions

    #1: Use a PagingToolbar in combination with your grid to reduce the number of records loaded at once. You'll want to implement server-side paging as well so that the grid is only displaying something like 5-50 records at a time. Respond with a request for sample PagingToolbar code and I will provide some.

    #2: If you're using something like PHP, or JSP, you should be able to get the necessary tooltips for the grid when the screen is loading, rather than as an AJAX request. Creating additional AJAX requests when unnecessary is always a performance issue. (Unless there's something I'm missing here, and you need to do it this way.)

  10. #10
    Ext User
    Join Date
    Nov 2009
    Location
    INDIA
    Posts
    21

    Default Tooltip is of major concern

    Quote Originally Posted by rbastic View Post
    #1: Use a PagingToolbar in combination with your grid to reduce the number of records loaded at once. You'll want to implement server-side paging as well so that the grid is only displaying something like 5-50 records at a time. Respond with a request for sample PagingToolbar code and I will provide some.

    #2: If you're using something like PHP, or JSP, you should be able to get the necessary tooltips for the grid when the screen is loading, rather than as an AJAX request. Creating additional AJAX requests when unnecessary is always a performance issue. (Unless there's something I'm missing here, and you need to do it this way.)

    Everything is fine but the only problem is tooltip is not visible on the row.help needed to make tooltip visible.

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •