ToolTip for DropDownList custom Grid editor

[Duane]

I've implemented a DropDownList in a custom editor for a Grid column as follows.

                    $("#control").kendoGrid({
                        dataSource: controlDs,
                        editable: true,
                        saveChanges: function (e) {
                            if (!confirm("Are you sure you wish to save changes?")) {
                                e.preventDefault();
                            }
                        },
                        toolbar: ["save","cancel"],
                        sortable: true,
                        columns: [
                                {
                                    title: "Artifacts",
                                    headerAttributes: {
                                        style: "font-size: 10pt; font-weight: 600; text-align: center;"
                                    },
                                    columns: [
                                        {
                                            field: "family",
                                            editor: customDropDownEditor,
                                            headerAttributes: {
                                                style: "font-size: 10pt; font-weight: 600;"
                                            },
                                            title: "Family",
                                            width: 120
                                        },
                                        {
                                            field: "artifact",
                                            editable: function (dataItem) {
                                                return false;
                                            },
                                            headerAttributes: {
                                                style: "font-size: 10pt; font-weight: 600;"
                                            },
                                            title: "Artifact",
                                            template: '<a href="#=artifact#" target="_blank">#=title#</a>'
                                        }
                                    ]
                                }
                            ]
                    });

                function customDropDownEditor(container, options) {
                    $('<input required name="' + options.field + '"/>')
                        .appendTo(container)
                        .kendoDropDownList({
                            autoBind: false,
                            dataSource: ["one", "two", "three", "four"]
                        });
                }

This works perfectly. Now, how do I attach a ToolTip widget to the items in this DropDownList?

Thanks in advance.

[Duane]

Okay, I think I solved this adequately. I modified the "customDropDownEditor" code as follows.

                function familyDropDownEditor(container, options) {
                    $('<input required name="' + options.field + '"/>')
                        .appendTo(container)
                        .kendoDropDownList({
                            autoBind: false,
                            dataSource: ["one", "two", "three", "four"]
                        });
                    // locate the kendoDropDownList created above
                    var ddl = $("#control").find(".k-dropdown > input").data("kendoDropDownList");
                    $("body").kendoTooltip({
                        filter: 'li.k-item',
                        position: 'right',
                        content: function (e) {
                            var dataItem = ddl.dataItem($(e.target));
                            var content = familyLookupTable[dataItem](); // get tooltip text from the lookup table
                            return content;
                        },
                        width: 80
                    });
                }

Is this the proper approach, or is there a better way to handle this?

 

[Ianko]

Hello Duane,

You could also have the Tooltip initialization outside the editor function. Like in this dojo here: http://dojo.telerik.com/OvOXO. 

Regards,
Ianko
Telerik by Progress