How to correctly install Handsontable with RuleJS - installation

I need to install Handsontable with RuleJS support (for formulas) locally (i.e. not just access its files from github), under Windows. I will later need to distribute with my application. I really do not want to have to install & configure bower, git etc.
Initially, starting from https://github.com/handsontable, I tried downloading the zip from https://github.com/handsontable/handsontable. Then I had to fetch various extra bits from elsewhere on github, attempting to make the demo at http://handsontable.github.io/handsontable-ruleJS/ work. This includes its stuff via:
<!-- handsontable v1 -->
<script data-jsfiddle="common" src="lib/handsontable/handsontable.full.js"></script>
<link data-jsfiddle="common" rel="stylesheet" media="screen" href="lib/handsontable/handsontable.full.css">
<!-- ruleJS -->
<link rel="stylesheet" media="screen" href="lib/handsontable/handsontable.formula.css">
<script data-jsfiddle="common" src="lib/RuleJS/lib/lodash/lodash.js"></script>
<script data-jsfiddle="common" src="lib/RuleJS/lib/underscore.string/underscore.string.js"></script>
<script data-jsfiddle="common" src="lib/RuleJS/lib/moment/moment.js"></script>
<script data-jsfiddle="common" src="lib/RuleJS/lib/numeral/numeral.js"></script>
<script data-jsfiddle="common" src="lib/RuleJS/lib/numericjs/numeric.js"></script>
<script data-jsfiddle="common" src="lib/RuleJS/lib/js-md5/md5.js"></script>
<script data-jsfiddle="common" src="lib/RuleJS/lib/jstat/jstat.js"></script>
<script data-jsfiddle="common" src="lib/RuleJS/lib/formulajs/formula.js"></script>
<script data-jsfiddle="common" src="lib/RuleJS/js/parser.js"></script>
<script data-jsfiddle="common" src="lib/RuleJS/js/ruleJS.js"></script>
<script data-jsfiddle="common" src="lib/handsontable/handsontable.formula.js"></script>
This is all messy, and (I think) I could not even find the numericjs/numeric.js in any download package.
I then noticed https://github.com/handsontable/handsontable-ruleJS. This seemed much simpler: it has the handsontable stuff it wants in its own bower_components sub-directory, and its index.html example, with files included via:
<!-- handsontable -->
<script data-jsfiddle="common" src="bower_components/handsontable/dist/handsontable.full.js"></script>
<link data-jsfiddle="common" rel="stylesheet" media="screen" href="bower_components/handsontable/dist/handsontable.full.css">
<!-- ruleJS -->
<script data-jsfiddle="common" src="bower_components/ruleJS/dist/full/ruleJS.all.full.js"></script>
<script data-jsfiddle="common" src="src/handsontable.formula.js"></script>
<link rel="stylesheet" media="screen" href="src/handsontable.formula.css">
Additionally, its README.md states Important: Few things have been modified in external libraries, so please use all library files only from this repo., which makes it sound like this is the safest way to go (and full, latest handsontable release might not even behave correctly).
However, I have just realised that handsontable-RuleJS has its included Handsontable stuff at version 0.14.1, while the latest release of that is 0.23, and there are functions I need from later versions.
So, is there a simple way to download what I need? Should I be using the simple handsontable-RuleJS link, with its included bower_components, or are they only there for the index.html demo, or overwrite them with newer versions, or what...? Or, do I really need to get bower & git, make them work right under Windows, and then magically everything will be sorted out in a way too difficult to just download directly?

All I did was use https://github.com/handsontable/ruleJS as it was really simple. I took the files I needed for my project and left the rest of it alone. I would just use this and see what functionalities you need from later versions. Then you can go back and include those.
I don't think there is any magical download that will just give you everything you need. You will probably need to play around a little but I don't believe you will need bower and git.

Related

Displaying icon in select form

I have already read several issues about displaying icons in former versions of blueprintjs. Mine concerns blueprint 2.0.0-rc.2 and feel it's an importing problem.
I am using webpack and importing blueprint v2 the following way:
In index.html:
<link href="node_modules/normalize.css/normalize.css" rel="stylesheet" />
<link href="node_modules/#blueprintjs/core/lib/css/blueprint.css" rel="stylesheet" />
In my app.tsx:
require('../../../node_modules/#blueprintjs/core/src/blueprint.scss');
require('../../../node_modules/#blueprintjs/icons/resources/icons/icons-16.ttf');
The overall css loads correctly but fonts remain unreachable; can someone please tell me what I am doing wrong? Cheers!
You are missing the new blueprint-icons.css file, which imports the font files through CSS #font-face declarations. Add the following line before importing blueprint.css:
<link href="node_modules/#blueprintjs/icons/lib/css/blueprint-icons.css" rel="stylesheet" />
We have updated the docs with latest usage instructions and will be shipping full 2.0 later this week (and updating the site accordingly).

Kendo UI Grid - Where to look for fonts and icons

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.

visual studio 2013 issue with less and the file it creates

I'm using visual studio 2013 and have web essentials for update 4 (2.5.4) installed.
I'm running the web application from visual studio (I happen to be using Chrome) and bootstrap v 3.3.4.
I've removed any reference to bootstraps css file. I have my own less file that imports the bootstrap.less file
#import "../js/BootStrap.3.3.4/less/bootstrap.less";
when I hit F5, it says that my less file compiled to Test1.css.
In my master page I have a reference to the Test1.css file. So it looks something like this
<script type="text/javascript" src="/js/js1.11.1/jquery-1.11.1.min.js"></script>
<link type="text/css" href="/js/js1.11.1/jquery-ui.css" rel="stylesheet" />
<script src="/js/BootStrap.3.3.4/js/bootstrap.min.js"></script>
<link href="CSS/Test1.css" rel="stylesheet" />
However, when the page renders it looks like this
<script type="text/javascript" src="/js/js1.11.1/jquery-1.11.1.min.js"></script>
<link type="text/css" href="/js/js1.11.1/jquery-ui.css" rel="stylesheet" />
<script src="/js/BootStrap.3.3.4/js/bootstrap.min.js"></script>
<link href="/js/BootStrap.3.3.4/css/bootstrap.min.css" rel="stylesheet" />
and it works. Where does the boostrap.min.css come from and why is it working and not using what I have in my masterpage. Further more, the bootstrap.min.css, I've looked using a dir *.css /s command and can not find that file anywhere.
Your ideas would be greatly appreciated.

How to get Zurb Foundation 3 working on Internet Explorer 8

Zurb Foundation 3 says is compatible with IE8. This is the reason I'm using F3.
I have problems getting to work F3 on IE8.
I tried the official http://foundation.zurb.com/docs/v/3.2.5/grid.php which seems to have the same problems on IE8 which I found on my own site.
More specifically:
Navigation is messed up (The sticky menu is comming like an unstyled
vertical ul/li)
Orbit Javascript slider component doesn't work
Initially accordition looks fine visually. However when clicked it
doen't work as expected
Reveal modals don't work
The same problems are happening on both my site and the official F3 docs page - http://foundation.zurb.com/docs/v/3.2.5/grid.php
What could be the problem?
I suspect it might be something related with including things like html5shiv, etc. However I try to stick as much as possible with how the official F3 is showing. In the demo index.html of Foundation 3 following things are included:
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<!-- Included CSS Files (Compressed) -->
<link rel="stylesheet" href="stylesheets/foundation.min.css">
<link rel="stylesheet" href="stylesheets/app.css">
<script src="javascripts/modernizr.foundation.js"></script>
<!-- Included JS Files (Compressed) -->
<script src="javascripts/jquery.js"></script>
<script src="javascripts/foundation.min.js"></script>
<!-- Initialize JS Plugins -->
<script src="javascripts/app.js"></script>
<script>
$(window).load(function(){
$("#featured").orbit();
});
</script>
Do I need to include something else? html5shiv would be enough or I need other things also?
Adding html5shiv.html solved most of the issues.
The only one remaining is that images (transparent PNGs) remain and accumulate on screen (one on top of the other) while the Orbit slider is running.

Webshims Lib - media queries for IE8

I'm trying to get media queries to work in IE8 using Webshims Lib. I've followed the setup instructions and loaded the default (all) polyfills, but it doesn't seem to work.
Am I still supposed to still explicitly include html5shiv? I thought Webshims Lib would take care of it?
Cheers.
You need to download respond.js, after adding these statements:
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<link href="css/bootstrap-ie8.css" rel="stylesheet">
<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<script src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

Resources