[CLOSED] How to set Command ToolTip on the client?

[vadym.f]

Hi,

I'd like to access an ImageCommand on the client and set its tooltip. Please suggest a solution.

                        
<ext:ImageCommandColumn Width="26" Resizable="false">
    <Commands>
               <ext:ImageCommand CommandName="Files">
                       <ToolTip Text="" />
               </ext:ImageCommand>
     </Commands>
     <PrepareCommand Fn="prepareCommand" />
</ext:ImageCommandColumn>

// Something like this
Ext.get(Files.el).child("div.some-class", true).qtip = String.format("New tooltip");

[vadym.f]

I found a way to do it:

        var prepareCommand = function (grid, command, record, row) {
                command.qtext = "New tooltip";
        };

If this approach is correct, please close down this thread.

Somehow, this doesn't work correctly for a GridCommand tooltip:

         <ext:CommandColumn Width="26" Resizable="false">
                  <Commands>
                        <ext:GridCommand Icon="Book" CommandName="Books">
                                    <ToolTip Text="RowIndex=" />
                        </ext:GridCommand>
                  </Commands>
                 <PrepareToolbar Fn="prepareToolbar" />
        </ext:CommandColumn>

        var prepareToolbar = function (grid, toolbar, rowIndex, record) {
                toolbar.items.itemAt(0).tooltip.text = toolbar.items.itemAt(0).tooltip.text + " " + rowIndex;
        };

What ends up happening is the tooltip gets concatenated and grows instead of just showing the appropriate rowIndex. If there's a workaround, it would be great.

[Daniil]

I found a way to do it:

        var prepareCommand = function (grid, command, record, row) {
                command.qtext = "New tooltip";
        };

If this approach is correct, please close down this thread.

Yes, that is correct for ImageCommands.

Somehow, this doesn't work correctly for a GridCommand tooltip:

         <ext:CommandColumn Width="26" Resizable="false">
                  <Commands>
                        <ext:GridCommand Icon="Book" CommandName="Books">
                                    <ToolTip Text="RowIndex=" />
                        </ext:GridCommand>
                  </Commands>
                 <PrepareToolbar Fn="prepareToolbar" />
        </ext:CommandColumn>

        var prepareToolbar = function (grid, toolbar, rowIndex, record) {
                toolbar.items.itemAt(0).tooltip.text = toolbar.items.itemAt(0).tooltip.text + " " + rowIndex;
        };

What ends up happening is the tooltip gets concatenated and grows instead of just showing the appropriate rowIndex. If there's a workaround, it would be great.

For GridCommands please use the setTooltip method, as here:
https://examples1.ext.net/#/GridPane...epare_Toolbar/

[vadym.f]

Thanks Daniil!

I've observed that using CommandColumn comes with a noticeable client side performance penalty compared to ImageCommandColumn. I'm not sure about the reason, but under the same conditions with prepareCommand handler in play ImageCommandColumn renders much faster for GridPanels with hundreds of records. The difference becomes even more pronounced on Grid store reload. Could it be something in the setup?

[Daniil]

Yes, we recommend to use ImageCommands in such cases. It's a much more lightweight thing than a CommandColumn and GridCommands.

ImageCommands are just raw HTML rendered using XTemplate functionality.

But CommandColumns is internally a Toolbar and GridCommands are buttons. So, it renders a Toolbar with buttons instances for each row and, yes, it can take much more time when rendering just raw HTML using an XTemplate. Therefore you notice a performance issue with a CommandColumn.

[vadym.f]

Thanks for the clarification! Would it be possible to achieve some of the advanced toolbar-like functionality for ImageCommands, e.g., button-like behavior on mouse hover?

[Daniil]

button-like behavior on mouse hover?

I think it's possible. I would set a MouseOver listener adding some CSS if a mouse hovers ImageCommands.

[vadym.f]

OK, I believe I'm gonna stick with ImageCommands for now. You can mark this thread as closed.