Header and Cell alignments not as demo-like

[DoomerDGR8]

Hi!

I'm on the Material Main theme. The Kendo controls are already cozy-sized, and the material theme adds too much whitespace everywhere.

I'm struggling with the columns and header text alignment. As per the image, I cannot get either these headers or the cells to align correctly, and there is too much padding margin on the left.

@(Html.Kendo().Grid(Model)
		.Name("gridLetters")
		.Columns(columns =>
		{
			columns.Bound(p => p.Id).Filterable(false).Sortable(false).Width(60)
			       .HeaderHtmlAttributes(new { @style = "k-text-center !k-justify-content-center" })
			       .HtmlAttributes(new { @style = "text-align: right" })
			       .ClientTemplate("<a href='" + Url.Action("View", "Letter", new { letterId = "#:Id#" }) + "'>#=Id#</i></a>");
			columns.Bound(p => p.Subject);
			columns.Bound(p => p.CompanyName).Title("Company");
			columns.Bound(p => p.BrandName).Title("Brand");
			columns.Bound(p => p.Location.Name).Title("Location");
			columns.Bound(p => p.LetterTypeId).Title("RL Type").Width(150)
			       .HtmlAttributes(new { style = "text-align:center" })
			       .HeaderHtmlAttributes(new { style = "text-align: center; justify-content: center" })
				   .ClientTemplate("<span class='#=LetterType.BadgeInfo#' title='#=LetterType.Name#'>#=LetterType.Nickname#</span>");
			columns.Bound(p => p.StatusId).Title("Status").Width(150)
			       .HtmlAttributes(new { style = "text-align:center" })
							.HeaderHtmlAttributes(new { style = "text-align: center; justify-content: center" })
				   .ClientTemplate("<span class='#=Status.BadgeInfo#' title='#=Status.Name#'>#=Status.Nickname#</span>");
			columns.Bound(p => p.Id).Title("Act").Width(90).Filterable(false)
			       .HtmlAttributes(new { style = "text-align:center" })
			       .HeaderHtmlAttributes(new { style = "text-align: center; justify-content: center" })
		           .ClientTemplate(
				        "#if(StatusId == 1){#" +
				        "	<a href='" + Url.Action("Create", "Letter", new { letterId = "#=Id#" }) + " ' title='Edit the RL'><i class='fa-duotone fa-pen-to-square'></i></a>" +
						"	&nbsp;&nbsp;<i class='fa-duotone fa-pipe'></i>&nbsp;&nbsp;" +
				        "	<a href='" + Url.Action("ActionQuick", "Letter", new { letterId = "#=Id#" }) + " ' title='Start the RL Approval flow'><i class='fa-duotone fa-play'></i></a>" +
				        "#} else {#" + "" + "# } #"
					);
		})
		.ToolBar(toolbar =>
		{
			toolbar.Excel();
			toolbar.Search();
		})
		.Excel(excel => excel
				.FileName($"DA CRL - My List Export - {DateTime.Now:yyyy-MM-dd}.xlsx")
				.Filterable(true)
				.ProxyURL(Url.Action("GridExcelExportSave", "Helper"))
		)
		.Sortable()
		.Navigatable()
		.Resizable(r => r.Columns(true))
		.Pageable(pageable => pageable
				.Refresh(true)
				.PageSizes(true)
				.ButtonCount(5))
		.Filterable()
		.Scrollable(s => s.Height("auto"))
		.ClientDetailTemplateId("detailTemplate")
		.Events(e => e.DataBound("onDataBound"))
		.DataSource(dataSource => dataSource
						.Ajax()
						.Sort(x => x.Add("Id").Descending())
						.PageSize(20)
						.ServerOperation(false)
		)
)

	<script>
		var gridLetters = $("#gridLetters");

        $(window).resize(function () {
            resizeGrid();
        });

        function onDataBound(e) {
            resizeGrid();
        }

        function resizeGrid() {
	        try {
		        if (gridLetters.options.scrollable !== true) {
			        gridLetters.setOptions({ scrollable: true });
		        }
	        } catch (e) {

	        }
	        $(".k-grid-content").css("height", $(window).height() - 310);
        }
    </script>

	<script>
		var gridLetters = $("#gridLetters");

        $(window).resize(function () {
            resizeGrid();
        });

        function onDataBound(e) {
            resizeGrid();
        }

        function resizeGrid() {
	        try {
		        if (gridLetters.options.scrollable !== true) {
			        gridLetters.setOptions({ scrollable: true });
		        }
	        } catch (e) {

	        }
	        $(".k-grid-content").css("height", $(window).height() - 310);
        }
    </script>

 

[DoomerDGR8]

I see this CSS rule (the disabled on):

That, once disabled, fixed the UI kinda sorta.

[Aleksandar]

Hello,

Styles and classes can be added to the Header cells the following way:

.Columns(columns =>
        {
            columns.Bound(o => o.OrderDate).Width(120).Format("{0:MM/dd/yyyy}")
                .HeaderHtmlAttributes(new { style = "text-align: center; justify-content: center", @class="myClass"})
                .HtmlAttributes(new { style = "text-align: right" });
...
        }

Adding the following CSS, for example, would enforce a 4px padding on the header cells:

    .myClass{
        padding:4px !important;
    }

Here is a sample REPL, where the Material Main theme is used and the padding for the header cells is set. The example also shows the styles you can use to align the content of the header cells and the Grid cells as well.

I hope this helps.

Regards,
Aleksandar
Progress Telerik