PDA

View Full Version : [CLOSED] Tooltip on CommandColumn



JCarlosF
Jun 17, 2013, 3:09 PM
I have the following gridpanel:

6392


How I can add a tooltip to each of the flags?



An example of code commandcolumn on the client side is:



<ext:CommandColumn ID="CommandColumnFeb" runat="server" Width="40" Text="Feb" Hideable="false" Resizable="false" DataIndex="Feb">
<Commands>
<ext:GridCommand Icon="FlagGreen" CommandName="NotifNo" Hidden ="true" />
<ext:GridCommand Icon="FlagRed" CommandName="NotifYes" Hidden="true" />
<ext:GridCommand Icon="FlagYellow" CommandName="NotifYesA" Hidden="true" />
</Commands>
<PrepareToolbar Fn="prepareToolbarFeb" />
</ext:CommandColumn>

var prepareToolbarFeb = function (grid, toolbar, rowIndex, record) {
if (record.get("Feb") == 'Rojo') {
toolbar.items.getAt(0).hide();
toolbar.items.getAt(1).show();
toolbar.items.getAt(2).hide();
}
if (record.get("Feb") == 'Verde') {
toolbar.items.getAt(0).show();
toolbar.items.getAt(1).hide();
toolbar.items.getAt(2).hide();
}
if (record.get("Feb") == 'Amarillo') {
toolbar.items.getAt(0).hide();
toolbar.items.getAt(1).hide();
toolbar.items.getAt(2).show();
}
};



The tooltip content I wish to add from the codebehind:



Function CreaLed(Ub As Double, DMes As Integer, DEq As Integer, DEqM As Integer)
Dim valor As String = ""
If DMes > DEq Then valor = "Rojo"
If DMes <= DEq Then valor = "Amarillo"
If DMes <= DEqM Then valor = "Verde"

'Tooltip CommandColumn: (Dmes/DEq)

Return valor
End Function


how could I do that?

thanks!!

Daniil
Jun 17, 2013, 4:54 PM
Hi @JCarlosF,

Is a GridCommand's ToolTip-Text property not what you need?

<ext:GridCommand ToolTip-Text="Hello" />

JCarlosF
Jun 17, 2013, 5:11 PM
Hi @JCarlosF,

Is a GridCommand's ToolTip-Text property not what you need?

<ext:GridCommand ToolTip-Text="Hello" />

exactly that need, but as I can assign value from the codebehind?

considering that the tooltip should be different in each cell

thanks!

Baidaly
Jun 18, 2013, 12:39 AM
Hello!




considering that the tooltip should be different in each cell


What do you mean by different in each cell?


exactly that need, but as I can assign value from the codebehind?


Take a look at the following sample:



<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.Store1.DataSource = 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" },
new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am" },
new object[] { "American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am" },
new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am" }
};

this.Store1.DataBind();

(MyCommandColumn.Commands[0] as GridCommand).ToolTip.Text = "Another Delete Tooltip";
(MyCommandColumn.Commands[2] as GridCommand).ToolTip.Text = "Another Edit Tooltip";
}
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
</head>
<body>
<form runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />

<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="company" />
<ext:ModelField Name="price" Type="Float" />
<ext:ModelField Name="change" Type="Float" />
<ext:ModelField Name="pctChange" Type="Float" />
<ext:ModelField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
</Fields>
</ext:Model>
</Model>
</ext:Store>

<ext:GridPanel
runat="server"
StoreID="Store1"
Width="800"
Height="300">
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Company" DataIndex="company" Flex="1" />

<ext:CommandColumn runat="server" Width="100" Text="Toolbar Cmds" ID="MyCommandColumn">
<Commands>
<ext:GridCommand Icon="Delete" CommandName="Delete">
<ToolTip Text="Delete" />
</ext:GridCommand>
<ext:CommandSeparator />
<ext:GridCommand Icon="NoteEdit" CommandName="Edit">
<ToolTip Text="Edit" />
</ext:GridCommand>
</Commands>
<Listeners>
<Command Handler="Ext.Msg.alert(command, record.data.company);" />
</Listeners>
</ext:CommandColumn>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel runat="server" Mode="Single" />
</SelectionModel>
</ext:GridPanel>
</form>
</body>
</html>

JCarlosF
Jun 18, 2013, 3:36 PM
(MyCommandColumn.Commands[0] as GridCommand).ToolTip.Text = "Another Delete Tooltip";
(MyCommandColumn.Commands[2] as GridCommand).ToolTip.Text = "Another Edit Tooltip";





this works very well, but I need a tooltip for each cell

Daniil
Jun 18, 2013, 3:42 PM
Do you mean different tooltips for different rows? If so, it should be done via a separate "full" ToolTip control and its Delegate option.
http://examples2.ext.net/#/Miscellaneous/ToolTips/GridPanel_Cell_Tooltip/

JCarlosF
Jun 18, 2013, 3:44 PM
What do you mean by different in each cell?

this means that the tooltip is variable in each cell, this value depends on a database, would need to use something like the preparecommand but by assigning the values ​​from the codebehind,



TryCast(CommandColumnNov.Commands(0), GridCommand).ToolTip.Text = DMes & " / " & DEq


DMes and DEq ----> these are variables that are calculated in the codebehind


You that suggest me for this?




thanks!

Baidaly
Jun 18, 2013, 9:34 PM
Please, try @Daniil's suggestion. You should use "full" tooltip in this case.