I have asp.net core application using Telerik UI for ASP.NET Core. I am trying to use export to excel feature as per the demo. However i am getting jQuery error
cannot read property 'length' of undefine
as per SO suggestion here i have to upgrade jquery to 2.2.4 or above.
However when i checked the bower configuration for kendo-ui it has jQuery dependency.
{
"name": "kendo-ui",
"version": "2016.3.1007",
"dependencies": {
"jquery": ">=1.9.1 <=2.1.1"
},
//removed for brevity
}
so the kendo-ui has dependency on jquery version <= 2.1.1 so i could not upgrade jQuery. (also my license for kendo is expired so i could not upgrade Kendo as well)
So what are my options here to get around this issue?
Related
I downloaded the latest version of Kendo UI (Version: 2020.1.406) for MVC5 and upgraded my project to refer the latest JS, CSS and Kendo.MVC (2020.1.406.545). After upgrading, grid displays 'no record found' message even the record fetching is in progress.
Below is the image with Kendo UI (Version: 2020.1.406):
It was working well with Kendo UI 2018.2.516 as below:
I do not want to show 'No record found' message while fetching records, it should appear only after completion of fetching data and if no record exist.
since it is a bug in Kendo UI, do not use NoRecords method of grid. Instead use DataBound event and call below JS function:
function onGridDataBound(e) {
if (!e.sender.dataSource.view().length) {
var colspan = e.sender.thead.find("th:visible").length, emptyRow = 'No Record Found.';
e.sender.tbody.parent().width(e.sender.thead.width()).end().html(emptyRow);
}
}
I'm new to NativeScript. I have created a new project using the Angular Blank template. The navigation is done using page-router-outlet. I want to include a xmlns attribute on the page level. As far as i can see and understand the entire code is rendered inside a global page attribute. I've seen that I can modify the page properties by injecting the Page in a component and changing it's properties, but how can I do this for xmlns?
Best regards,
Vlad
To register a UI component in Angular based application you should use registerElement and not XML namespaces (which is a concept used in NativeScript Core). Nowadays most plugin authors are doing this job for you, but still, some of the plugins are not migrated to use the latest techniques so in some cases, we should manually register the UI element.
I've created this test applicaiton which demonstrates how to use nativescript-stripe in Angular. Here are the steps to enable and use the plugin.
Installation
npm i nativescript-stripe --save
Register the UI element in app.module.ts as done here
import { registerElement } from "nativescript-angular/element-registry";
registerElement("CreditCardView", () => require("nativescript-stripe").CreditCardView);
Add the following in main.ts as required in the plugin README
import * as app from "tns-core-modules/application";
import * as platform from "tns-core-modules/platform";
declare const STPPaymentConfiguration;
app.on(app.launchEvent, (args) => {
if (platform.isIOS) {
STPPaymentConfiguration.sharedConfiguration().publishableKey = "yourApiKey";
}
});
Use the plugin in your HTML (example)
<CreditCardView id="card"></CreditCardView>
Exception: Call to Node module failed with error: Error: Template parse errors:
Can't bind to 'filterable' since it isn't a known property of 'kendo-grid'.
If 'kendo-grid' is an Angular component and it has 'filterable' input, then verify that it is part of this module.
If 'kendo-grid' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '#NgModule.schema' of this component to suppress this message.
("
<kendo-grid [data]="gridData" [ERROR ->][filterable]="true">
You're using an older version of the Kendo UI Grid for Angular 2. The filterable option was added not that long ago. From the changelog it seems it was added in version 0.20.0 on March 24th, 2017.
What version are you using?
i need to have all ckeditor plugins in RTE of Blog component in AEM,
like http://ckeditor.com/
but the current Blog component in AEM have limited plugins. please check below link. am using AEM 6.2 version
http://localhost:4502/content/community-components/en/journal.html
is this possible ? if yes can some one guide how to do this.
Thanks in advance.
You need to overlay /libs/social/commons/components/richTextEditor component. Depending on the libraries you are using (jQuery, etc.) you will need to modify the document.ready to load the plugin using the following JS
CKEDITOR.plugins.addExternal( [plugin-name], '/etc/clientlibs/path-to-plugin', 'plugin.js' );
The plugin can then be registered with CKEDITOR as follows:
var ckEditor = CKEDITOR.replace( [editor-placeholder-element], {
toolbar: [{ name: '[toolbar-name]', items: [ '[plugin-name]' ] }],
extraPlugins: '[plugin-name]');
The [plugin-name] is the plugin identifier for your plugin based on
the library.
The library for plugin is normally stored under
/etc/clientlibs or your component.
You can chose an existing toolbar your plugin interface icon or you can create a new one.
The plugin and all it's dependencies must be initialised before the CKEDITOR is instantiated or alternatively your plugin must be able to work out its dependencies at runtime.
Hope this helps.
Does anyone have a kendo UI scheduler example with angular 2? Is it compatible?
Thanks
Since there is some interest in this still you can create a component that is wrapped by the scheduler:
import { Component, ViewEncapsulation, ElementRef, AfterViewInit, OnDestroy, DoCheck, Input, Output, EventEmitter, IterableDiffers } from '#angular/core';
//you can import Jquery here if you want - i used it via CDN and not local node.
declare var jQuery: any;
scheduler: any;
schedulerControl: any;
#Component({
selector: 'scheduler',
template: `
<div></div>
`,
styleUrls: ['./scheduler.component.scss'],
encapsulation: ViewEncapsulation.None
})
constructor(
protected el: ElementRef,
) {
}
//you can also do #input and #outputs here if you want to build proper events around the scheduler components.
ngAfterViewInit() {
this.scheduler = jQuery(this.el.nativeElement.children[0]);
this.schedulerControl = jQuery(this.scheduler).data("kendoScheduler");
this.scheduler.kendoScheduler({.....put your scheduler options here ....});
Note:
You must import and use the right version of jquery - which is sadly still version 1.xxx
Note 2:
New versions now supports higher versions of Jquery - important to make sure they versions match with kendo requirements.
We are currently working on a project that has a very complex scheduling module.
At the momonet we are using Kendo UI scheduler wrapped with Angular2.
This is of course not a good solution as we are wrapping the Kendo JQuery implementation. It does work (and pretty well) but we will not continue with it if there will be no progress on native Angular2 implementation soon as it forces us to work "outside" Angular.
I think it's a shame that Telerik announcements on Angular2 are not clear enough. They put on their flag being leaders in Angular2 support long ago but it seems this is not happening as expected. We are already invested in Kendo in other projects(not Angular2) but we will have to choose something real soon.
If Kendo will not start showing any real progress we will not continue with it.
It is likely that the Angular2 kendo scheduler widget will be released in 2017. Here is a link to their roll out plan.
http://www.telerik.com/blogs/what-to-expect-in-2016-for-kendo-ui-with-angular-2-and-more
In the meantime to use the scheduler our team has just imported angular 1.x for the page running our scheduler in our angular 2.x app. Not ideal but you can also get just the kendo scripts you need to run the scheduler if you're worried about performance.
You may also want to look at using ngForward with angular 1.x in the meantime until the angular 2.x widget is available. Then convert your entire application over to angular 2.x when kendo releases the scheduler.