w2ui version 2, how can I get sellected cell name onContextMenuClick - javascript

I'm using w2ui version 2 and I have
let row = '';
let cell = '';
let grid = new w2grid({
name: 'grid'
...
...
,onClick: function (event) {
event.onComplete = function () {
row = event.detail.recid;
cell = event.detail.column;
console.log("onClick cell : " + cell );
}
}
...
...
}
in my code and it is working fine, but the code below is not working.
,onContextMenuClick: function (event) {
event.onComplete = function () {
row = event.detail.recid;
cell = event.detail.column;
console.log("onClick onContextMenuClick : " + cell);
}
}
boot is the part of same grid code.
How can I get selected cell onContextMenuClick. So I can add some specific Context Menu events to my w2ui grid.
I did try looping all sub objects of event
const keys = Object.keys(event);
for (let i = 0; i < keys.length; i++) {
console.log("onContextMenuClick event : " + keys[i] + ': ' + event[keys[i]]);
}
so I can find is there any data about cell, no luck.
var sel = grid.getSelection()[0];
only returns recid not any thing about cell.
thanks

Related

How I can get object from another function

I'm trying to do a Shopping cart with HTML and JS. So I'm using (https://www.smashingmagazine.com/2019/08/shopping-cart-html5-web-storage/).
In my function save(), I have,
`function save(id, title, price) {
// var button = document.getElementById('button');
// button.onclick=function(){
// var test = localStorage.setItem('test', id);
window.location.href='/panier'
var obj = {
title: title,
price: price
};
localStorage.setItem(id, JSON.stringify(obj));
var test = localStorage.getItem(id);
var getObject = JSON.parse(test);
console.log(getObject.title);
console.log(getObject.price);
}`
so to get "title for example I don't have problem in my function save(), but in my function doShowAll(),
function CheckBrowser() {
if ('localStorage' in window && window['localStorage'] !== null) {
// We can use localStorage object to store data.
return true;
} else {
return false;
}
}
function doShowAll() {
if (CheckBrowser()) {
var key = "";
var id = localStorage.getItem(id);
var list = "<tr><th>Item</th><th>Value</th></tr>\n";
var i = 0;
//For a more advanced feature, you can set a cap on max items in the cart.
for (i = 0; i <= localStorage.length-1; i++) {
key = localStorage.key(i);
list += "<tr><td>" + key + "</td>\n<td>"
+ localStorage.getItem(key) + "</td></tr>\n";
}
//If no item exists in the cart.
if (list == "<tr><th>Item</th><th>Value</th></tr>\n") {
list += "<tr><td><i>empty</i></td>\n<td><i>empty</i></td></tr>\n";
}
//Bind the data to HTML table.
//You can use jQuery, too.
document.getElementById('list').innerHTML = list;
} else {
alert('Cannot save shopping list as your browser does not support HTML 5');
}
}
I can't to get my object.
I have tried:
if (CheckBrowser()) {
var key = "";
var id = localStorage.getItem(id);
var getObject = JSON.parse(test);
}
var list = "<tr><th>Item</th><th>Value</th></tr>\n";
var i = 0;
//For a more advanced feature, you can set a cap on max items in the cart.
for (i = 0; i <= localStorage.length-1; i++) {
key = localStorage.key(i);
list += "<tr><td>" + key + "</td>\n<td>" + getObject.title
+ localStorage.getItem(key) + "</td></tr>\n";
}
but when I add something else than key or localStorage.getItem(key) in "list +=" nothing is displayed in my html view.
So I just Want to display data from my object in the PHP array in doShowAll() function.
Hoping to have clear and wainting a reply. Thank you

Append two values in JavaScript

var descriptionInput;
var tbl = $(document.getElementById('21.125-mrss-cont-none-content'));
tbl.find('tr').each(function () {
$(this).find("input[name$='6#if']").keypress(function (e) {
if (e.which == 13) {
descriptionInput = $(this).val();
$(this).val(descriptionInput);
$(document.getElementById('__AGIM0:U:1:4:2:1:1::0:14')).val(descriptionInput);
}
console.log(descriptionInput);
});
});
});
The function above gets an input value from a field in a set of rows using jQuery .val()
var table = document.getElementById('DYN_6000-LISTSAPLMEGUI-tab');
var t = table.rows.length;
//getting current blank cell ID and upping the blank cell ID to the new last cell
var new_cell_id = table.rows.item(t-1).id;
var old_cell_id = "DYN_6000-LISTSAPLMEGUI-key-" + t;
table.rows.item(t - 1).id = old_cell_id;
table.rows.item(t - 1).onmouseover = function () { showItemDetailDropDown_hover(old_cell_id); };
table.rows.item(t - 1).onmouseout = function () { showItemDetailDropDown_hover(old_cell_id); };
table.rows.item(t - 1).onclick = function () { showItemDetailDropDown_click(old_cell_id); };
//create new row and table
var drop_down_height = document.getElementById('DYN_6000-LISTSAPLMEGUI-scrl').style.height;
document.getElementById('DYN_6000-LISTSAPLMEGUI-scrl').style.height = (parseInt(drop_down_height.replace("px", "")) + 18) + "px";
var new_row = table.insertRow(t-1);
var new_cell = new_row.insertCell(0);
new_row.insertCell(1);
//set new row and cell properties
new_row.id = new_cell_id;
new_row.classList.add('urNoUserSelect');
new_row.style.width = "100%";
new_row.style.height = "18px";
new_row.onmouseover = function () { showItemDetailDropDown_hover(new_cell_id); };
new_row.onmouseout = function () {showItemDetailDropDown_hover(new_cell_id); };
new_row.onclick = function () {showItemDetailDropDown_click(new_cell_id);};
new_cell.classList.add('urIlb2I');
new_cell.classList.add('urColorTxtStandard');
var new_item = t;
new_cell.innerHTML = "[ " + new_item + " ]";
var zyx = "grid#21.125#" + row + ",2#if";
document.getElementById(zyx).value = new_item;
document.getElementById('__AGIM0:U:1:4:2:1:1::0:14').value = new_cell.innerHTML;
checkButton('keyboard');
This JS function is part of an if else statement that checks if there is a new value in each row and adds a sequential number to a dropdown item menu below the table. My question is: How do I append or concatenate the first value (description) into the dropdown menu after the number? For example,
[ 1 ] descriptionInput (the value)
Everything works I just don't know how to pass the jQuery function back to JS or append each value.

Insert a new row after the selected row in JQuery

I have a requirement to insert a new row after the selected row. The code which I have inserts a new row at the last which should only happen if user has not selected any row.
strGridId = test_ItemCollection_DefaultGridId(strGridId);
var grid = jQuery('#' + strGridId);
var columnModel = grid.jqGrid('getGridParam', 'colModel');
var currentItemCollection = test_ItemCollection_Get(strGridId);
var baseAddItem = function() {
var newTItem = proj.page.createTItem(currentItemCollection.strJSOName, strGridId, true);
newTItem.setUpdateStatus(UPDATESTATUS.ADD);
newTItem.set('transientItem', 1); // just created this item
// pre add item event
var evt = new TEvent(EVENT_PRE_ADD_ITEM, test_ItemCollection_Get(strGridId));
evt.strGridId = strGridId;
evt.newItem = newTItem;
if (!test_ItemCollection_fireEvent(evt)) {
return false;
}
currentItemCollection.items.push(newTItem);
var rowData = new Object();
for (var iGridLayout = 0; iGridLayout < columnModel.length; iGridLayout++) {
if (test_ItemCollection_IsNotJQGridColumn(columnModel[iGridLayout].name)) {
rowData[columnModel[iGridLayout].name] = test_ItemCollection_EncodeCellValue(strGridId, currentItemCollection.items.length-1, columnModel[iGridLayout], test_ItemCollection_GetItemDisplayValue(columnModel[iGridLayout], newTItem));
}
}
grid.jqGrid('addRowData', ''+ ( currentItemCollection.items.length-1), rowData ); // convert to string for adding 0 item
test_ItemCollection_selectRow(strGridId, '' + (currentItemCollection.items.length - 1) );
// post add item event
var evt2 = new TEvent(EVENT_POST_ADD_ITEM, test_ItemCollection_Get(strGridId));
evt2.strGridId = strGridId;
evt2.newItem = newTItem;
test_ItemCollection_fireEvent(evt2);
test_ItemCollection_AdjustGridHeight(strGridId);
return true;
};
How can I achieve this? Any help will be appreciated. Thanks
you can use .insertAfter() function of jQuery. For more details follow this link jQuery insertAfter
Assuming you have a table with id yourTable and every row that have been selected has a class of selectedRow
Add a button with id button and click it to add a new row:
$(document).on('click', '#button', function() {
var selRow = $('table#yourTable').find('tr.selectedRow');
var sel = selRow.length;
var newRow = '<tr><td>This is a new row</td></tr>';
if (sel > 0) {
selRow.after(newRow);
} else {
$('table#yourTable > tbody').append(newRow);
}
});

How to get selected row data from nested row in Jqwidgets

I am using JqWidgets to generate nested grid. In my grid I am having context menu.
Here is my Nested grid details:
To show team, associated users information.
Now my target is to get id column value when user will click any option from context menu.
I tried no of approach to get it. But each time it is returning undefined.
Can you please help me to find it ?
Below is my attempts
Approach-1
jQuery("#teamMenu").on('itemclick', function (event) {
var args = event.args;
var rowindex = jQuery("#teamGrid").jqxGrid('getselectedrowindex');
if (jQuery.trim(jQuery(args).text().trim()) == "View Details") {
editrow = rowindex;
jQuery("#rowId").val(editrow);
var dataRecord = jQuery("#teamGrid").jqxGrid('getrowdata', editrow);
alert('teamId: ' +data.teamId); // here I am getting undefined
}
}
Approach-2
jQuery("#teamMenu").on('itemclick', function (event) {
var args = event.args;
var rowindex = jQuery("#teamGrid").jqxGrid('getselectedrowindex');
if (jQuery.trim(jQuery(args).text().trim()) == "View Details") {
editrow = rowindex;
jQuery("#rowId").val(editrow);
var selectedRowData = jQuery('#teamGrid').jqxGrid('getrowdata', getselectedrowindexes[0]);
alert('teamId: ' + selectedRowData.teamId); // here I am getting undefined
}
}
Approach-3
jQuery("#teamMenu").on('itemclick', function (event) {
var args = event.args;
var rowindex = jQuery("#teamGrid").jqxGrid('getselectedrowindex');
if (jQuery.trim(jQuery(args).text().trim()) == "View Details") {
editrow = rowindex;
jQuery("#rowId").val(editrow);
var selectedRowData = jQuery('#teamGrid').jqxGrid('getrowdata', event.args.rowindex);
alert('teamId: ' + selectedRowData.teamId); // each time I am getting 1st reord ID value
}
}
I had same issue in program
when use try to get selectedrowindex jQuery("#teamGrid").jqxGrid('getselectedrowindex') it's always return -1.
in my case I have set selectionmode: 'multiplecellsadvanced'
after remove this it's start working and jQuery("#teamGrid").jqxGrid('getselectedrowindex') returning select row index

How to send parameters to onclick function in javascript

I need to pass row parameters to my onclick function.
this is my code:
function renderHostTableRowJob (dataTable) {
for (var i in dataTable) {
var notification = dataTable[i];
var row = document.createElement("tr");
var cell = document.createElement("td");
cell.innerText = notification["Name"];
row.appendChild(cell);
var cell = document.createElement("td");
cell.innerText = notification["State"];
row.appendChild(cell);
var cell = document.createElement("td");
cell.innerText = (notification["NotificationReceived"] === true) ? "Received" : "Missing";
row.appendChild(cell);
row.onclick = function() {alert(notification["Name"]);};
$("#" + notification["Client"] + "_TableJobDetails > #" + notification["Client"] + notification["HostFormated"] + "_TableBodyJobDetails")[0].appendChild(row);
}
}
At the moment all my row.onclick = function() {alert(notification["Name"]);}; are returning the value for the last iteration in my loop...
QUESTION: How can I send my values to the click event on each iteration?
thanks
Capture notification as a parameter to an anonymous function. Since it looks like you’re using jQuery, you can use jQuery.each, which will simplify your iteration and as a side effect capture it:
$.each(dataTable, function(index, notification) {
// ...
});
By the way, if you are using jQuery, you can write your code more concisely:
var row = $('<tr>').click(function() {
alert(notification.Name);
});
$('<td>').text(notification.Name).appendTo(row);
$('<td>').text(notification.State).appendTo(row);
$('<td>').text(notification.NotificationReceived ? 'Received' : 'Missing').appendTo(row);
row.appendTo('#' + notification.Client + '_TableJobDetails > ' +
'#' + notification.Client + notification.HostFormated + '_TableBodyJobDetails');
Further, if your IDs are unique (as they should be), you need not specify the whole hierarchy; just use
row.appendTo('#' + notification.Client + notification.HostFormated + '_TableBodyJobDetails');
Also, while it is a larger change in your code, consider using delegation with on.
I got it working with the code below:
row.onclick = (function() {
var details = notification;
return function() {
showModalJobDetails(details);
}
})();

Categories