I have implemented the Languages tab shown on https://mmenujs.com/documentation/addons/navbars.html BUT I would like a way to remember the position/active menu panel when going back from the Languages tab.
I am right now using the API to open both panels from icons in my visible navigation:
$(".mobile-lang").on("click", function() {
api.open().openPanel( $("#languages-panel") );
});
$(".mobile-nav").on("click", function() {
api.open().openPanel( $("#menu-panel") );
});
Plus I have my navbar set-up like this:
navbars: [{
"position": "top",
"type": "tabs",
"content": [
"<a href='#menu-panel'>" + mmenuMenu + "</a>",
"<a href='#languages-panel'>" + mmenuLanguages + "</a>"
]
}]
My solution
My html button elements in my always visible navigation:
Open current menu panel
<a class="mobile-lang">Open languages panel</a>
My JS
var currentMMStep = "menu-panel";
$("#mmenu").mmenu({
// options
pageScroll: {
scroll: true,
update: true // pageScroll options
},
extensions: [
"pagedim-black",
"position-front",
"position-right",
"shadow-panels"
],
navbars: [{
"position": "top",
"type": "tabs",
"content": [
"<a href='#menu-panel' id='the-menu-panel'>" + mmenuMenu + "</a>",
"<a href='#languages-panel'>" + mmenuLanguages + "</a>"
]
}]
}, {
// configuration
clone: false,
offCanvas: {
pageSelector: "#page-wrap"
}
});
var api = $("#mmenu").data( "mmenu" );
$(".mobile-lang").on("click", function() {
api.open().openPanel( $("#languages-panel") );
});
api.bind( "openPanel:before", function( $panel ) {
if(!$("#languages-panel").hasClass("mm-panel_opened")){
currentMMStep = $(".mm-panel_opened").attr("id");
$("#the-menu-panel").attr('href', "#" + currentMMStep);
}
});
api.bind( "openPanel:finish", function( $panel ) {
if(!$("#languages-panel").hasClass("mm-panel_opened")){
currentMMStep = $(".mm-panel_opened").attr("id");
$("#the-menu-panel").attr('href', "#" + currentMMStep);
}
});
api.bind("closeAllPanels:before", function() {
$("#the-menu-panel").data('href', "#" + currentMMStep);
});
//because we alter the #menu-panel href on the Menu tab it removes the selected class when clicking the mm-navbar__title...
$(".mm-navbar__title").on("click", function() {
setTimeout(function(){
$(".mm-navbar_tabs a:first-child").addClass("mm-navbar__tab_selected");
}, 40);
});
Related
)
I am using KENDO UI with IFRAME and I want to display an alert when the user clicks to close his WEB browser when the IFRAME is active with KENDO.
So I specify that I want to see the alert is triggered only if the IFRAME is active
Here is my code :
<button id="refresh" class="k-button k-primary" title="START">START</button>
<div id="messageDialog"></div>
<script>
var isClosed = false;
$("#refresh").click(function(e) {
e.preventDefault();
var id = "target_iframe";
var dialog = $("<div><iframe class='k-content-frame' name='" + id + "'></div>").kendoWindow({
title: "test",
close: function() { this.destroy() },
iframe: true,
close: function(e) {
if(!isClosed) {
$("#messageDialog").kendoDialog({
title: "test",
content: "Exit ?",
visible: false,
show: function() {
e.preventDefault();
},
actions: [{
text: "Exit",
action: function(e){
setTimeout(function() {
isClosed = true;
$("#target_iframe").data("kendoWindow").close();
}, 200);
},
primary: true
},{
text: "Cancel"
}]
}).data("kendoDialog").open();
}
},
deactivate: function() {
isClosed = false;
}
});
dialog.data("kendoWindow").center().open();
$("<form />", {
action: "https://www.mywebsite.com/",
method: "post",
target: id
})
.hide().appendTo("body")
// add any data
.append("<input name='foo' />").find("[name=foo]").val("bar").end()
.submit().remove();
});
</script>
Thank you in advance :)
I tried to bind the 'deselect' event to the KendoUI multiselect control using jquery. But seems like it is not firing: Here is the code:
$(document).ready(function () {
function multiselect_deselect(e) {
debugger;
if (e.item.context.localName == 'li') {
e.preventDefault();
}
}
var multiselectCtrl = $("#enterFeedbackForm_" + '#ContextId' + " #FeedbackCategoryList_" + '#ContextId').data("kendoMultiSelect");
multiselectCtrl.bind("deselect", multiselect_deselect);
});
the debugger point does not hit. We're using Kendo UI Kendo UI v2015.2.703
I think kendo-ui has a bound property for this already. If you take a look at the event documentation, it shows you how to bind the events on initialization of kendo ui multiselect:
$(document).ready(function() {
function onDeselect(e) {
debugger;
if (e.item.context.localName == 'li') {
e.preventDefault();
}
};
var data = [
{ text: "Africa", value:"1" },
{ text: "Europe", value:"2" },
{ text: "Asia", value:"3" },
{ text: "North America", value:"4" },
{ text: "South America", value:"5" },
{ text: "Antarctica", value:"6" },
{ text: "Australia", value:"7" }
];
$("#select").kendoMultiSelect({
dataTextField: "text",
dataValueField: "value",
dataSource: data,
deselect: onDeselect,
});
});
I am trying to create a firefox extension (my first extension so I am beginner).
I wanted to do this example :
But this is my result :
I can not understand why my images are not loading, why the frame on the right of the buttons is empty and if it was possible to increase the height of the toolbar.
There is my code :
index.js :
var { ActionButton } = require('sdk/ui/button/action');
var { Toolbar } = require("sdk/ui/toolbar");
var { Frame } = require("sdk/ui/frame");
var previous = ActionButton({
id: "previous",
label: "previous",
icon: {
"16": "./icons/previous.png"
},
onClick: function(state) {
console.log("button '" + state.label + "' was clicked");
}
});
var next = ActionButton({
id: "next",
label: "next",
icon: {
"16": "./icons/next.png"
},
onClick: function(state) {
console.log("button '" + state.label + "' was clicked");
}
});
var play = ActionButton({
id: "play",
label: "play",
icon: {
"16": "./icons/play.png"
},
onClick: function(state) {
console.log("button '" + state.label + "' was clicked");
}
});
var frame = new Frame({
url: "./frame-player.html"
});
var toolbar = Toolbar({
title: "Player",
items: [previous, play, next, frame]
});
frame-player.html :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
TEST
</body>
</html>
Solved by putting all the files (images, scripts, ...) in the "data" folder of my extension.
I want to hide delete button in some rows with certain conditions. I have checked the following link but it is still not working well.
http://www.telerik.com/forums/hide-edit-and-delete-button-based-on-the-status-of-each-record
Their code like this:
function onEdit() {
$(".k-grid-cancel").on("click", function () {
setTimeout(function () {
console.log("trigger");
$("#Grid").data("kendoGrid").trigger("dataBound");
});
})
}
The problem is when you changed any items in the popup edit window, the delete button will show up on the original gray out area. Although you click the cancel button, it will disappear. But if you click the right up corner [x] to close the popup edit window, the delete button will stay there.
Any body know there is any new update for the kendo grid conditional button?
Thanks
First add an event in the grid as
.Events(ev =>
{
ev.Cancel("onEditCancel");
})
And then on js
function onEditCancel(e) {
e.sender.cancelChanges();
e.preventDefault();
}
It will work.
You can achieve this requirement by using onDataBinding event of KendoGrid.
function onChange(arg) {
var selected = $.map(this.select(), function(item) {
return $(item).text();
});
console.log("Selected: " + selected.length + " item(s), [" + selected.join(", ") + "]");
}
function onDataBound(arg) {
console.log(arg);
console.log("Grid data bound");
}
function onDataBinding(arg) {
console.log(arg);
console.log("Grid data binding");
}
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
transport: {
read: {
url: "//demos.telerik.com/kendo-ui/service/Products",
dataType: "jsonp"
}
},
pageSize: 20
},
height: 350,
change: onChange,
dataBound: onDataBound,
dataBinding: onDataBinding,
selectable: "multiple cell",
pageable: true,
sortable: true,
columns: [
{
field: "ProductName",
title: "Product Name"
},
{
field: "UnitPrice",
title: "Unit Price",
format: "{0:c}"
},
{
field: "UnitsInStock",
title: "Units In Stock"
}
]
});
});
Check this link http://jsfiddle.net/HuTpj/68/ and see the console for events trigger while loading the grid.
#(
Html.Kendo().TreeView()
.Name("x")
.TemplateId("treeview-template")
.BindTo(Model.x)
)
<script id="treeview-template" type="text/kendo-ui-template">
<input type='radio' data-bind="value: textValue,checked:checkedvalue" name='y'> #:item.text #</input>
</script>
The above code is a kendo tree view which has a list of radio buttons against each item.
I need to retrieve the name and id of the radio button.
Also, i need to bind the value of the radio button to a model for retrieval.
You can use different events of treeview like select , change. Following is one of the example.
<script>
$(document).ready(function() {
function onSelect(e) {
kendoConsole.log("Selecting: " + this.text(e.node));
}
function onCheck(e) {
kendoConsole.log("Checkbox changed :: " + this.text(e.node));
}
function onChange(e) {
kendoConsole.log("Selection changed");
}
function onCollapse(e) {
kendoConsole.log("Collapsing " + this.text(e.node));
}
function onExpand(e) {
kendoConsole.log("Expanding " + this.text(e.node));
}
function onDragStart(e) {
kendoConsole.log("Started dragging " + this.text(e.sourceNode));
}
function onDrag(e) {
kendoConsole.log("Dragging " + this.text(e.sourceNode));
}
function onDrop(e) {
kendoConsole.log(
"Dropped " + this.text(e.sourceNode) +
" (" + (e.valid ? "valid" : "invalid") + ")"
);
}
function onDragEnd(e) {
kendoConsole.log("Finished dragging " + this.text(e.sourceNode));
}
function onNavigate(e) {
kendoConsole.log("Navigate " + this.text(e.node));
}
$("#treeview").kendoTreeView({
checkboxes: true,
dataSource: [
{ text: "Furniture", expanded: true, items: [
{ text: "Tables & Chairs" },
{ text: "Sofas" },
{ text: "Occasional Furniture" }
] },
{ text: "Decor", items: [
{ text: "Bed Linen" },
{ text: "Curtains & Blinds" },
{ text: "Carpets" }
] },
{ text: "Storage" }
],
select: onSelect,
check: onCheck,
change: onChange,
collapse: onCollapse,
expand: onExpand,
dragAndDrop: true,
/* drag & drop events */
dragstart: onDragStart,
drag: onDrag,
drop: onDrop,
dragend: onDragEnd,
navigate: onNavigate
});
});
</script>