I am applying a filter on slick grid data, it changes the number of records in footer but does not refresh the data in table and always show all records.
Code :
$('#shade-number').keyup(function(e) {
// clear on Esc
if (e.which == 27) {
this.value = "";
}
searchList = $.trim(this.value.toLowerCase()).split(' ');
dataViewAdd.setFilter(gridFilter);
gridPo.invalidate();
this.focus();
});
function gridFilter(rec) {
var found;
for (i = 0; i < searchList.length; i += 1) {
found = false;
$.each(rec, function(obj, objValue) {
if (typeof objValue !== 'undefined' && objValue != null
&& objValue.toString().toLowerCase().indexOf(searchList[i]) != -1) {
found = true;
return false; //this breaks the $.each loop
}
});
if (!found) {
return false;
}
}
return true;
}
In table footer it says Showing all 4 rows but in table all records are displayed.
Sounds like you don't have the OnRowCountChanged and OnRowsChanged events hooked up.
You should always start with a working example, such as:
http://6pac.github.io/SlickGrid/examples/example4-model.html
and modify it to your needs. Then if something goes wrong, you can retrace your changes step by step until it works.
Also, being able to post a link to a fully working example is a lot easier to debug. I'd bet the problem is in code not mentioned above.
Related
I have this little piece of code that filters through a list of results and hides the divs that don't match. I am writing this for a PhoneGap iOS application. It works fine on Android, but on iOS for some reason it hides the entire search field as well after typing a few characters, not just the results.
Any idea why? I've stripped it down to almost only the HTML code and jQuery and it's still happening. I tried commenting out the $(this).hide(); part and it stops hiding the search field, so I assume somehow that's the culprit, but I can't figure out why or how to fix this. Been at it for 10 hours straight. Any ideas? Maybe I can target the results some other way?
$('#box_search').keyup(function() {
var valThis = $(this).val().toLowerCase();
if (valThis == "") {
$('#listing-results > .listing_container').show();
} else {
$('#listing-results > .listing_container').each(function() {
var text = ($(this).find('.listing_results_text_name').text() + $(this).find('.listing_results_text_name').data("alt")).toLowerCase();
if (text.indexOf(valThis) >= 0) {
$(this).show();
} else {
$(this).hide();
}
});
};
});
obviously I cant see the html but sometimes it helps to clean the code and just change the logic slightly
var box_search = function(e){
var myIndex = $(this).val();
val = (!myIndex || myIndex==='')?false:myIndex;
if(!myIndex){
$('#listing-results > .listing_container').show();
return;
}
//
$('#listing-results > .listing_container').each(function() {
var text = $(this).find('.listing_results_text_name').text() +
$(this).find('.listing_results_text_name').data("alt")
text = (!text || text==='')?false:text;
text = text.toLowerCase();
if(text.indexOf(myIndex.toLowerCase()) >= 0){
$(this).show();
return;
}
$(this).hide();
});
} //end of function
$('.box_search').keyup(box_search);
I'm using a live search that I modified to run after pressing enter(I have a very large table and it causes the text entry to lag if done on keyUp) and I'm trying to find out a way to make it an exact search instead of just a similar. The reason being I have a column with store numbers starting from 1 to over 7000, if I type in just '1' I get a whole slew of results. I'm new to JQuery and I've tried to play around with it but I feel like I'm getting no where. Any and all help is appreciated.
Here is the code:
$('#search').keyup(function(e) {
if (e.keyCode == 13) {
$(this).trigger("enterKey");
}
});
$("#search").bind("enterKey", function() {
var value = $(this).val();
$("table tr").each(function(index) {
if (index !== 0) {
$row = $(this);
var id = $row.find("td:first").text();
if (id.indexOf(value) !== 0) {
$row.hide();
} else {
$row.show();
}
}
});
});
I'm attempting to clear the children elements on a page whenever a page is changed. However, with the current method of doing so, nothing on the page always changes, the same properties remain. Right now, I have dynamically generated inputs that have different data in them depending on which tab is selected and displays the appropriate core-page (https://www.polymer-project.org/docs/elements/core-elements.html#core-pages). Is there a way to reset the core-page each time so that the different inputs for each tab will show up appropriately? The children.clear() may not be the best approach. Please let me know if you need more information.
#observable int pageChangeCount = 1;
void pageChanged(oldValue, newValue) {
var pages = document.querySelector('core-pages');
pageChangeCount++;
if (page == 0) {
if(pageChangeCount %2 != 0)
{
pages.children.clear();
}
Display(true);
} else if (page == 1) {
if(pageChangeCount %2 == 0)
{
pages.children.clear();
}
Display(false);
}
}
I actually got it by going through all of the elements:
pages.children.removeWhere( (Element e) {
if( e.nodeName != "ELEMENT YOU ARE LOOKING FOR") {
return true;
}
else {
return false;
}
When a SlickGrid is set up with:
enableAddRow: false,
enableCellNavigation: true,
autoEdit: true
and the last column in that SlickGrid is configured with:
editor: null,
focusable: false,
selectable: false
When attempting to tab out of the SlickGrid by tabbing out of the second to last column in the last row, I would expect the focus to be moved to the next focusable element outside of the grid, but it does not.
See this example, and try to tab out of the grid from the last row. I would expect the focus to shift to the textboxes below the grid, but it does not and instead focus is lost while the active cell in the grid is not reset.
Is there a way to fix this? To ensure, when tabbing out of an editable cell that is followed by an uneditable unfocusable cell, that focus is moved out of the grid?
A workaround would be to make the last column focusable: true, but that is not an option since it breaks the user experience forcing the user to tab through an uneditable cell before reaching an editable cell.
Can you try below if it works for you.
yourGrid.onKeyDown.subscribe(function(event) {
if (event.keyCode === 9 && event.shiftKey === false) { // check its only tab not shift tab
if (yourGrid.getActiveCell().cell === lastCol) { // check if the current cell is the last editable column
$("#b").trigger('focus'); // this or below line should work for focus, "b" is your text input
document.getElementById("b").focus(); // either this or above line
event.stopImmediatePropagation();
}
}
});
UPDATE
Fixed it by changing the code in the plugin. The issue were coming and I think its a bug in the Slickgrid. After the change in below function your example is working in my local. Please replace the below function code and let me know if this is working for you.
function setActiveCellInternal(newCell, opt_editMode) {
var lastActiveCell = null;
var lastActiveRow = null;
if (activeCellNode !== null) {
makeActiveCellNormal();
$(activeCellNode).removeClass("active");
if (rowsCache[activeRow]) {
$(rowsCache[activeRow].rowNode).removeClass("active");
}
var lastActiveCell = getCellFromNode(activeCellNode); // my added
lastActiveRow = activeRow;
}
var activeCellChanged = (activeCellNode !== newCell);
activeCellNode = newCell;
if (activeCellNode != null) {
//alert('1-3')
activeRow = getRowFromNode(activeCellNode.parentNode);
activeCell = activePosX = getCellFromNode(activeCellNode);
if (opt_editMode == null) {
opt_editMode = (activeRow == getDataLength()) || options.autoEdit;
}
$(activeCellNode).addClass("active");
$(rowsCache[activeRow].rowNode).addClass("active");
//alert(options.editable +' - '+ opt_editMode);
if (options.editable && opt_editMode && isCellPotentiallyEditable(activeRow, activeCell) && ((lastActiveCell !== activeCell || lastActiveRow !== activeRow) ) ) { // not sure if need acheck on row also
clearTimeout(h_editorLoader);
if (options.asyncEditorLoading) {
h_editorLoader = setTimeout(function () {
makeActiveCellEditable();
}, options.asyncEditorLoadDelay);
} else {
makeActiveCellEditable();
}
//alert('1-4')
}
} else {
activeRow = activeCell = null;
//alert('1-5')
}
if (activeCellChanged) {
//alert('1-6')
trigger(self.onActiveCellChanged, getActiveCell());
}
}
See the link below.
https://github.com/mleibman/SlickGrid/issues/104
Since you cannot tab out of the last cell, you can try committing the change when you click on save changes
if (Slick.GlobalEditorLock.isActive() &&
!Slick.GlobalEditorLock.commitCurrentEdit()) return;
Will that work?
Can you try to replace the gotoRight function with below code in slick.grid.js file and try.
function gotoRight(row, cell, posX) {
if (cell >= columns.length) {
return null;
}
do {
cell += getColspan(row, cell);
}
while (cell < columns.length && !canCellBeActive(row, cell));
if(cell == columns.length && !canCellBeActive(row, cell)) {
setActiveCell(row,cell-1)
}
if (cell < columns.length) {
return {
"row": row,
"cell": cell,
"posX": cell
};
}
return null;
}
So, I have some faux checkboxes (so I could style them) that work with jQuery to act as checked or not checked. There are a number of faux checkboxes in my document, and for each one I have a click function:
var productInterest = [];
productInterest[0] = false;
productInterest[1] = false;
productInterest[2] = false;
// here is one function of the three:
$('#productOne').click(function() {
if (productInterest[0] == false) {
$(this).addClass("checkboxChecked");
productInterest[0] = true;
} else {
$(this).removeClass("checkboxChecked");
productInterest[0] = false;
}
});
The problem seems to be that there is an error in the if statement, because it will check, but not uncheck. In other words it will add the class, but the variable won't change so it still thinks its checked. Anybody have any ideas? Thanks for your help.
UPDATE: So, I need to show you all my code because it works in the way I supplied it (thanks commenters for helping me realize that)... just not in the way its actually being used on my site. so below please find the code in its entirety.
Everything needs to happen in one function, because the UI and data for each checkbox need to be updated at once. So here is the complete function:
$('input[name=silkInterest]').click(function() { // they all have the same name
var silkInterest = [];
silkInterest[0] = false;
silkInterest[1] = false;
silkInterest[2] = false;
if ($(this).is('#silkSilk')) { // function stops working because the .is()
if (silkInterest[0] == false) {
$(this).addClass("checkboxChecked");
silkInterest[0] = true;
} else {
$(this).removeClass("checkboxChecked");
silkInterest[0] = false;
}
alert(silkInterest[0]);
}
if ($(this).is('#silkAlmond')) {
if (silkInterest[1] == false) {
$(this).addClass("checkboxChecked");
silkInterest[1] = true;
} else {
$(this).removeClass("checkboxChecked");
silkInterest[1] = false;
}
}
if ($(this).is('#silkCoconut')) {
if (silkInterest[2] == false) {
$(this).addClass("checkboxChecked");
silkInterest[2] = true;
} else {
$(this).removeClass("checkboxChecked");
silkInterest[2] = false;
}
}
var silkInterestString = silkInterest.toString();
$('input[name=silkInterestAnswer]').val(silkInterestString);
// This last bit puts the code into a hidden field so I can capture it with php.
});
I can't spot the problem in your code, but you can simply use the class you're adding in place of the productInterest array. This lets you condense the code down to a single:
// Condense productOne, productTwo, etc...
$('[id^="product"]').click(function() {
// Condense addClass, removeClass
$(this).toggleClass('checkboxChecked');
});
And to check if one of them is checked:
if ($('#productOne').hasClass('checkboxChecked')) {...}
This'll make sure the UI is always synced to the "data", so if there's other code that's interfering you'll be able to spot it.
Okay, just had a palm to forehead moment. In regards to my revised code- the variables get reset everytime I click. That was the problem. Duh.