Tooltip does not show at all in Kendo grid column

4 posts, 0 answers
  1. ying
    ying avatar
    4 posts
    Member since:
    Jan 2015

    Posted 08 Jan 2015 Link to this post

    I have a tooltip in a kendor grid column,  however its not showing at all , data in grid displayed properly.

    Here is the controller code:

    $("#grid").kendoGrid({     
          
          dataSource:{
    transport:{

    read: {
    url: "app/rest/search",
    type: "post",
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    data: searchDTO,
    cache: false
    },
    parameterMap: function (data, type) {
    if (type == "read" && data) {
    return kendo.stringify({SearchDTO : searchDTO , pageSize:data.pageSize, page:data.page, skip:data.skip, take:data.take} );
    }
    }
    },
    schema:{
    model: {
    fields: {
    type1: { type: "string"},
    type2: { type: "string"},
    .....

    }
    },
    data:function(data){
    return data.data;
    },
    total:function(data){
    return data.total;
    }
    },
    serverPaging:true,
    serverFiltering:true,
    pageable: true,
    pageSize:10,
    page: 1,
    take: 10,
    skip: 0
    },
    autoBind: false,
    pageable: true,
    filterable: true,
    resizable: true,
    pageSize:10,
    columns: [
    { field: 'type1', title: 'Type1', template : kendo.template("<div id='gridTooltip' kendo-tooltip k-content=\"'#=type1#'\">#=type1#</div>") },
    { field: 'type2', title: 'Type2' },
    .....

    ]
    });
        
    I could not figure out why the tooltip can not be shown, I viewed generated source, I could see k-content is populated correctly
    <td role="gridcell"><div id="gridTooltip" kendo-tooltip="" k-content="'good content'">goog content</div></td>

    Can some one help ?

    Thanks.

    Ying
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 12 Jan 2015 Link to this post

    Hi Ying,

    In order to achieve the expected result I would suggest the following:
    - Attach a handler to the grid table;
    - Set an attribute to the type1 field;
    - Filter the tooltip content by this attribute.
    For your convenience here is a basic example - please check it and let me know if this fits the current requirements.

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. ying
    ying avatar
    4 posts
    Member since:
    Jan 2015

    Posted 12 Jan 2015 in reply to Iliana Nikolova Link to this post

    Hi,
    First of all, thanks for your reply.

    This helps a bit, but does not quite meet our requirement , we want show what's in k-content attribute,  not the text for the tooltip div as the two might be different for example we need do following :
     
    columns: [
    { field: 'type1', title: 'Type1', template : kendo.template("<div id='gridTooltip' kendo-tooltip k-content=\"'#=type1#'\">#: type1.substring(1, 10)#</div>") },
    { field: 'type2', title: 'Type2' },
      ....
    also, we wonder why we need do this work around, we thought based on Kendo documentation purely by defining it in template ,  tooltip should work, if we need do work around then we have to do it for every tooltip,  which is very inconvenient and redundant.   

    We look forward to your advice.

    Thanks.

    Ying
  5. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 14 Jan 2015 Link to this post

    Hi Ying,

    If I understand correctly you would like to display truncated text in the Grid column but the full text in the tooltip? Please take a look at this modified example and let me know if it will fit the current requirements.

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready