Smaller fonts and spacing for Grid

[Barry]

I'm using the Bootstrap 4 theme and have a page which uses several Grids.

Is there a simple css wrapper class I can use for one of the Grids on the page (I don't want to alter css that will affect all grids) to make it smaller and more compact than the others?

For example, if it were pure bootstrap, I would simply add the following classes to the table element:

<table class="table table-sm">

[Alex Hajigeorgieva]

Hello, Barry,

You could set the font-size for a specific grid by targeting it by id:

 #server.k-widget{
     font-size:0.8rem;
}
#server.k-grid td {
    padding:0.5rem 0.5rem;
}

https://dojo.telerik.com/@bubblemaster/OdicURas

There are other alternatives to provide these styles from the grid configuration via HtmlAttributes() as part of the columns definition.

Let me know what you think.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Barry]

Thanks Alex, that's a good idea. I suppose I could make it a class instead and then just add that class wherever I need it via HtmlAttributes() or with js on the DataBound event

[Alex Hajigeorgieva]

Hello, Barry,

I believe that the column attributes are better if you have editing in the grid.

This is because the DataBound() even will not be triggered when the user cancels a row and the original template without the changes will be shown. So that would mean adding one more event handler - Cancel().

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Barry]

I have been trying to avoid the HtmlAttributes because I feel like it could add too much to the markup. I much prefer adding a css class to a parent element and using the stylesheet to drill down to individual elements if necessary.

The following approach (edited for brevity) is working quite well so far:

CSS:
.k-widget.k-grid-sm {
  font-size: 0.8rem;
}
.k-grid.k-grid-sm .k-button {
  font-size: 0.8rem;
}
.k-grid.k-grid-sm td {
  padding: 0.4rem;
}
.k-grid.k-grid-sm th {
  padding: 0.4rem;
}
.k-grid.k-grid-sm .k-command-cell > .k-button {
  margin-top: 0;
  margin-bottom: 0;
}

 

JS:

function myGrid_DataBound(e) { $(this.element[0]).addClass('k-grid-sm'); }

Grid:

<div id="exampleGrid"></div>
<script>
kendo.syncReady(function(){
    jQuery("#exampleGrid").kendoGrid({
        "dataBound":myGrid_DataBound
        ...
        });
});
</script>

 

(hope this is clear - I don't know how to format code in this forum, sorry!)

[Alex Hajigeorgieva]

Hello, Barry,

You could avoid getting the jQuery element of the grid in the dataBound function as it is already available:

function myGrid_DataBound(e) { 
  this.element.addClass('k-grid-sm');
}

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Barry]

Of course! Thanks, I should have spotted that.

 

So... how do I format code like yours in a forum post? ;-)

[Alex Hajigeorgieva]

Hello, Barry,

Sorry I missed the question about formatting.

1. When you click reply, click on Formatting options. Press enter a couple of times so you can navigate out of the snippet when you are done and wish to go back to text.
   
2. The formatting options have a paintbrush button, click that 
3. Paste the code snippets, format and click OK

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Barry]

So easy! Thank you