This is a migrated thread and some comments may be shown as answers.

Adjusting layout for Grid

1 Answer 706 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 1
Veteran
Michael asked on 07 Apr 2020, 07:41 AM

What's the best way to adjust the margins, padding and alignment for the contents of a row using the Telerik Grid? 

I'm using the Bootstrap theme if it matters.

1 Answer, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 07 Apr 2020, 11:11 AM

Hi Michael,

You can inspect the rendered HTML and its CSS rules that come from the themes in order to devise heavier selectors that will achieve the desired look. The following blog post can help you do that: https://www.telerik.com/blogs/improve-your-debugging-skills-with-chrome-devtools

I also made the following example for you that you can use as base, and it results in the screenshot attached to this message.

<style>
    .special-grid-paddings th.k-header {
        padding: 40px;
    }

    .special-grid-paddings .k-master-row td {
        padding: 20px;
    }
</style>

<TelerikGrid Class="special-grid-paddings"
             Data="@MyData" Height="300px" Pageable="true" Sortable="true" FilterMode="@GridFilterMode.FilterMenu">
    <GridColumns>
        <GridColumn Field="@(nameof(SampleData.ID))">
        </GridColumn>
        <GridColumn Field="@(nameof(SampleData.Name))">
        </GridColumn>
        <GridColumn Field="HireDate" Width="350px">
        </GridColumn>
    </GridColumns>
</TelerikGrid>

@code {
    public class SampleData
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public DateTime HireDate { get; set; }
    }

    public IEnumerable<SampleData> MyData = Enumerable.Range(1, 50).Select(x => new SampleData
    {
        ID = x,
        Name = "name " + x,
        HireDate = DateTime.Now.AddDays(-x)
    });
}

 

Regards,
Marin Bratanov
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Grid
Asked by
Michael
Top achievements
Rank 1
Veteran
Answers by
Marin Bratanov
Telerik team
Share this question
or