[SOLVED] Qtip in grid won't go away.

[Scott]

I am trying to use renderer to display qtips to show error messages on individual cells in a grid to show when they are in error. The problem is that the qtips don't go away once the error is fixed. I am also changing the background to red when they are in error, this does go away when the cell is no longer in error. The code for the grid column definition is below. I have tried without the else and have also tried returning the html with a <span> or <div> and that doesn't display as well as setting the tdAttr.

How do I remove the qtip once it is there.

header: "<b>Unit</b>",
dataIndex: 'KDCNTI',
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
	if ((value === '' && (record.get('KDDB') == '1551' || record.get('KDDB') == '2181')) || 
            (value !== '' && (record.get('KDDB') != '1551' && record.get('KDDB') != '2181'))) {
	    metaData.tdAttr = 'style="color:white;background-color:red" data-qtip="Cell in ERROR" data-qclass="x-form-invalid-tip"';
	}
        else {
	    metaData.tdAttr = '';
        }
     	return value;
	},
editor: {
xtype: 'textfield',
enforceMaxLength: true,
maxLength: 5
}

[eweiler]

Can you try adding some console.logs, inspecting the resulting html, and resetting the background-color to white on the else?

[Scott]

I am new to this som not sure how to look at the resulting html. I did a console.log of metadata and the tdAttr show as
tdAttr: "style="color:white;background-color:red" data-qtip="Unit must be blank unless the debit code is 1551 or 2181" data-qclass="x-form-invalid-tip""

Is that what you wanted to see? When I added the else it shows tdAttr: "style="background-color:white""

When I changed the field to eliminate the error condition the color and background-color change as expected but if you hover the mouse over the field the qtip is still there. I have even tried setting data-qtip= " " in the else part.

I have added a button to my form that does DetailGrid.getView().refresh(); and that sets all qtips correctly based on what is in the fields. It is as if once I set a qtip in a renderer for a cell that it stays there even though the field is changed. Any other changes I am making in the renderer (color, background-color) are being made, just the qtip is stuck there until I do the refresh().

[sean.lanktree]

I would try removing the "data-qtip" portion out of the metaData.tdAttr and instead embed it as part of the value that you return:

return '<span data-qtip="some error message">' + value + '</span>

[Scott]

Sean,

That works but there is an issue with it. If the field is empty or only contains blanks then the tooltip does not show at all. So that would work on fields that are always filled in but I have cases where a field is in error if it is not filled in depending on a value in another cell. The changing the background color does work in these cases so maybe that is all the indication the user needs, if a field is highlighted and empty then it needs a value.

One side note, using <span> only showed the tooltip when over the value - for example if the field had a value only one character long then the mouse had to be over that one character. I changed to use a <div> and now the mouse can be over any part of the cell to show the tooltip. Are there any negative implications in using a <div> instead of <span>?

Thanks,

Scott

[eweiler]

I would say no negatvie implications of using a div instead of a span. THe other way, you'd be giving up some functionality though.

The <div> tag defines a division or a section in an HTML document.
The <div> tag is used to group block-elements to format them with CSS.



The <span> tag is used to group inline-elements in a document.
The <span> tag provides no visual change by itself.
The <span> tag provides a way to add a hook to a part of a text or a part of a document.

http://www.w3schools.com/tags/tag_div.asp
http://www.w3schools.com/tags/tag_span.asp

[sean.lanktree]

Scott, if continuing to use span, you can try:

if (Ext.isEmpty(value)){
    value = ' ';
}
return '<span data-qtip="some error message">' + value + '</span>

[Scott]

I decided to leave it as a div because I like that the tooltip displays anywhere in the cell where with a span the cursor had to be over the value which doesn't work as well when the value is only one or two characters.

Thanks for you help.