Is it possible to have Kendo UI widgets + DataViz widgets on the same page?
I wanted to have Grid(Popup Editing, Inline Editing etc.), Slider, AutoComplete, Rich Text Field and a Scatter Chart on the same page.
I have downloaded the latest trial package - kendoui.trial.2012.3.1114
I have added the files as below..
<link href="../../content/shared/styles/examples-offline.css" rel="stylesheet">
<link href="../../../styles/kendo.common.min.css" rel="stylesheet">
<link href="../../../styles/kendo.default.min.css" rel="stylesheet">
<script src="../../../js/jquery.min.js"></script>
<script src="../../../js/kendo.web.min.js"></script>
<script src="../../content/shared/js/console.js"></script>
<script src="../../../js/kendo.dataviz.min.js"></script>
But on adding "kendo.dataviz.min.js", other widgets seems to misbehave.
How to overcome this and have both UI widgets and DataViz widgets on the same page..???
I have used both UI widgets and dataviz widgets on the same page and faced no issue.
On a side note,Instead of including "kendo.web.min.js" & "kendo.dataviz.min.js" files, you can include "kendo.all.min.js" file alone that includes code for both UI widgets and dataviz widgets.
You can use "jsfiddle.net" to show your example that will help others in suggesting the root cause.
Related
Can you please let me know, the order in which styles sheet must be referenced for material theme with kendo ui core.
I have referenced styles in the below order, but the ui doesn’t render like in the kendo demo.
Kendo.common-material.min.css
Kendo.material.min.css
created a plnkr for debugging:
https://plnkr.co/edit/N9mpRyEyOBjsh22k?open=lib%2Fscript.js%2Fedit%2FN9mpRyEyOBjsh22k%3Fopen%3Dlib%2Fscript.js&preview
The configuration is correct, however, you are loading the LESS-based Material theme. I suspect you are referring to this TextBox demo that uses the SASS-based theme. Load the SASS-based theme to get the look of the demo:
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1207/styles/kendo.material-main.min.css" />
Updated plnkr
I have having difficulties getting Kendo UI Map (JavaScript) to work in my application.
I am seeing the containing div load (it has defined width and height). However I only see the map controls appear on in the div and I do not see the map display at all.
I suspect it has something to do with the stylesheets no loading correctly.
I am not getting any javascript errors.
I verified that my kendo.common.min.css and kendo.default.min.css gets loaded before jquery does.
One caveat is that we are bundling our files. However I am not bundling the kendo css files. I added a link references on my given page.
<link rel="stylesheet" href="../../../../Content/Css/Shared/kendocss/kendo.common.min.css" />
<link rel="stylesheet" href="../../../../Content/Css/Shared/kendocss/kendo.default.min.css" />
The other css files that the application use are bundled as well as jquery and all of the javascript files (kendo js files included).
How do I create a custom stylesheet for the CKEditor (toolbar, etc.) and load it through the config?
I tried this but this seems to only change the CSS for the content within the editor, but not the editor itself:
config.contentsCss = '/skins/custom/editor.css';
You don't have to use CKEditor's config to customise the toolbar, dialogs, etc. The UI of the editor resides at the same level in DOM as main ckeditor.js file. Basically put your stylesheet into <head> section of your webpage:
<head>
...
<script src="ckeditor.js"></script>
<link href="/skins/custom/editor.css" rel="stylesheet">
...
</head>
Be aware of the specificity of CSS selectors.
I downloaded Kendo UI Core from Telerik website, and I want to make use of the Boostrap theme for my widgets, but however theres three bootstrap stylesheets to choose from: kendo.bootstrap.min.css, kendo.common-bootstrap.core.min.css and kendo.common-bootstrap.min.css. I'll be using datepicker, input masks and dropdowns. Which one should I use? Thanks.
I'm pretty sure that kendo.common-bootstrap.core.min only includes styling for the free widgets (Kendo UI Core) and kendo.common-bootstrap.min includes styling for all the free widgets and the paid widgets (Kendo UI Pro).
If you aren't using any of the "Pro" widgets, then you could use the .core. file.
You also need to add the kendo bootstrap theme.
Overall, you should have something like:
<link href="bootstrap.min.css" rel="stylesheet" />
<link href="kendo.common-bootstrap.min.css" rel="stylesheet" />
<link href="kendo.bootstrap.min.css" rel="stylesheet" />
Those 3 files are:
Actual bootstrap styling.
Kendo Bootstrap sizing and layout
Kendo Bootstrap theme
I noticed that the theme code is missing from the KitchenSink in the final version of ST2. Are there any default themes that ship with the product? Also, are there any open source themes available? I'd like to have a few themes handy for demos so I can easily switch between them.
Yes there are, if you open up senchatouch2/resources/css you've got the default sencha-touch.css and then you have apple.css, android.css, bb6.css(blackberry).
<link rel="stylesheet" href="senchatouch2/resources/css/apple.css" type="text/css" />
I think following url will help someone
http://developerextensions.com/index.php/sencha-touch-2-themes-builder
---Add the following link to your sencha-touch-2 app's html file.
---DEShowThemeBuilder(true); //function to show the theme builder
---DEShowThemeBuilder(false); //function to hide the theme builder
<script type="text/javascript" src="http://developerextensions.com/components/com_extensiondemo/views/extensiondemo/tmpl/sencha2/ux/themeBuilder/themeBuilder.js"></script>