Skip to content

Update grid-rows-text-ellipsis.md #1548

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jul 18, 2023
Merged

Update grid-rows-text-ellipsis.md #1548

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d5dacc1
Update grid-rows-text-ellipsis.md
firozmangroe Jul 18, 2023
79479e1
docs(grid): Apply custom column and row styles to separate Grid insta…
dimodi Jul 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 41 additions & 16 deletions knowledge-base/grid-rows-text-ellipsis.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,13 +35,14 @@ You might still want to allow the user to see the whole content, so you can enab


````CSHTML
@*Use the OnCellRender event to pass a custom CSS class to the Grid column and prevent it from wrapping the text in multiple lines for the Notes column. Display the full content of the column in a separate Window component.*@

Resize Note column or double click on a row to see the product details

<TelerikGrid Data="@MyData" Height="400px"
Pageable="true" Sortable="true" Groupable="true"
FilterMode="Telerik.Blazor.GridFilterMode.FilterRow"
@*Use the OnCellRender event to pass a custom CSS class to the Grid column and prevent it from wrapping the text in multiple lines for the Notes column. Display the full content of the column in a separate Window component.
Use the OnRowRender event to set a custom CSS class to Grid rows.*@

Both Grids have column resizing enabled. Double click a row to see the full Notes value.
<br />
Ellipsis for the Notes column via OnCellRender.
<TelerikGrid Data="@MyData" Height="300px"
Pageable="true" Sortable="true"
Resizable="true" Reorderable="true"
OnRowDoubleClick="@OnRowDoubleClickHandler">
<GridColumns>
Expand All @@ -61,11 +62,30 @@ Resize Note column or double click on a row to see the product details
</GridColumns>
</TelerikGrid>

Ellipsis for all columns via OnRowRender.

<TelerikGrid Data="@MyData" Height="300px"
Pageable="true" Sortable="true"
Resizable="true" Reorderable="true"
OnRowDoubleClick="@OnRowDoubleClickHandler"
OnRowRender="@OnRowRender">
<GridColumns>
<GridColumn Field="@(nameof(SampleData.Id))" Width="100px" />
<GridColumn Field="@(nameof(SampleData.Name))" Title="Employee Name" Width="100px" />
<GridColumn Field="@(nameof(SampleData.Team))" Title="Team" Width="100px" />
<GridColumn Field="@(nameof(SampleData.Note))" Title="Notes" Width="200px" />
<GridColumn Field="@(nameof(SampleData.HireDate))" Title="Hire Date" Width="100px" />
<GridColumn Title="Empty Column" />
</GridColumns>
</TelerikGrid>

<style>
/* template */
div.custom-ellipsis,
/* OnCellRender */
.k-grid td.custom-ellipsis {
.k-grid td.custom-ellipsis,
/* OnRowRender */
.k-grid tr.custom-ellipsis .k-table-td {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
Expand All @@ -87,27 +107,34 @@ Resize Note column or double click on a row to see the product details
</TelerikWindow>

@code {
bool WindowIsVisible { get; set; }
private bool WindowIsVisible { get; set; }

SampleData CurrEmployee { get; set; } = new SampleData();
private SampleData CurrEmployee { get; set; } = new SampleData();

void OnRowDoubleClickHandler(GridRowClickEventArgs args)
private void OnRowDoubleClickHandler(GridRowClickEventArgs args)
{
CurrEmployee = args.Item as SampleData;

WindowIsVisible = !WindowIsVisible;
}

void OnCellRenderHandler(GridCellRenderEventArgs args)
// apply ellipsis to specific columns
private void OnCellRenderHandler(GridCellRenderEventArgs args)
{
args.Class = "custom-ellipsis";
}

// apply ellipsis to all columns
private void OnRowRender(GridRowRenderEventArgs args)
{
args.Class = "custom-ellipsis";
}

public IEnumerable<SampleData> MyData = Enumerable.Range(1, 30).Select(x => new SampleData
{
Id = x,
Name = "Employee " + x,
Team = "team " + x % 5,
Name = "Employee Name " + x,
Team = "Team Name " + x % 5,
Note = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has... ",
HireDate = DateTime.Now.AddDays(-x).Date
});
Expand All @@ -126,5 +153,3 @@ Resize Note column or double click on a row to see the product details
## See also

* [Knowledge-Base article: Long text in TreeList does not align with the corresponding level]({%slug treelist-longer-text-starts-from-root-level%})