I have a Backbone application with multiple KendoUi components e.g. Grid, NumericTextBox. To display this value "12,5 h" in a numericTextBox I use this format:
this.$('.kendoHourInput').kendoNumericTextBox({
format: '#.0 h'
});
For the development Version (not optimized), everything works as expected. For the production Version, after the require.js-optimizer, this format breaks the app:
Uncaught Bad number format specifier: #
The predefined formats like "c2" or "p" works without a problem. Could it be a problem with the kendo.culture('de-DE') I use? I had similar problems with the library globalize.js, which overrides the kendo.culture. Is there a known dependency to another library who could break the optimized-code?
UPDATE
I found the library which caused the error: globalize.js There is a 2nd library with dependencies to globalize.js:
require.js-config
shim: {
...
someLib: {
deps: ['globalize']
}
}
There is a forum entry on the kendo site, with a similar problem. The solution should be to load the kendo library before the globalize library. If I take a look to the script-tags on the index.html, kendo comes before globalize. So, this is not a solution that works for me.
UPDATE
Just use the newer version of globalize.js to get it work. I use version 1.0.0-alpha.3 of globalize.js now and everything works. There is a good how to. Keep in mind that kendo should be loaded after globalize.js. The order changed
For more information, please let me know.
Thanks
Sascha
Related
I apologize in advance for a wall of text question. SPFx is a new requirement mandated from on high and I don't have any working experience with it at this point.
I created a vanilla SPFx project added to github to make it easier. There are just too many moving parts to try and get them all in the question.
https://github.com/cyberjetx/dtspfx/tree/AddDt
Description of problem:
Trying to make the basic datatable work with zero configuration in SharePoint framework (SPFx) this is new ground for me and it has been mandated from on-high that we will be using SPFx or not on the intranet at all.
I am trying to document the process so that others using dt will have a base to start from or at least be able to see what is needed to to add dt to their SPFxs. This process is started in the readme.md.
in Area51WebPart.ts
import 'datatables.net';
in main.js
$(document).ready(function () {
$('#example').DataTable();
});
In config.json I would IDEALLY like to just use the combined file from dataTables cdn. I have also tried npm install --save datatables.net-dt and linked in config as "path": "/node_modules/datatables.net/js/jquery.dataTables.min.js", earning the following:
[17:03:22] Error - [webpack] 'dist':
"C:\code\dtspfx\node_modules\datatables.net\js\jquery.dataTables.min.js"
does not exist. Ensure the path is correct and relative to the project
root.
however, it is indeed there, if I copy and paste the path and open in notepad it's there.
. . .
"externals": {
"jquery": {
"path": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js",
"globalName": "jQuery"
}
,"datatables.net": {
"path": "/node_modules/datatables.net/js/jquery.dataTables.min.js",
// "path": "https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.12.1/af-2.4.0/b-2.2.3/b-colvis-2.2.3/b-html5-2.2.3/b-print-2.2.3/cr- 1.5.6/date-1.1.2/fc-4.1.0/fh-3.2.4/kt-2.7.0/r-2.3.0/rg-1.2.0/rr-1.2.8/sc-2.0.7/sb-1.3.4/sp-2.0.2/sl-1.4.0/sr-1.1.1/datatables.min.js",
"globalName": "jQuery",
"globalDependencies": [
"jquery"
]
}
},
. . .
Try removing the leading slash here => /node_modules/datatables/.... It may be looking at the root of your hard drive, not at the root of the project folder.
Other than that, you are probably using a wrong template, you don't need react or typescript if you are not using it. You can use plain javascript to create your webpart.
You can use DataTable in SPFx web parts using jQuery and DataTable libraries.
Follow below documentation and web parts for detailed code:
Migrate jQuery and DataTables solution built using Script Editor web part to SharePoint Framework
SharePoint Framework DataTable web part sample
DataTable Using MUI table
So reading another article and solution here I found the library Alasql which seems to do what I need.
I've installed it and was writing a proof-of-concept application to use it and when I attempt to use the illustration given in that article I get:
Error: jszip is not a constructor
write_zip#https://server:8443/vendor/js-xlsx/dist/xlsx.js:11295:12
write_zip_type#https://server:8443/vendor/js-xlsx/dist/xlsx.js:11407:10
writeSync#https://server/vendor/js-xlsx/dist/xlsx.js:11421:1
saveWorkbook#https://server:8443/vendor/alasql/dist/alasql.js:15656:17
doExport#https://server/vendor/alasql/dist/alasql.js:15556:3
alasql.into.XLSX#https://server/vendor/alasql/dist/alasql.js:15529:3
anonymous#https://server/vendor/alasql/dist/alasql.js line 7343 > Function:1:14
queryfn3#https://server/vendor/alasql/dist/alasql.js:6528:13
queryfn2#https://server/vendor/alasql/dist/alasql.js:6274:9
anonymous#https://server/vendor/alasql/dist/alasql.js line 7757 > Function:1:57
queryfn/<#https://server/vendor/alasql/dist/alasql.js:6223:12
queryfn#https://server/vendor/alasql/dist/alasql.js:6219:2
yy.Select.prototype.compile/statement#https://server/vendor/alasql/dist/alasql.js:7352:14
alasql.dexec#https://server/vendor/alasql/dist/alasql.js:4240:27
alasql.exec#https://server/vendor/alasql/dist/alasql.js:4190:10
alasql#https://server/vendor/alasql/dist/alasql.js:121:11
Index#https://server/app/states/index/index.controller.js:20:23
And those errors keep going as is the custom of Angular.
Looking for a solution I found https://github.com/SheetJS/js-xlsx/issues/184 but that didn't seem to help me out at all.
So I'm wondering if other people have encountered this and what their solution to the problem was as I'd really like to use this library but can't even get their example code to work.
EDIT:
So for those who might be coming up with the same problem...the solution I found was to add the JSZip library to my application (even though it looks like it was included with the SheetJs library) and made sure it was loaded before the Alasql piece. That seems to have done the trick...
It seems you are using it with requirejs or some dependency library
You will either need to include all .js files with the distribution or add them as a dependency in shim
We are migrating a web application from ExtJS 4 to ExtJS 5.
Testing the index.html results in the following error (outputted by the Firefox-FireBug-console):
NetworkError: 404 Not Found - http://localhost:8080/ext/build/examples/ux/grid/FiltersFeature.js?_dc=1414147197935
I have already searched for the FilterFeatures.js-file inside the directory, but it isn't there.
According to the "Whats New in ExtJS 5.0"-site this file was so popular, that they thought it would be wise to move it.
Can someone tell me how to include this file or the functionality, so that the error vanishes?
I have already tried to add the following to my app.js file:
Ext.Loader.setPath('Ext.ux', './ext/build/examples/ux');
Ext.application({
...
requires: [
'Ext.ux.grid.FiltersFeature'
],
...
});
But the error persists. I think i need to get a reference to an object that is now hidden somewhere else.
I just dont know how to reference it, because i dont know the js-file it is now placed in and how to do it syntactically correct in Ext JS 5.
The basics are in the link you provided:
They removed the feature Ext.ux.grid.FiltersFeature (ftype: filters).
They introduced a plugin Ext.grid.filters.Filters (ptype: gridfilters)
as an enhanced replacement.
So you will have to rework your grids manually to use the new plugin instead of the old feature.
Good luck.
Glad to share Ext Js up gradation experience , Please check this link Ext Js 4 to 5 Migration Experience. Have a Happy Migration. Thanks
I've upgraded a website from 4.4 to 6.0 and found some issues. Some I already solved but I keep getting one error (javascript I suppose) on events module. When I try to preview/create new/publish/save draft I get the following js error:
TypeError: startDate is null
Unable to get property 'getFullYear' of undefined or null reference
Telerik.Web.UI.WebResource.axd, line 329 character 1
var range=this.get_rangeView().getRange();
var time=this.get_timeView().getRange();
var startDateTime=new Date(time.get_start());
var endDateTime=new Date(time.get_start());
var startDate=range.get_start();
var endDate=range.get_recursUntil();
startDateTime.setFullYear(startDate.getFullYear(),startDate.getMonth(),startDate.getDate());
I reckon that this is dynamically created by Telerik sitefinity and I'm not sure how to fix it. I went to the administration area and checked the relevant configurations and it seems to be everything ok (similar configs as sitefinity 4.4).
Does anyone have an idea how to solve this? I've tried to post a sitefinity forum thread on their website but they took way to much time to answer.
Cheers
by any chance were you using external templates or a custom widget to show the events?
Sitefinity 6.0 apparently rebuilt the events module and it is no longer a simple, flat type. Instead it is a nested (hierarchical) type, with a parent calendar to which events are added (or multiple calendars if you need them).
So if you did any custom code or external template to display the content (in other words anything not out of the box that auto-upgraded itself when you updated to 6.0) you may need to rebuild this custom component to use the latest changes.
Consult the upgrade guide to 6.0 for latest breaking changes that one had the most differences, then compare your custom templates (if any) to the widget templates in the SDK: http://selarom.net/blog/2012/11/06/mapping-sitefinity-templates-from-the-sdk
I hope this is helpful!
Is there a way I can add a new package to dojo config? I know I can do this: Add packages when dojo.js loads.
<script src='dojo_1.7.2/dojo/dojo.js'
data-dojo-config="async:true,isDebug:true,parseOnLoad:false,
packages:[{name:'project1',location:'../../js/proj1'},
{name:'common',location:'../../common'}]"></script>
I want to be able to add new packages at runtime.
dojo.registerModulePath did do this job prior to dojo1.6 (i think) but its now deprecated in 1.7
I am using dojo 1.7.2.
Thanks.
You can add extra packages after load by calling require with a config object.
Eg:
require({
packages: [
{"name": "myLib", "location": "release/myLib"}
]
});
This will however, create another instance of Dojo, according to the documentation (dojo/_base/config). Also, this is version 1.8 code; I don't think it works with 1.7.
I thought it might possible to push an extra object to dojoConfig or require.rawConfig but these are not picked-up by the loader. It appears that config cannot be changed after load.
You can pass a config object to require, so:
Eg.
dojoConfig.packages.push({"name": "myLib", "location": "release/myLib"});
require(dojoConfig, [...moduleIds...], function(...arguments...) {
});
This will work for the individual require but will not modify the global config (and hence will not work in define() or subsequent calls to require()). Again, I'm using 1.8 here but I assume it works in 1.7.
There may be another simpler way of making this work that someone else as found?
The solution by Stephen Simpson didn't seem to work right for me with dojo v1.13. It ignored the given location and was still trying to load the files relative to the default basePath despite of the project path starting it with a /. I got errors in the console, too.
But the documentation also mentions the paths parameter which worked for me. In your case:
require({paths:{"project1": "../../js/proj1", …}});
It probably worked for you because you're using a relative path and I don't.
It used to be dojo.registerModulePath("myModule", "/path/goes/here");.