How can I add a title attribute (tooltip) to a cell in the grid?

I’m using Knockout JS and I have an additional model property ‘comments’ that I want to display on hover of a row’s cell.

Is there a nice way I can do this without using JavaScript to retrospectively apply the title to cell each after the grid is rendered?

I’m using version 13.1.20131.2143 and I’m binding my grid using knockout JS:

                <table id=”scenarioGrid” style=”table-layout: auto !important” data-bind=”
                    igGrid: {
                        dataSource: scenarios,
                        primaryKey: ‘id’,
                        features: [{
                            name: ‘Updating’,
                            editMode: ‘none’,
                            enableAddRow: false,
                            enableDeleteRow: false
                        }],
                        autoGenerateColumns: false,
                        columns: [
                            { key: ‘id’, headerText: ‘Scenario ID’, width: 0, hidden: true, dataType: ‘number’ },
                            { key: ‘description’, headerText: ‘Description’, width: ‘auto’, dataType: ‘string’ },
                            { key: ‘createdBy’, headerText: ‘Created By’, width: 120, dataType: ‘string’ },
                            { key: ‘created’, headerText: ”, width: 90, dataType: ‘date’ },
                            { key: ‘lastModifiedBy’, headerText: ‘Last Modified By’, width: 120, dataType: ‘string’ },
                            { key: ‘lastModified’, headerText: ”, width: 90, dataType: ‘date’, format: ‘date’ },
                            { key: ‘options’, headerText: ”, width: 60, dataType: ‘string’, template: optionsTemplate }
                        ]
                    }”>
                </table>

Hi will_telford,

You can use column template in this scenario.

For example here is an example configuration for the description column:

{ key: 'description', headerText: 'Description', width: 'auto', dataType: 'string', template: '<div style=\'width: 100%\' title=\'${comments}\'>${id}</div>' }

Of course the "comments" model property should be declared in the grid as a column (probably hidden) in order to be available for the templating engine.

Hope this helps,
Martin Pavlov
Infragistics, Inc.

What if the cell in question is editable? I can't use a template in that scenario can I?

Hi will_telford,

Templating works when grid is not in edit mode. igGridUpdating uses editors for the cell/row in edit mode. You'll have to use JavaScript code in order to handle that scenario. You should use one of the events igGridUpdating.editCellStarting/editRowStarting and get the editor for the cell with the igGridUpdating.editorForKey. After you have the editor look for the input element in it and attach/change the title attribute to it with $(selector).find("input").attr("title", "title text");

Hope this helps,
Martin Pavlov
Infragistics, Inc. 

Hello will_telford,

I am just following up to see if you need any assistance with this matter.