I downloaded kendoui core from Telerik's website. Folder has a js directory with separate files for each widget. I want to integrate kendoui with systemJS in my Aurelia app(built on top of skeleton-navigation). I was able to do this with JQueryUI as follows:
--Created a "jquery-ui#1.11.4" folder containing the jqueryUI JavaScript lib in github folder in jspm_packages folder
--Created a file called "jquery-ui#1.11.4.js" that exports the lib above like so:
module.exports = require("github:github/jquery-ui#1.11.4/jquery-ui.js")
--Defined jqueryui in my config file: "jquery-ui": "github:github/jquery-ui#1.11.4"
Now, if I want to use any widget, like the datepicker, i do this:
import { datepicker } from 'jquery-ui';
How do I do this for kendoUI? I read somewhere that the "kendo.core.js" file contains all widgets but it seems too lightweight and using it alone didnt work. It also has a complementary .map file. What is it for?
UPDATE: As suggested in the answer below, I decided to include kendoUI and jQuery with the script tag in my index page. Also instead of importing the whole kendoUI library (kendo.ui.core.min.js->670KB) I just included the files needed for kendoUI's date picker that I needed (kendo.core, kendo.popup, kendo.calendar and kendo.datepicker->99.1KB). Incase anyone wants to use this approach, Remember that jQuery will have to be imported in index.html too and before any kendo files. Also, kendo.core should be imported before the others and datepicker after everything else(I.e. last)
The solution you are using for adding jQuery UI is not one that will scale. You should never write anything to the jspm_packages folder, as that folder is jspm's to use as it wishes. Also, you can simply install jQueryUI using JSPM (jspm install jquery-ui).
Your first option is to install KendoUI Core using jspm with jspm install kendo-ui.
If you'd prefer to go it alone, you should probably just load the kendo files using a <script> element. There's nothing wrong with doing this. These files are made to be used as global variables loaded using script tags, so don't fight it.
Again, there's nothing wrong with using script elements to load legacy (read non-modular) js files.
Related
I am new in magento and cms in general so my question is what are the steps to accomplish this task ? i have found solutions for newer version. Extension that i downloaded require jQuery > 1.8 and i found out that my actual version is 1.7.2.
Any help is appreciated.
First on your page press CTRL + U (if chrome), than CTRL + F. type jquery, find line where ..scrip... src="...jquery.1.7.2...> (you need jquery file, not jQuery plugin or smth.) this step for find name of jquery file, becouse it can be jQuery.min.1.7.2.js jQuery.1.7.2.js and etc...)
Copy file name
Open any IDE or smth. For load magento project files if you haven't it. Use function like Find in folder, and look for copied name. It should be in theme layouts folder or base layouts folder.
Download right jQuery version and put it where is old one.
Comment that line where xml loads old jQuery, and load new one in local.xml.
(or just replace in that xml, but it is bad practice, better make changes in local.xml)
I'm using Redux Framework and SASS. I've checked the http://leafo.net/scssphp/docs/ documentation, but I can't seem to find any mention of output css file directory mentions. And also how do I pass the Redux variables(taken from options field) to scss(_variables.scss) file and update the output css when I update of Redux Framework options from admin options menu. Thanks in advance.
I need some suggestions to transfer javascript code in html files to typescript files in Visual Studio 2015.
Right now, I have 4 HTML views, where I want to take out the javascript code and convert it to the typescript files. The views are:
Travel.cshtml,
Hotel.cshtml,
Tpa.cshtml,
Passengers.cshtml
Every view contains html code + razor and a javascript section.
I'm trying to create 4 typescript files and link them to the view. As the image shows, I have created the files in a folder called "pages". For now they are all just empty :)
How can I link those pages to the representative views, so that the
Travel.ts file is linked to the Travel.cshtml file?
Some may ask, why am I doing this? .. I'm doing this to get clean html files with no javascript in, so its easier to read. Also I need to learn the typescript syntax which is a little difficult for me.
Hope someone can help.
Valid javascript code is valid typescript code. So to get started, you can use your existing javascript code inside your typescript files.
Every time you save your typescript file in visual studio, typescript compiler will be compiling this file and generate the corresponding javascript file with the same name as of your typescript file name, provided you do not have any errors in your typescript file.The generated file will be in the same location of where you have your typescript files are. If you want to see those, you can enable the Show All files option in solution explorer.
You will not include the typescript files in your pages, instead we will use the generated js files. So in your case, in your Hotels view(Hotels.cshtml), you can include it like
#section Scripts
{
<script src="~/Content/Scripts/Pages/Hotels.js"></script>
}
Or if you want to bundle it, Add a new bundle in your RegisterBundles() method.
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/hotels").Include(
"~/Content/Scripts/Pages/Hotels.js"));
// Other bundles goes here
}
And in your view, use the bundle path
#section Scripts
{
#Scripts.Render("~/bundles/hotels")
}
I have downloaded Kendo UI core open and free source and tried to use splitter as in this demo, but it did not work because in the js folder (from download) the kendo.all.min.js file is not present. Can anybody tell me what should I do? I tried using kendo.core.min.js but it did not work.
I don't want to use the CDN URL http://cdn.kendostatic.com/2014.1.416/js/kendo.all.min.js in my project.
Thanks in advance!
The kendo.all.min.js is available only in the commercial Kendo UI Professional package. Kendo UI core ships with kendo.ui.core.min.js which is the file you should use.
I'm using Telerik grids, and want to customize the CSS. I've used Telerik's stylebuilder but I don't know what to do with it once I download the zip. Telerik says that I should
Simply add the files from this archive to your project, and your custom skin is ready go.
But I have no idea where in the project to add them, or even how exactly this is done. I moved the CSS files into the stylesheets folder (I'm using MS Visual Studio 2010) and linked to them, but no dice.
I've also read through this this and this but am still thoroughly confused.
Try the following:
Export theme from style builder, example classic.zip.
Contents of classic.zip
Folder: classic
File: telerik.classic.css
Extract zip to your project's content folder, c:\path to your project\Content\
Modify your master page style sheet regsitrar to include telerik.classic.css instead of the supplied style sheets.
:
<%= Html.Telerik().StyleSheetRegistrar()
.DefaultGroup(group => group.Add("telerik.common.css")
.Add("telerik.classic.css"))
%>