CODEWITHSUNDEEP
htmlasp.net-mvc-4mvvmkendo-ui
bob.mazzo
bob.mazzo

Reputation: 5627

How to add a tooltip based on a DropDown list

Basically I have a Kendo Grid where a couple of my columns also have Kendo DropDowns. I would like to attach a ToolTip based on the value the user chooses from the "Instrument" dropdown.

Here's my grid javascript code (using MVVM pattern):

      tradesGrid = $("#tradesGrid").kendoGrid({
        dataSource: datasource,
        toolbar: [
            { name: "create", text: "Add Trade" }
        ],
        columns: [{
            field: "TradeId"
        },
       {
            field: "Instrument",
            editor: instrumentsDropDownEditor, template: "#=Instrument#"
        },
         { command: ["edit", "destroy"] },
        ],
        sortable: true,
        editable: "popup",
    });

and here's the Editor function for the Instrument dropdown :

 function instrumentsDropDownEditor(container, options) {

    var instrItems = [{     
        "optionInstr": "OPTION 22/11/2013 C70 Equity"
    }, {
        "optionInstr": "OPTION 26/11/2013 C55 Equity"
    },
     {
        "optionInstr": "OPTION 30/11/2013 C80 Equity"
     }
    ];

    var input = $('<input id="Instrument" name="Instrument">'); 
    input.appendTo(container);
    input.kendoDropDownList({
        dataTextField: "optionInstr",
        dataValueField: "optionInstr",
        dataSource: instrItems, // bind it to the brands array
        optionLabel: "Choose an instrument"
    }).appendTo(container);
}

and on my Html view file I'm starting with this idea :

  <span class="key-button"
              title="Instrument Details!!!"
              data-role="tooltip"
              data-auto-hide="true"
              data-position="right"
              data-bind="events: { show: onShow, hide: onHide }"
  </span>

Upvotes: 0

Views: 3846

Answers (1)

CodingWithSpike
CodingWithSpike

Reputation: 43718

I don't have time to rig up a jsFiddle right now, but I'm pretty sure this would work...

Init your tooltip in javascript, and specify content that is a function:

var myTooltip = "";

var tooltipWidget = $("#whatever").kendoTooltip({
  filter: "a",
  content: function (item) { return myTooltip; },
  ...
}).data("kendoTooltip");

Then on your dropdown widget, specify a change function handler that sets myTooltip to whatever contents you want.

var onSelect = function (e) {
    myTooltip = ...;
    tooltipWidget.refresh();
};

$("#dropdownlist").kendoDropDownList({
  select: onSelect,
  ...
});

Or you can change the title property on your HTML element, if that is easier. However, the tooltip widget won't refresh its contents after it has been displayed, which is why you need to manually call tooltipWidget.refresh() after you change the contents.

Upvotes: 1

Related Questions