Q3'14 Release (2014.3.1119) Grid Filter Row Rendering

10 posts, 0 answers
  1. Ling
    Ling avatar
    18 posts
    Member since:
    Jun 2014

    Posted 12 Dec 2014 Link to this post

    Hi,
    After updating to the Q3'14 release, the grid's filter row looks messed up. It looked like a cached CSS issue, but that does not seem to be the case. I was using the beta release before this without any issues.

    See attached screenshot.

    Thanks,
  2. Ling
    Ling avatar
    18 posts
    Member since:
    Jun 2014

    Posted 15 Dec 2014 in reply to Ling Link to this post

    Hey guys,
    Any updates, should I roll back to the previous version?

    Thanks,
  3. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2196 posts

    Posted 16 Dec 2014 Link to this post

    Hi Ling,

    I tried to reproduce the problem locally but to no avail – everything is working as expected on our side. Most probably current behavior is related to one of the following points:
    • The Kendo UI scripts are not correctly updated to the latest version - please make sure all scripts and styles are correctly updated to the latest version.
    • There are custom workarounds for resizing the filter row widgets - these should be removed as the widgets are automatically resized.
    Could you please make the above checks and let us know of the result?

    Regards,
    Vladimir Iliev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  4. Ling
    Ling avatar
    18 posts
    Member since:
    Jun 2014

    Posted 19 Dec 2014 in reply to Vladimir Iliev Link to this post

    I'll try this and get back to you. I have a feeling its the theme CSS that is the issue.
  5. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2196 posts

    Posted 22 Dec 2014 Link to this post

    Hi Linq,


    I will leave the thread open and wait for your reply. 


    Regards,
    Vladimir Iliev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Ling
    Ling avatar
    18 posts
    Member since:
    Jun 2014

    Posted 13 Jan 2015 in reply to Vladimir Iliev Link to this post

    Valdimir,
    No luck so far.

    I've confirmed that I've the latest version of the scripts & I do not have any custom workaround for filter row widgets.
    Let me give you some background of my setup.

    I'm trying to use Kendo UI along with one of the Kendo UI themes (but not the default one) and twitter bootstrap. I do not want to use the bootstrap theme. Originally I was using a modified version of the blue opal theme but to determine what the issue is I removed the modified version. Currently I'm trying to use the Material theme.

    The following is the contents of my html head element

    01.<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    02.<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
    03.<link href="${pageContext.request.contextPath}/scripts/kendoui/styles/kendo.common-bootstrap.min.css" rel="stylesheet">
    04.<link href="${pageContext.request.contextPath}/scripts/kendoui/styles/kendo.common-material.min.css" rel="stylesheet">
    05.<link href="${pageContext.request.contextPath}/scripts/kendoui/styles/kendo.material.min.css" rel="stylesheet">
    06.<%--<link href="${pageContext.request.contextPath}/scripts/kendoui/styles/kendo.common-bootstrap.min.css" rel="stylesheet">--%>
    07.<link href="${pageContext.request.contextPath}/scripts/kendoui/styles/kendo.dataviz.min.css" rel="stylesheet">
    08.<%--<link href="${pageContext.request.contextPath}/scripts/kendoui/styles/kendo.dataviz.default.min.css" rel="stylesheet">--%>
    09.<link href="${pageContext.request.contextPath}/scripts/kendoui/styles/kendo.dataviz.material.min.css" rel="stylesheet">
    10.<link href="${pageContext.request.contextPath}/scripts/kendoui/styles/kendo.bootstrap.min.css" rel="stylesheet">
    11.<%--<link href="${pageContext.request.contextPath}/styles/kendoTheme.css" rel="stylesheet">--%>
    12.<link href="${pageContext.request.contextPath}/styles/dci.css" rel="stylesheet">
    13. 
    14.<script src="${pageContext.request.contextPath}/scripts/jquery/jquery.min.js" ></script>
    15.<script src="${pageContext.request.contextPath}/scripts/jquery/jquery-migrate.min.js" ></script>
    16.<script src="${pageContext.request.contextPath}/scripts/jquery/bigSlide.min.js"></script>
    17.<script src="${pageContext.request.contextPath}/scripts/kendoui/js/kendo.all.min.js"></script>
    18.<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

    dci.css does not contain anything related to kendo ui or bootstrap. Could you please take a look at see if there is something wrong with this setup? The material is also not getting applied correctly with this setup.

    Thanks.
  7. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2196 posts

    Posted 14 Jan 2015 Link to this post

    Hi Ling,

    From the provided information it seems that there is duplicated CSS styles included as well as styles that are exclusive. I would suggest to check the following help articles for more information about how to include the correct styles:

    Regards,
    Vladimir Iliev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8. Ling
    Ling avatar
    18 posts
    Member since:
    Jun 2014

    Posted 14 Jan 2015 in reply to Vladimir Iliev Link to this post

    Vladimir,
    I'm not sure I fully understand your comments. You may have got confused by some of the commented out lines. I'm pasting the code once again.

    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/scripts/kendoui/styles/kendo.common-bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/scripts/kendoui/styles/kendo.common-material.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/scripts/kendoui/styles/kendo.material.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/scripts/kendoui/styles/kendo.dataviz.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/scripts/kendoui/styles/kendo.dataviz.material.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/scripts/kendoui/styles/kendo.bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/styles/dci.css" rel="stylesheet">
     
    <script src="${pageContext.request.contextPath}/scripts/jquery/jquery.min.js" ></script>
    <script src="${pageContext.request.contextPath}/scripts/jquery/jquery-migrate.min.js" ></script>
    <script src="${pageContext.request.contextPath}/scripts/jquery/bigSlide.min.js"></script>
    <script src="${pageContext.request.contextPath}/scripts/kendoui/js/kendo.all.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

    I think kendo.common-material.min.css is new common-theme css files included in Kendo UI. I dont remember seeing it in the previous versions and I see no documentation regarding it. But without it, it does not look like the theme gets applied correctly.
  9. Ling
    Ling avatar
    18 posts
    Member since:
    Jun 2014

    Posted 14 Jan 2015 in reply to Ling Link to this post

    Vladimir,

    I also see that there is no CSS file similar to kendo.common-material.min.css for most of the other themes (other than bootstrap). What I would like to do is apply the dimensions of bootstrap but the theme colors of material or any other theme. Hence I've added kendo.common-bootstrap.min.csss as stated in your documentation.

    Please let me know what is the best way to do this. It would be helpful if there is a kendo ui DOJO example using a non-default theme along with bootstrap.

    Thanks
  10. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2196 posts

    Posted 16 Jan 2015 Link to this post

    Hello Ling,

    Please note that it's not supported to use two CSS themes at the same time - you should either remove the "material" or "bootstrap" common and theme CSS files. 

    Regards,
    Vladimir Iliev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top