ToolTip for DropDownList custom Grid editor

3 posts, 0 answers
  1. Duane
    Duane avatar
    2 posts
    Member since:
    Feb 2017

    Posted 06 Apr Link to this post

    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.

  2. Duane
    Duane avatar
    2 posts
    Member since:
    Feb 2017

    Posted 07 Apr Link to this post

    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?

     

  3. Ianko
    Admin
    Ianko avatar
    1729 posts

    Posted 10 Apr Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top