How do I get Dynamic context menu in jqGrid? I need to display 'menu1' for even rows and 'menu2' for odd rows? I tried to use contextmenu plugin but do not know how to implement dynamic switch between 2 context menues. Thanks.
If you need really bind just 'menu1' for even rows and 'menu2' for odd rows you can implement binding to grid rows inside of loadComplete. For example if you has
<div class="contextMenu" id="myMenu1" style="display:none">
<ul style="width: 200px">
<li id="edit1">
<span class="ui-icon ui-icon-pencil" style="float:left"></span>
<span style="font-size:11px; font-family:Verdana">Edit Row 1</span>
</li>
<li id="del1">
<span class="ui-icon ui-icon-trash" style="float:left"></span>
<span style="font-size:11px; font-family:Verdana">Delete Row 1</span>
</li>
</ul>
</div>
<div class="contextMenu" id="myMenu2" style="display:none">
<ul style="width: 200px">
<li id="edit2">
<span class="ui-icon ui-icon-pencil" style="float:left"></span>
<span style="font-size:11px; font-family:Verdana">Edit Row 2</span>
</li>
<li id="del2">
<span class="ui-icon ui-icon-trash" style="float:left"></span>
<span style="font-size:11px; font-family:Verdana">Delete Row 2</span>
</li>
</ul>
</div>
you can make the binding so
loadComplete: function () {
$("tr:even", this).contextMenu('myMenu1', {
bindings: {
'edit1': function(trigger) {
alert ("Edit (menu1) id=" + trigger.id);
},
'del1': function(trigger) {
alert ("Delete (menu1) id=" + trigger.id);
}
}
});
$("tr:odd", this).contextMenu('myMenu2', {
bindings: {
'edit2': function(trigger) {
alert ("Edit (menu2) id=" + trigger.id);
},
'del2': function(trigger) {
alert ("Delete (menu2) id=" + trigger.id);
}
}
});
}
See the demo.
Ok so you already have the contextmenu to work but need to define if the row is even or odd.
Try the following:
afterInsertRow: function(rowId, rowData, rowElm) {
var trElement = $('#' + rowid);
if(trElement.is(':even'))
// even contextMenu
else
// odd contextMenu
}
Related
I have a div class .dropbtn inside my navbar that I wish would run a list drop down function when clicked, but only the text "TOTAL" works onclick.
The <span> and the <i> inside it do not do anything when I click on it, and I need all three elements to be clickable and display the dropdown function. I am using jQuery, but not Bootstrap. Thanks in advance! EDITED.
jQuery('body').on('click', '.dropbtn', function() {
jQuery("#myDropdown").toggleClass("show");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="reservas_right">
<div class="dropdown_reservas nav-item_reservas" id="inner_reservas_right">
<div class="dropbtn">
TOTAL
<br /><span id="totalprice">0,00€</span>
<i class="material-icons">arrow_drop_down</i>
</div>
<div class="dropdown-content_reservas" id="myDropdown">
<ul id="dropul" class="dropul">
<li id="drop1"></li>
<li id="drop2"></li>
<li id="drop3"></li>
<li id="drop4"></li>
<li id="drop5"></li>
<li id="drop6"></li>
</ul>
</div>
</div>
</div>
CSS:
.show{
list-style-type:none;
}
jQuery('body').on('click', '.dropbtn', function(e) {
if(e.target !== this && jQuery(e.target).parent().is(".dropbtn"))
{
jQuery("#myDropdown").toggleClass("show");
} else {
jQuery("#myDropdown").toggleClass("show");
}
});
I am attempting to use JavaScript to dynamically append child elements (li elements) into an existing list.
Target DOM:
<body>
<div class="dd" name="agenda-nestable" id="nestable">
<ol id="agenda-root" class="dd-list">
<li class="dd-item" id="2879">
<div class="dd-handle">Section123</div>
</li>
<li class="dd-item" id="2880">
<div class="dd-handle">Section 4</div>
</li>
<li class="dd-item" id="2881">
<div class="dd-handle">Section 5</div>
</li>
</ol>
</div>
<button value onclick='addSection()'>Add Section</button>
</body>
JavaScript:
function addSection() {
var data = { SectionId: 123, SectionText: 'Section Name'};
var agendaDiv = $("[name='agenda-nestable']");
var agendaSections = $(agendaDiv).find("ol#agenda-root");
agendaSections.appendChild('<li class="dd-item" data-id="' + data.SectionId + '" id="' + data.SectionId + '">' +
'<div class="dd-handle">' + data.SectionText + "</div></li>");
}
Plunk: https://plnkr.co/edit/jLi9epblNAtMbzezcRSY?p=preview
Could someone please take a look and let me know what I am doing wrong? It seems like it should be straightforward, and I believe I am traversing the DOM correctly. :-/
Thanks,
Philip
appendChild isn’t a jQuery function; it’s part of the DOM API, and you can only use it on DOM nodes. jQuery objects aren’t DOM nodes. There’s no reason to be manipulating HTML in the first place, though, when you can create an actual <li> element:
agendaSections.append(
$('<li>', {
class: "dd-item",
'data-id': data.SectionId,
id: data.SectionId,
}).append(
$('<div>', { class: 'dd-handle', text: data.SectionText })
)
);
This also prevents HTML injection if SectionText is user-provided data.
Try to replace appendChild() to append():
JSfiddle Demo
function addSection() {
var data = { SectionId: 123, SectionText: 'Section Name'};
var agendaDiv = $("[name='agenda-nestable']");
var agendaSections = $(agendaDiv).find("ol#agenda-root");
agendaSections.append('<li class="dd-item" data-id="' + data.SectionId + '" id="' + data.SectionId + '">' +
'<div class="dd-handle">' + data.SectionText + "</div></li>");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="dd" name="agenda-nestable" id="nestable">
<ol id="agenda-root" class="dd-list">
<li class="dd-item" id="2879">
<div class="dd-handle">Section123</div>
</li>
<li class="dd-item" id="2880">
<div class="dd-handle">Section 4</div>
</li>
<li class="dd-item" id="2881">
<div class="dd-handle">Section 5</div>
</li>
</ol>
</div>
<button value onclick='addSection()'>Add Section</button>
</body>
The method appendChild is from native js. agendaSections is a jQuery element, so you need to use append() method from jQuery.
Change your generateRemoveSectionDropDown method code to this:
function generateRemoveSectionDropDown() {
$("#nestable ol#agenda-root>li").each( function() {
$('#RemoveSectionId').append($('<option>', {text: $(this).text() }));
});
}
And add to your html this:
<select id="RemoveSectionId"></select>
It will work well.
See plunk.
I have been trying without success to add a toggle button to a user generated input. this is a font awesome toggle button.
here is my pen: http://codepen.io/lucky500/pen/bdpzbd and the code.
<div id="list" class="greatList clearfix" >
<ul class="greatList" style='display: none;'>
<li class="items">
<div class="box">
<i class="fa fa-toggle-on fa-2x active" id="on"></i>
<i class="fa fa-toggle-on fa-2x fa-rotate-180 inactive" id="off" style='display: none;'></i>
</div>
</li>
</ul>
</div>
Jquery
$(document).ready(function(){
//toggler
$('.box').click(function() {
$('.inactive, .active').toggle();
});
var trash = '<span class="delete">X</span>';
var toggleButton = '<div class="box"></div>';
//To allow the user to use enter
$('#addButton').click(function(e){
e.preventDefault();
var item = $('#addItems').val();
var placeIt = $('<li style="display: block;">' + toggleButton + item + trash + '</li>');
if(!$.trim($('#addItems').val())) {
alert('Please enter text to add to the list');
} else {
$('.greatList').append(placeIt);
};
})
//To remove li when .trash is clicked
$(document).on('click', '.delete', function() {
$(this).closest('li').fadeOut(350);
});
});
all the help is appreciated!
I actually just had to add the i tag with my toggle inside my toggleButton var... now onto trying to get my toggle to work!
var toggleButton = '<div class="box" style="display: block;"><i class="fa fa-toggle-on fa-2x active" id="on"></i></div>';
I have a jQueryUI sortable list of li-Buttons with following markup:
<ol id="tracks" class="ui-sortable">
<li class="pl_clipEntry ui-widget-content ui-draggable ui-draggable-handle">
<span class="pl_slot_1_clipNumber_6">6. </span>
<span class="pl_clipName">
<button class="pl_entry" onclick="emitCommand('goto: clip id: 6')">Clip Copy 3.mov</button>
</span>
<span class="pl_clipLength">(00min17sec)</span>
</li>
</ol>
These Items are dragged from another list, where their onclick has its good use
Now everytime the list is sorted (or a new item is inserted), i want to overwrite the onclick, so that the items in THIS list have a different function (in fact, it's going to be a playlist, that's why the onclick-command can't be the same as in the file-list)
i can't figure out how exactly to do this.
This is called on every list-update:
function updatePlaylist () {
var list = $("#tracks");
list.children(':not(.placeholder)').each(function(index) {
console.log($(this).childNodes[1].text()); // to check if it works
//$(this).children[1].attr("onclick","play_clip:" + index);
});
};
so, in plain: i want to set the onclick of each li > span > button to "play_clip6" etc.
i've tried it with children[1] and childnodes[1], but they all print undefined.
i suppose it's something about the scope of "this", or some other thing i've overlooked.. but shouldn't this work? i'm stuck :(
thanks
I think what you are missing is the parameter for the referenced element in the each function.
HTML
<ol id="tracks">
<li>Track 1 <span style="color:red;">sp1</span> <span style="color:blue;">Play 1</span>
</li>
<li>Track 2 <span style="color:red;">sp1</span> <span style="color:blue;">Play 2</span>
</li>
<li>Track 3 <span style="color:red;">sp1</span> <span style="color:blue;">Play 3</span>
</li>
<li>Track 4 <span style="color:red;">sp1</span> <span style="color:blue;">Play 4</span>
</li>
<li class="placeholder">Move Track Here</li>
</ol>
<button id="changeIt">Change The Click Event</button>
JS
$(function () {
$("#tracks").children(":not(.placeholder)").each(function (index, elem) {
var cElem = $(elem).children().eq(1);
$(cElem).click(function () {
alert("before: " + $(cElem).text());
});
});
});
$("#changeIt").click(function () {
$("#tracks").children(":not(.placeholder)").each(function (index, elem) {
var cElem = $(elem).children().eq(1);
$(cElem).attr('onclick', '').unbind('click');
$(cElem).click(function () {
alert("after: " + $(cElem).text());
});
});
});
Edit for selecting button inside
HTML
<ol id="tracks">
<li>Track 1 <span style="color:red;">sp1</span> <span style="color:blue;"><button>Play 1</button></span>
</li>
<li>Track 2 <span style="color:red;">sp1</span> <span style="color:blue;"><button>Play 2</button></span>
</li>
<li>Track 3 <span style="color:red;">sp1</span> <span style="color:blue;"><button>Play 3</button></span>
</li>
<li>Track 4 <span style="color:red;">sp1</span> <span style="color:blue;"><button>Play 4</button></span>
</li>
<li class="placeholder">Move Track Here</li>
</ol>
<button id="changeIt">Change The Click Event</button>
JS
$(function () {
$("#tracks").children(":not(.placeholder)").each(function (index, elem) {
var cElem = $(elem).children().eq(1).children().eq(0);
$(cElem).click(function () {
alert("before: " + $(cElem).text());
});
});
});
$("#changeIt").click(function () {
$("#tracks").children(":not(.placeholder)").each(function (index, elem) {
var cElem = $(elem).children().eq(1).children().eq(0);
$(cElem).attr('onclick', '').unbind('click');
$(cElem).click(function () {
alert("after: " + $(cElem).text());
});
});
});
I want to hide the detail table when page loaded
but when click on the triangle on master row, it displays
http://demos.kendoui.com/web/grid/detailtemplate.html
that's from the element I detect on firebug.
I suspect you could add a style="display: none;" to the main container for the detailTemplate, but that will probably throw the behavior of the Master Row triangle.
<div class="tabstrip" style="display: none;">
<ul>
<li class="k-state-active">
Orders
</li>
<li>
Contact Information
</li>
</ul>
<div>
<div class="orders"></div>
</div>
<div>
<div class='employee-details'>
<ul>
<li><label>Country:</label>#= Country #</li>
<li><label>City:</label>#= City #</li>
<li><label>Address:</label>#= Address #</li>
<li><label>Home Phone:</label>#= HomePhone #</li>
</ul>
</div>
</div>
</div>
You could instead, just hide it on page load with:
$('tr.k-master-row + tr.k-detail-row').hide();
or, just initialize the grid with the detail rows hidden when databinding occurs (probably the best solution):
//...
detailTemplate: kendo.template($("#template").html()),
detailInit: detailInit,
dataBound: function() {
this.collapseRow(this.tbody.find(">tr.k-master-row"));
},
//...
dataBound: function (e) {
var grid = e.sender;
items.each(function (e) {
var dataItem = grid.dataItem(this);
if (dataItem.SubGroups.length == 0)
grid.tbody.find("tr[data-uid=" + dataItem.uid + "].k-master-row>.k-hierarchy-cell>a").hide();
});