Hi,

I have column grid call description and it has sometimes a lot of text.

I want to see only 5 rows and 3 dots.

how can I do that?

thanks

picture is attached 

this is my code.

@(Html.Kendo().Grid<TaskManagementUI.Models.TaskViewModel>()
      .Name("GridTasks")
      .Columns(columns =>
      {
          columns.Bound(c => c.ID).Hidden();
          columns.Bound(c => c.ProjectID).Title("Project Id").Hidden();
          columns.Bound(c => c.ProjectName).Title("Project Name").Hidden();
          columns.Bound(c => c.Name).Title("Name");
          columns.Bound(c => c.DevelopersDataSource).ClientTemplate("#=DevelopersTemplate(DevelopersDataSource)#").EditorTemplateName("DevelopersEditor").Title("Developers")
          .Filterable(f => f.UI("developersMultiFilter").Extra(false).Messages(m => m.Info("Show items contain these developers"))).Sortable(false);
          columns.Bound(c => c.ActualStartDate).Title("Actual Start Date").EditorTemplateName("ActualStartDateEditor").Format("{0: MM/dd/yyyy}");
          columns.Bound(c => c.ActualEndDate).Title("Actual End Date").EditorTemplateName("ActualEndDateEditor").Format("{0: MM/dd/yyyy}");
          columns.Bound(c => c.PercentCompleted).Title("Percent Completed").Width(130).ClientTemplate(" <div style='width:94px; height:94px;'><canvas id='taskChart_#=ID #' width='94' height='94' style='display: block; width: 94px; height: 94px;'></canvas></div>").EditorTemplateName("PercentCompletedEditor");
          columns.Bound(c => c.Description).Title("Description"); 
          columns.Command(command => command.Custom("endTask").Click("endTask").Text("End Task"));
          columns.Command(command => { command.Edit(); command.Destroy(); }).Width(150);
      })
    .Scrollable()
    .Resizable(resize => resize.Columns(true))
    .Editable(editable => editable.Mode(GridEditMode.InLine).TemplateName("TaskEdit"))
    .Groupable(g => g.Enabled(false))
    .Filterable()
    .ToolBar(toolbar =>
    {

        toolbar.Template(@<text>
        <div class="toolbar" style="float:left">
            <a class="k-button k-button-icontext" onclick='addTaskAjax()' href="#">
                <span class="k-icon k-i-add"></span> ADD TASK
            </a>
            <a class="k-button k-grid-excel k-button-icontext" href="#">
                <span class="k-icon k-i-excel"></span>Export to Excel
            </a>
        </div>
        </text>);

    })
    .Excel(excel => excel
                   .AllPages(true)
                   .FileName("Tasks.xlsx")
                   .Filterable(true)
                   .ForceProxy(true)
                   .ProxyURL(Url.Action("FileExportSave", "Home")))
    .Pageable(pager => pager
                       .Refresh(true)
                       .PageSizes(true)
                       .PageSizes(new int[] { 6, 15, 20 })
                       .ButtonCount(5))
    .Sortable(sortable =>
    {
        sortable.SortMode(GridSortMode.MultipleColumn)
       .Enabled(true);
    })
    .Events(events => events.FilterMenuOpen("onFilterMenuOpen").FilterMenuInit("filterMenuInitTask").DataBound("onDataBoundSavedTasks").Cancel("createPieAfterCancellation").Edit("onTaskEdit").Save("onTaskSave").ExcelExport("exportTasks"))
    .DataSource(dataSource => dataSource
                              .Ajax()
                              .Group(group => group.Add(p => p.ProjectName))
                              .PageSize(20)
                              .Events(events => events.Error("errorHandlerTask"))
                              .Read(read => read.Action("GetSavedTasks", "Task").Data("additionalData"))
                              .Update(update => update.Action("UpdateTask", "Task").Data("serialize"))
                              .Destroy(update => update.Action("DeleteTask", "Task").Data("serialize"))
                              .Model(model => model.Id(item => item.ID))))

Hello Michael,

In order to show ellipsis in the Grid cells where text is longer you can add the following CSS rule:




With that said, if you would like the appearance to be consistent across different screen widths you can specify width for the Grid columns. When some of the columns have no explicit width defined they will resize according to the available space for the grid container. 

Furthermore, having the text shown on multiple lines and having ellipsis is not that trivial. This is because the text-overflow property works with a single line of text. In order to have the text span on multiple lines I can suggest using the approach from the example linked below:

• https://codepen.io/martinwolf/pen/qlFdp

Regards,
Viktor Tachev
Progress Telerik

this is not good for me. it's display only one row. I want to see 5 rows.

thanks

Hello Michael,

The text-overflow property supports only text on a single line. If the requirement is to have multiple lines of text and also ellipsis you would need to use custom implementation as illustrated in the example linked in my previous post. 

For your convenience I have created a sample dojo where the approach is implemented. 

• https://dojo.telerik.com/ejabi

Note that this is a custom implementation that is not available as a built-in CSS feature. Thus, you may need to adjust it in order to fit your exact scenario. Furthermore, it can behave differently in various browsers. Please test the behavior and ensure that it works as expected in your environment. 



Regards,
Viktor Tachev
Progress Telerik

This is nice, but when the grid is resizable: true, the text is not extend auto fit to the cell limit.

how can I dot that?

Thanks

do*

Hello Michael,

If the column should be resizable you can remove the max-width setting from the custom CSS. 

• https://dojo.telerik.com/ejabi/4

With that said, please note that this feature is a custom functionality that is not directly related to the Grid component. This is a workaround because of the CSS limitation that text-overflow setting supports one line only. Please test the custom code thoroughly to ensure that it works as expected in your environment.


Regards,
Viktor Tachev
Progress Telerik