Material common theme grid width

5 posts, 0 answers
  1. Erik
    Erik avatar
    42 posts
    Member since:
    Aug 2012

    Posted 28 Sep 2017 Link to this post

    I am using the material theme on ASP.NET MVC.

    Previously I had the following defined on .aspx pages containing Telerik controls:

    <link href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
    <link href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.material.min.css" rel="stylesheet" type="text/css" />

     

    Upon closer reading of documentation, it states: "Use the common CSS file, which corresponds to the Kendo UI theme that is used as a base for your custom theme. For example, if you have created a custom theme from the built-in Material theme, then register kendo.common-material.min.css."

    And so I changed the css define from kendo.common.min.css to kendo.common-material.min.css.

    Now the grid behaves differently in that it is fixed to the screen width. I do not have scrolling enabled and previously it would grow to fit all columns.  Now with common-material defined it does not grow but stays fixed to the browser width and thus shrinks columns so that their text is no longer shown when the browser width is small.  Again the only thing changed on the page is the css define and nothing to do with the kendo.grid code.

     

    Is this a known difference between material common and standard common in terms of grid width?  Are there known downsides to running a theme with the standard common?  I am tempted to just switch back since everything seemed to be displaying fine. But it just goes against the documentation statement to use the common matching the theme.

     

     

  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 02 Oct 2017 Link to this post

    Hi Erik,

    The new behavior that you are describing is the default behavior of the Grid when scrollable is disabled and this could be seen in the following example:
    <!DOCTYPE html>
    <html>
    <head>
        <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
        <title></title>
     
         
     
    </head>
    <body>
     
    <div id="example">
        <div id="grid"></div>
        <script>
            $(document).ready(function () {
                $("#grid").kendoGrid({
                    dataSource: {
                        type: "odata",
                        transport: {
                            read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
                        },
                        pageSize: 20
                    },
                  scrollable: false,
                    height: 550,
                    groupable: true,
                    sortable: true,
                    pageable: {
                        refresh: true,
                        pageSizes: true,
                        buttonCount: 5
                    },
                    columns: [{
                        template: "<div class='customer-photo'" +
                                        "style='background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);'></div>" +
                                    "<div class='customer-name'>#: ContactName #</div>",
                        field: "ContactName",
                        title: "Contact Name"
                    }, {
                        field: "ContactTitle",
                        title: "Contact Title"
                    }, {
                        field: "CompanyName",
                        title: "Company Name"
                    }, {
                        field: "Country"
                    }]
                });
            });
        </script>
    </div>
     
     
    </body>
    </html>

    Could you please test this on your side and see if you will be able to observe the same issue?

    Looking forward to your reply. 


    Regards,
    Konstantin Dikov
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Erik
    Erik avatar
    42 posts
    Member since:
    Aug 2012

    Posted 02 Oct 2017 in reply to Konstantin Dikov Link to this post

    Are there known downsides to running a theme with the standard common?

     

    I have created a sample with all my site's view settings here: http://dojo.telerik.com/oDoJi

    I have repeating columns just to emulate the large number of columns I have in my particular grid.  You'll notice the column header text is split in two lines but it does extend past the page width fine.

    Now, if you change kendo.common.min.css to kendo.common-material.min.css you will see how the column header text gets shrunken and no longer fits properly

  4. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 04 Oct 2017 Link to this post

    Hi Erik,

    The common-themeName files are the common base for that particular theme and using the standard common is not recommended, because each theme has its own metrics. This is the reason why you are seeing a difference in the column headers when you use the kendo.common-material file (the padding for example is using different metrics with the material theme).

    Note that the scenario that you have is not correct in the first place (it breaks in both of the discussed scenarios), because the sum of the width of all columns exceed the width of the Grid and you will have to either enable the scrolling or set explicit width to all columns and matching width of the Grid.


    Regards,
    Konstantin Dikov
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Erik
    Erik avatar
    42 posts
    Member since:
    Aug 2012

    Posted 04 Oct 2017 in reply to Konstantin Dikov Link to this post

    Exceeding the width of the page is how the original HTML table that the grid is replacing functioned.  Defining the kendo.common.min.css with my theme allows that to happen.  So I guess that is my only option to keep that functionality (even if it may be against the documentation).
Back to Top