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);
}
});
Related
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
I developed the store locator using open street map and leaflet. The problem is when I want to type in searchbox it will become lagging to finish the word. That store locator read from the CSV file that has 300++ data. Below is the code for the searchbox:
var locationLat = [];
var locationLng = [];
var locMarker;
var infoDiv = document.getElementById('storeinfo');
var infoDivInner = document.getElementById('infoDivInner');
var toggleSearch = document.getElementById('searchIcon');
var hasCircle = 0;
var circle = [];
//close store infor when x is clicked
var userLocation;
$("#infoClose").click(function() {
$("#storeinfo").hide();
if (map.hasLayer(circle)) {
map.removeLayer(circle);
}
});
var listings = document.getElementById('listingDiv');
var stores = L.geoJson().addTo(map);
var storesData = omnivore.csv('assets/data/table_1.csv');
function setActive(el) {
var siblings = listings.getElementsByTagName('div');
for (var i = 0; i < siblings.length; i++) {
siblings[i].className = siblings[i].className
.replace(/active/, '').replace(/\s\s*$/, '');
}
el.className += ' active';
}
function sortGeojson(a,b,prop) {
return (a.properties.name.toUpperCase() < b.properties.name.toUpperCase()) ? -1 : ((a.properties.name.toUpperCase() > b.properties.name.toUpperCase()) ? 1 : 0);
}
storesData.on('ready', function() {
var storesSorted = storesData.toGeoJSON();
//console.log(storesSorted);
var sorted = (storesSorted.features).sort(sortGeojson)
//console.log(sorted);
storesSorted.features = sorted;
//console.log(storesSorted)
stores.addData(storesSorted);
map.fitBounds(stores.getBounds());
toggleSearch.onclick = function() {
//var s = document.getElementById('searchbox');
//if (s.style.display != 'none') {
//s.style.display = 'yes';
//toggleSearch.innerHTML = '<i class="fa fa-search"></i>';
//$("#search-input").val("");
//search.collapse();
//document.getElementById('storeinfo').style.display = 'none';
//$('.item').show();
//} else {
//toggleSearch.innerHTML = '<i class="fa fa-times"></i>';
//s.style.display = 'block';
//attempt to autofocus search input field when opened
//$('#search-input').focus();
//}
};
stores.eachLayer(function(layer) {
//New jquery search
$('#searchbox').on('change paste keyup', function() {
var txt = $('#search-input').val();
$('.item').each(function() {
if ($(this).text().toUpperCase().indexOf(txt.toUpperCase()) != -1) {
$(this).show();
} else {
$(this).hide();
}
});
});
I dont know what is the cause of the lag in the search box. It is something wrong in code or the csv file? Thank you
Every iteration of $('.item').each is causing a layout change because $(this).hide() or $(this).show() causes the item to removed/added to the DOM as the style is set to display:none back and forth. DOM manipulations and the corresponding layout changes are expensive.
You can consider accumulating the changes and doing one batch update to the DOM using a function like appendChild
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.
How do I get Ext JS 3.4 grid's textfield value selected on beforeedit listener function?
'beforeedit' : function(object) {
var rec = gridTilit.store.getAt(object.row);
var colIndex = object.column;
var rowIndex = object.row;
var cm = Ext.getCmp('grid-tilit').getColumnModel();
var valCol = cm.getColumnAt(colIndex);
var count = gridTilit.getStore().getTotalCount();
var cellXtype = valCol.getEditor().getXType();
colname = object.field;
if (cellXtype=="textfield") {
//function to select signle textfield
// cell value to selected must be executed here
} else {
rec.set(colname, "");
}
},
Adding this to function helps:
$("input[type=text]").focus(function() { $(this).select(); });
i got an anchor in the DOM and the following code replaces it with a fancy button. This works well but if i want more buttons it crashes. Can I do it without a for-loop?
$(document).ready(buttonize);
function buttonize(){
//alert(buttonAmount);
//Lookup for the classes
var button = $('a.makeabutton');
var buttonContent = button.text();
var buttonStyle = button.attr('class');
var link = button.attr('href');
var linkTarget = button.attr('target');
var toSearchFor = 'makeabutton';
var toReplaceWith = 'buttonize';
var searchButtonStyle = buttonStyle.search(toSearchFor);
if (searchButtonStyle != -1) {
//When class 'makeabutton' is found in string, build the new classname
newButtonStyle = buttonStyle.replace(toSearchFor, toReplaceWith);
button.replaceWith('<span class="'+newButtonStyle
+'"><span class="left"></span><span class="body">'
+buttonContent+'</span><span class="right"></span></span>');
$('.buttonize').click(function(e){
if (linkTarget == '_blank') {
window.open(link);
}
else window.location = link;
});
}
}
Use the each method because you are fetching a collection of elements (even if its just one)
var button = $('a.makeabutton');
button.each(function () {
var btn = $(this);
var buttonContent = btn.text();
var buttonStyle = btn.attr('class');
var link = btn.attr('href');
var linkTarget = btn.attr('target');
var toSearchFor = 'makeabutton';
var toReplaceWith = 'buttonize';
var searchButtonStyle = buttonStyle.search(toSearchFor);
...
};
the each method loops through all the elements that were retrieved, and you can use the this keyword to refer to the current element in the loop
var button = $('a.makeabutton');
This code returns a jQuery object which contains all the matching anchors. You need to loop through them using .each:
$(document).ready(buttonize);
function buttonize() {
//alert(buttonAmount);
//Lookup for the classes
var $buttons = $('a.makeabutton');
$buttons.each(function() {
var button = $(this);
var buttonContent = button.text();
var buttonStyle = button.attr('class');
var link = button.attr('href');
var linkTarget = button.attr('target');
var toSearchFor = 'makeabutton';
var toReplaceWith = 'buttonize';
var searchButtonStyle = buttonStyle.search(toSearchFor);
if (searchButtonStyle != -1) {
newButtonStyle = buttonStyle.replace(toSearchFor, toReplaceWith);
button.replaceWith('<span class="'
+ newButtonStyle
+ '"><span class="left"></span><span class="body">'
+ buttonContent
+ '</span><span class="right"></span></span>');
$('.buttonize').click(function(e) {
if (linkTarget == '_blank') {
window.open(link);
} else window.location = link;
}); // end click
} // end if
}); // end each
}