Smaller fonts and spacing for Grid

9 posts, 0 answers
  1. Barry
    Barry avatar
    10 posts
    Member since:
    Nov 2019

    Posted 16 Apr 2020 Link to this post

    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">

  2. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1082 posts

    Posted 21 Apr 2020 Link to this post

    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

    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.
  3. Barry
    Barry avatar
    10 posts
    Member since:
    Nov 2019

    Posted 21 Apr 2020 in reply to Alex Hajigeorgieva Link to this post

    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

  4. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1082 posts

    Posted 24 Apr 2020 Link to this post

    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

    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.
  5. Barry
    Barry avatar
    10 posts
    Member since:
    Nov 2019

    Posted 24 Apr 2020 in reply to Alex Hajigeorgieva Link to this post

    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!)

  6. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1082 posts

    Posted 28 Apr 2020 Link to this post

    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

    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.
  7. Barry
    Barry avatar
    10 posts
    Member since:
    Nov 2019

    Posted 28 Apr 2020 in reply to Alex Hajigeorgieva Link to this post

    Of course! Thanks, I should have spotted that.

     

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

  8. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1082 posts

    Posted 01 May 2020 Link to this post

    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

    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.
  9. Barry
    Barry avatar
    10 posts
    Member since:
    Nov 2019

    Posted 01 May 2020 in reply to Alex Hajigeorgieva Link to this post

    So easy! Thank you
Back to Top