Good afternoon SO, I am new to Kendo UI and followed the directions on Telerik's site for getting notifications to work. I tested on Telerik's site test tool and the notifications do work as implemented but not on my site. I am using MVC and inlcuded kendo.all.min.js as well as all the .css files in the BundleConfig and it does show them as being implemented when looking into DevTools on Chrome.
I place a
<span id="Notification"></span>
on the the Index page. I then have JavaScript on a separate .js file that initializes the kendo notification.
$('#Notification').kendoNotification({
position: {
pinned: false,
top: 0,
right: 0
}
}).data("kendoNotification");
Then on the successful return of an AJAX call in my JavaScript I call the notification.
$('#Notification').show(" Your item has been saved.", "success");
When I run the code I keep getting this error:
Uncaught TypeError: n.easing[this.easing] is not a function
All the files used on the kendo test site are implemented but I'm not sure why this is happening. Any help is greatly appreciated.
Here is my Kendo example that worked: http://dojo.telerik.com/iWIXO
You need to include jqueryUI reference. That should do the trick.
<script src='https://code.jquery.com/ui/1.11.3/jquery-ui.min.js'></script>
PS: Make sure you include this reference after the jquery reference
i think it should be this way:
var notification = $('#Notification').kendoNotification({
position: {
pinned: false,
top: 0,
right: 0
}
}).data("kendoNotification");
notification.show(" Your item has been saved.", "success");
Related
I have a standard laravel + inertia + vue3 setup using breeze, and as Inertia docs says, navigation between pages should mimic browser default behavior reseting scroll to top when page loads. But it is not working this way in my case.
I don't have preserveScroll: true in my links but this happens anyway.
I have tried with a vuejs onMounted() hook to scroll to top when component loads, but immediately the page scrolls from top to last scroll position from previous page.
So I've deactivated this hook because its ugly flashing effect.
Any idea on how to solve this?
Thanks in advance.
I think you have to define the scroll region: https://inertiajs.com/scroll-management#scroll-regions
It seems that your app doesn't use document body scrolling.
My css file had a property overscroll-behavior: contain; applied to body tag. Since I removed it, everything is working fine now.
temporary solution
in Layout.vue
mounted(){
Inertia.on('success', () =>
window.scrollTo({ top: 0, left: 0, behavior: 'instant' })
)
}
I'm using free jqgrid and implemented column chooser to show hide columns, the functionality is working as expected but the popup that shows up doesn't have a proper rendering of UI.
I tried searching a lot and went through the documentation of free jqgrid but I don't know what am I doing wrong.
I was able to reproduce the error in demo in below url.
If any one has faced similar issue please help. Note I am using bootstrap theme.
$("#sampleGrid").navButtonAdd('#sampleGridPager',{
caption: "",
title: "Choose Columns",
buttonicon: "fa fa-table",
onClickButton: function () {
$("#sampleGrid").jqGrid('columnChooser');
}
});
https://jsfiddle.net/1vk5ku2y/2/
One needs to add jQuery UI CSS to the demo because it's required for columnChooser. You should add some jQuery UI theme, which corresponds Bootsrap CSS theme. For example
https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css
After that one get already much better results https://jsfiddle.net/OlegKi/1vk5ku2y/4/. You need to add minor CSS fixes to have the final solution.
I have embedded a video into my site using the Ziggeo API. I am using Handlebars to populate the token to the ziggeo player:
<ziggeo id="zideo_player" ziggeo-width="560" ziggeo-height="315" ziggeo-playonclick="true" ziggeo-video={{this.token}}>
</ziggeo>
I know that the token is getting there because I can see it in the inspector.
The weird thing is, when I go into the inspector and change from ziggeo to ziggeoplayer, the video will show, but when I push those changes to Heroku, it again doesn't show.
It's as if the player is loading before the token is received and only by changing the name can I re-send the token.
This turned out to be an asynch (asynchronization) issue. The video was trying to load before it could send and receive information from Ziggeo's API. To solve this, I used a separate js file and then appended the video information after the document loaded.
After some more thought, I might have also been able to fix this by placing the Ziggeo API information at the bottom of the body in the index.handlebars file instead of in the head. I didn't have a chance to try this since the above trick worked, but it would probably look cleaner if it did.
v1 and v2 should both work on Heroku.
Benjamin, can you try replacing that HTML embedding code with JS code, which could then be delayed if really needed.
For example of same code in JS:
<script>
//ZiggeoAPI will work only with v1-rXY/ziggeo.js v2- will require v2 app to be created and code would look just a bit different
ZiggeoApi.Events.on("system_ready", function() {
var player = new ZiggeoApi.V2.Player({
element: document.getElementById("your_element_ID"),
attrs: {
width: 560,
height: 315,
theme: "modern",
themecolor: "red",
playonclick: true,
video: "{{this.token}}"
}
});
player.activate();
});
</script>
This would only fire once the Ziggeo system is loaded and ready. This means that it fires after the DOM is ready and page loaded so it should be before the {{this.video}} is available.
I am trying to use jquery plugin inside template:
But I am getting error, can anyone point me out where it goes wrong?
I've called the function $("span.pie").peity("pie") inside the script tag and tried to use it inside one of my column template of the grid. { field: 'userId', title: 'ID', template:"<span class=ul>#=userId#</span> </br> <span class='pie'>1/5</span>", width:60 }
https://dojo.telerik.com/ihEzi
The problem is that you call the plugin before the template has been rendered. The call to the plugin only finds and affects what is in the DOM at that time. Anything you add afterwards, even though it matches the span.pie selector, is unaffected until you call it again.
I suggest subscribing to the grid dataBound event (see the Telerik documentation) and calling the plugin in the handler function you define. DataBound is called after the grid has rendered all its UI components so everything is then in the DOM ready to be found.
There is a problem when I put Kendo Dropdown List info Fancybox - Popup.
For detail:
I have page A :this page contains Kendo Dropdown list (with id = #myDropdown).
I have page B : I put my Fancybox caller here- I mean I use Fancybox to load page A (by ajax)
Everything look well , but I got a problem here:
You know, when I initialize a Dropdown List, Kendo-UI will create an "anchor" Tag for UI-effect purpose.
Ex:
DropdownList has id = #myDropdown
Kendo will create one more Tag with id = #myDropdown-list.
After closing the Fancybox-popup , The "#myDropdown" was removed from DOM, but "#myDropdown-list". It still on the DOM overtime, and it willing to be double after I call the popup again(ofcourse if dont refresh current page).
And The Kendo-DateTimePicker as the same too.
p/s: and so sorry about by english if it was too bad :D. I hope you get my question.
im going to put my "popup" in iframe.But I dont know if it is good when using iframe in this case...
Using IFrame or not is not the cause of the error. I tried with a container and without it to load the fancybox via ajax, but it didn't make a difference.
What I found is sort of a hack, however it solves the problem. Let's suppose we have a code which creates the popup and the popup's content is located in the href 'popupFrame':
$.fancybox({
'href': 'popupFrame',
'type': 'ajax',
beforeClose: removeKendoHelpers
});
The other part is the function which is called before closing the popup:
function removeKendoHelpers() {
$("#myDropdown-list").remove();
}
Of course you can create the removeKendoHelpers as an inline function and if there are more parts to remove then put that code into the removeKendoHelpers function as well.
One interesting remark: in the fancybox API onCleanup and onClosed are listed as options but they do not work, instead use beforeClose or afterClose.
UPDATE:
Actually a lot of problem is solved with calling the kendo widget's destroy() method. It solves the removing problems for the widgets except for one of the three helper divs of the DateTimePicker, so the close looks like the following:
function removeKendoHelpers() {
$("#myDropdown-list").data("kendoDropDownList").destroy();
$("#datetimepicker").data("kendoDateTimePicker").destroy();
}
And to resolve the date time picker's actual problem which is I think a bug in the kendop framework (I will report this and hopefully get some feedback) the last function only needs to be extended with:
$(".k-widget.k-calendar").remove();
OTHER solution:
This one is more crude but works like a charm for me even if the page has multiple kendo controls and even if you open another fancybox from your fancybox.
Wrap the fancybox creation in a function, like:
function openFancyBox() {
$("body").append("<div class='fancybox-marker'></div>");
$.fancybox({
'href': 'popupFrame',
'type': 'ajax',
beforeClose: removeKendoHelpers
});
}
This will create a new div at the very end of the body tag, and the function at the closing of the fancybox uses this:
function removeKendoHelpers() {
$(".fancybox-marker").last().nextAll().remove();
$(".fancybox-marker").last().remove();
}
I hope these solves all your problem!