Header and Cell alignments not as demo-like

1 Answer 95 Views
Grid
DoomerDGR8
Top achievements
Rank 2
Iron
Iron
Iron
DoomerDGR8 asked on 27 Jul 2022, 08:48 AM | edited on 27 Jul 2022, 09:04 PM

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
Top achievements
Rank 2
Iron
Iron
Iron
commented on 27 Jul 2022, 09:07 PM

I see this CSS rule (the disabled on):

That, once disabled, fixed the UI kinda sorta.

1 Answer, 1 is accepted

Sort by
0
Aleksandar
Telerik team
answered on 01 Aug 2022, 05:08 AM

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

The Premier Dev Conference is back! 

Coming to you live from Progress360 in-person or on your own time, DevReach for all. Register Today.


Tags
Grid
Asked by
DoomerDGR8
Top achievements
Rank 2
Iron
Iron
Iron
Answers by
Aleksandar
Telerik team
Share this question
or