Question

基本上我有一个Kendo Grid，其中我的几列也有Kendo DropDowns。我想根据用户从“工具”下拉列表中选择的值附加工具提示。

这是我的网格javascript代码（使用MVVM模式）：

      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",
    });

这里是Instrument下拉菜单的Editor函数：

 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);
}

在我的Html视图文件中，我从这个想法开始：

  <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>

Answer 1

我现在没时间安装jsFiddle，但我很确定这会有用......

在javascript中初始化您的工具提示，并指定作为函数的内容：

var myTooltip = "";

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

然后在您的下拉窗口小部件中，指定一个更改函数处理程序，将myTooltip设置为您想要的任何内容。

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

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

或者您可以更改HTML元素的title属性，如果这更容易的话。但是，工具提示窗口小部件在显示后不会刷新其内容，这就是您需要在更改内容后手动调用tooltipWidget.refresh()的原因。

如何基于DropDown列表添加工具提示

1 个答案: