It would be helpful in some cases to specify which grid lines to display with a default of both:
None - No lines
Horizontal - Only horizontal row lines
Vertical - Only vertical column lines.
Both - H/V lines
Florent - you are seeing the overflow ellipsis. This means that the checkbox column is too narrow, so increase its Width a little.
Regards,
Dimo
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Hi Marin,
you solution works indeed just fine. But if I use your providedd css and use the CheckBoxSelector column at the same time, then I get some weird dots on the UI, check the provided screenshot. Any ideas how to fix that?
Hello Patrick,
You can use CSS for that without the need for extra parameters that would weigh down the component.
Here's a tutorial that can help anyone finding this page get started with how table styling works: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Styling_tables.
Here's a basic example you can step on to implement further customizations as required by your designs:
<style>
div.noBorders table td,
div.noBorders table th {
border: 0;
}
div.bottomBorder table {
border-collapse: collapse;
}
div.bottomBorder table td,
div.bottomBorder table th {
border-bottom: 2px solid yellowgreen;
}
div.rightBorder table td,
div.rightBorder table th {
border-right: 2px solid lime;
}
</style>
<TelerikGrid Data=@MyData Class="noBorders bottomBorder rightBorder" Pageable="true" Height="500px">
<GridToolBar>
<GridCommandButton Command="Add" Icon="add">Add Employee</GridCommandButton>
</GridToolBar>
<GridColumns>
<GridColumn Field=@nameof(SampleData.ID) Title="ID" Editable="false" />
<GridColumn Field=@nameof(SampleData.Name) Title="Name" />
<GridCommandColumn>
<GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</GridCommandButton>
<GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>
<GridCommandButton Command="Delete" Icon="delete">Delete</GridCommandButton>
<GridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</GridCommandButton>
</GridCommandColumn>
</GridColumns>
</TelerikGrid>
@code {
//in a real case, keep the models in dedicated locations, this is just an easy to copy and see example
public class SampleData
{
public int ID { get; set; }
public string Name { get; set; }
}
public List<SampleData> MyData { get; set; }
protected override void OnInitialized()
{
MyData = new List<SampleData>();
for (int i = 0; i < 50; i++)
{
MyData.Add(new SampleData()
{
ID = i,
Name = "Name " + i.ToString()
});
}
}
}
Regards,
Marin Bratanov
Progress Telerik