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
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'm in the early stages of learning Kendo UI. I've got the grid work and loading data but none of the images/icons that should appear in the grid are appearing. When I load the page containing the grid, I get the following 404 errors. The error message doesn't tell me where it's expecting to find these files.
Where is Kendo UI looking for these files? Or, can I tell Kendo where to look for them?
I currently have the files located here in my MVC folder structure, but it's not finding them:
The fonts and icons should be located under the content\kendo\{your kendo version}\ (assuming you are creating an MVC.net site based on the tag (see image below)
if this is missing then try running the upgrade wizard in visual studio (assuming you are using visual studio here) or just include the files you require from your distribution.
can you also check you have included the required css links within your site (please note I am using the bootstrap theme here so alter to work with your theme as required):
<link href="#Url.Content("~/Content/kendo/2017.1.118/kendo.common-bootstrap.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/kendo/2017.1.118/kendo.mobile.all.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/kendo/2017.1.118/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/kendo/2017.1.118/kendo.bootstrap.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/kendo/2017.1.118/kendo.dataviz.bootstrap.min.css")" rel="stylesheet" type="text/css" />
if this is set up correctly just make sure the fonts etc are set to "content" for the 'Build Action'
Check to make sure that the version in your direction matches the version of the kendo.mvc.dll in your bin folder. It has to match your assembly version.
I found this out when I upgraded. Somehow my project was not pointing to the correct assembly.
I want to know how to use Semantic-UI to codeigniter 3.x as frontend framework.
I want to use LESS and not css. thanks
First, it is important to understand that LESS is a CSS pre-compiler that extends the CSS language with features that allows creation of CSS that is more maintainable, themeable and extendable. But ultimately it creates CSS files that are used exactly the same as any other CSS file in a website.
In CodeIgniter you use Semantic-UI created assets the same way as any other CSS (or javascript) files by using a <link> tag.
<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css">
<script src="semantic/dist/semantic.min.js"></script>
The CSS classes are used in "view" files exactly the same way any other CSS defined class. For instance, the following would put a button styled by Semantic-UI into a CodeIgniter "view" file.
<button class="ui button">Follow</button>
So, the short answer to your question is that you use Semantic-UI in CodeIgniter the same way any other frontend framework that produces CSS and Javascript.
How to use the tools required to customize Semantic-UI is way beyond the scope of what is a "good" question on Stackoverflow.
If you want to customize and build your own version of the UI, you have a steep learning curve ahead. You can start your learning on Semantic-UI's Getting Started page and on the Learn Semantic website.
I have done Semantic UI integration on my CodeIgniter based application starter: https://github.com/ivantcholakov/starter-public-edition-4
For compilation of your own visual themes you need to install locally on your development machine node.js, less.js, postcss/cssnano, they should be able to start from command line.
See the configuration file platform/common/config/less_compile.php there you can define by example your own visual theme. Also, have a look at the already created themes, you will see how to add your common Semantic UI customizations and your theme-specific styles.
add css link in your header and js in your footer
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.min.css">
<script type="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.min.js"></script>
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).
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.