Q3'14 Release (2014.3.1119) Grid Filter Row Rendering

[Ling]

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,

[Ling]

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

Thanks,

[Vladimir Iliev]

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

 

 

[Ling]

I'll try this and get back to you. I have a feeling its the theme CSS that is the issue.

[Vladimir Iliev]

Hi Linq,


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


Regards,
Vladimir Iliev
Telerik

 

 

[Ling]

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.

[Vladimir Iliev]

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:

• Using Kendo with Twitter Bootstrap
• Add Kendo UI CSS and JavaScript References 

Regards,
Vladimir Iliev
Telerik

 

 

[Ling]

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.

[Ling]

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

[Vladimir Iliev]

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