Completed
Last Updated: 18 Nov 2022 10:25 by ADMIN
Datafyer
Created on: 23 Oct 2019 18:49
Category: UI for Blazor
Type: Feature Request
2
Specify which grid lines to display

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

3 comments
ADMIN
Dimo
Posted on: 18 Nov 2022 10:25

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.

Florent
Posted on: 13 Nov 2022 23:09

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?

ADMIN
Marin Bratanov
Posted on: 24 Oct 2019 06:41

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

 UI for Blazor