showing only specified number of characters in grid cell

3 posts, 0 answers
  1. Mic
    Mic avatar
    9 posts
    Member since:
    Nov 2012

    Posted 13 Nov 2012 Link to this post

    Hallo,

    Is there any way to make my grid cell to show only ie 50 characters from what i put in that cell?
    And is it possible to bind this cell to a click event on which the cell would become great enough to show all sentence?

    Thanks in advance
  2. Maxim
    Maxim avatar
    63 posts
    Member since:
    Mar 2007

    Posted 19 Nov 2012 Link to this post

    I was trying to do something like you describe. However I did not do it based on character count. I used CSS to style my cell to support overflow as below.
    #grid div.k-grid-content tr[data-uid] {
        -ms-text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
    }
    #grid div.k-grid-content tr[data-uid] td {
        white-space: nowrap;
    }
    Then I added a class to my cell in grid config to be able to support tool tip popup:
    $("#grid").kendoGrid({
        columns: [
            {
                field: "Description",
                title: "Description",
                width: 90,
                attributes: { "class": "popup" }
            }
        ]
    });
    And later I setup all my cells to display tool tip using jQuery UI:
    $("#grid").tooltip({
        items: "td.popup",
        content: function () {
            var element = $(this);
            if (element.is("td.popup")) {
                return element.html();
            }
        }
    });

  3. Kurtis
    Kurtis avatar
    4 posts
    Member since:
    Oct 2015

    Posted 18 Feb 2016 in reply to Mic Link to this post

     div#Grid.k-widget.k-grid table tbody tr[data-uid] td {
        white-space: nowrap;
        max-width: 200px;
    }

     

    Max Width Element cut down the cell and gave it the ellipsis for me.  You can follow the same steps above to add a clickable function. 

Back to Top