CODEWITHSUNDEEP
javascriptjquerykendo-uikendo-grid
Kala J
Kala J

Reputation: 2070

How do I add qtip to kendo grid for ellipsed words?

Below is how I structured my kendo grid: 

CreateListGrid: function () {
            $("#PlanListGrid").kendoGrid({
                dataSource: {
                    transport: {
                        read:{
                            url: BrowserSide.Url.getFullUrl("PlanningList/ReadPlans"),
                            type: "POST",
                            data: {
                                searchVal: $('#category').val(),
                                status: $('#ListFilterType').val(),
                            },
                        },                       
                        dataType: "json",
                    },
                    pageSize: 10,

                    schema: {
                        data: "Data",
                        total: "Total",
                        model: {
                            fields: {
                                FirstName: { editable: false, nullable: true },
                                LastName: { editable: false, nullable: true },
                                Title: { editable: false },
                                Id: { editable: false }
                            }
                        },
                        errors: "Errors"
                    },
                },
                toolbar: kendo.template($("#template").html()),
                selectable: "row",
                //groupable: true,
                sortable: true,
                //scrollable:true,
                pageable: true,
                columns: [{
                    field: "FirstName",
                    title: "First Name",
                    width: 160,
                    template: "#= SearchItems_Highlight(FirstName)#"
                }, {
                    field: "LastName",
                    title: "Last Name",
                    width: 160,
                    template: "#= SearchItems_Highlight(LastName)#"
                },
                {
                    field: "Title",
                    title: "Plan Title",
                    width: 180,
                    template: "#= SearchItems_Highlight(Title)#"
                }, 
                {
                    field: "Id",
                    title: "Id",
                    width: 0
                },
                ]
            });
            var grid = $("#PlanListGrid").data("kendoGrid");

            grid.hideColumn("Id");
            $("#PlanListGrid > .k-grid-header").css({ "padding-right": "0px;" });

        }

I have the text fields in my kendo grid ellipsed if they are too long for the column width. Now I am having trouble adding a qtip to the ellipsed words in my kendo grid.

EDIT:

Because I'm lazy, I found a similar example online using kendo grid. I added the style for .k-grid td which is similar to what I have now that ellipses the text if it's too long. My question now is how do I add a jquery qtip to the ellipsed text? Rather where in the code should I add the qtip?

Here's the fiddle

Upvotes: 1

Views: 291

Answers (1)

Vijay
Vijay

Reputation: 3023

You can apply qtip after grid creation. 

function applyTooltip() {
    $(".k-grid-content tbody td").each(function (index, element) {
        var td = $(element);
        td.qtip({
            content: td.text(),
            //hide: { when: 'unfocus', delay: 100 },
            style: {
                border: {
                    width: 1,
                    radius: 10
                },
                padding: 2,
                textAlign: 'center',
                tip: true,
                name: 'cream'
            },
            position: {
                adjust: {
                    screen: true
                }
            }
        });
    });
}

updated fiddle: http://jsfiddle.net/Sbb5Z/1610/

You can restrict qTip to columns who have data exceed a certain number of characters (ellipsis) fiddle: http://jsfiddle.net/Sbb5Z/1611/

Upvotes: 2

Related Questions