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))))
6 Answers, 1 is accepted
In order to show ellipsis in the Grid cells where text is longer you can add the following CSS rule:
.k-grid td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}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:
Regards,
Viktor Tachev
Progress Telerik
Rank 1
this is not good for me. it's display only one row. I want to see 5 rows.
thanks
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.
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
Rank 1
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
Rank 1
If the column should be resizable you can remove the max-width setting from the custom CSS.
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