Does anyone know if it is possible to omit / hide a column from the filter (list of checkboxes) on KoGrid? If so, how? (I'm hoping there's something that can be done to achieve this in the ColumnDefs property)
(Answering own question, in case it helps others). What I ended up doing, is subscribing to the Grid's showMenu() observable, and hiding elements that pertained to columns with labels that were empty string or only whitespace.
self.Grid().showMenu.subscribe(function (val) {
if (val != true) return;
var colDefId = 0;
self.gridOptions.columnDefs.forEach(function (colDef) {
if (!colDef) return;
if (!/\S/.test(colDef.displayName)) $($('.kgColListItem')[colDefId]).hide();
colDefId++;
});
});
Related
Is there a property or a method that will prevent Vuetify Autocomplete to filter items to display until a certain condition is met, such as 3 character typed? I have a basic solution but I really hope that there is another solution. I don't want anything to show until the end user types a minimum of three characters. I have a solutions such as:
watch: {
search (val) {
if(val.length > 2){
this.minimumCharacter = 'show'
}else{
this.minimumCharacter = 'null'
}
And in my HTML:
<template
v-if="minimumCharacter === 'show'"
slot="item"
slot-scope="{ item, tile }"
>
Surely the Autocomplete has a property somewhere that will handle this. When you have thousands and thousands of records you don't really want everything to show as soon as you type one character. But I've search https://vuetifyjs.com/en/components/autocompletes#autocomplete and unless they call it something that I can not relate its not there.
Surely the Autocomplete has a property somewhere that will handle this. When you have thousands and thousands of records you don't really want everything to show as soon as you type one character. But I've search https://vuetifyjs.com/en/components/autocompletes#autocomplete and unless they call it something that I can not relate its not there.
I cannot find such property, but for me works fine this variant:
watch: {
search (val) {
if(val.length > 2){
//search code
}
P.S. Filter starts working after search, so it doesn't solve current task to prevent search.
You can use filter prop to implement your own filter function that always returns false if text length is less then 3:
(item, queryText, itemText) => {
const hasValue = val => val != null ? val : ''
const text = hasValue(itemText)
const query = hasValue(queryText)
if(queryText < 3) return false;
return text.toString()
.toLowerCase()
.indexOf(query.toString().toLowerCase()) > -1
}
Scenario:
I need to filter out data from the datatable based on the selection that has been made from the user. To implement this I have a tree control which represents the hierarchy of the data in the datatable. When a user unchecks a certain node in the tree. That data should be taken out from the datatable.
Question:
How do I filter "out" data from the datatable?
If I use search() method, it gives me that matched rows and I want the opposite of this. I need to take out the matched rows instead of showing them.
I tried using the following filter function but it gives me the filtered data.
table.column([column number]).data().filter(function (value, index) {});
I would appreciate any help on this.
Thanks
You could implement your own custom search function:
var table = $('#myTable').DataTable();
$.fn.dataTable.ext.search.push(
function(oSettings, aData, iDataIndex) {
var match = true;
$(".checkbox:checked").each(function(index) {
var cb = $(this);
var id = $(this).attr('id');
if (aData.toString().toLowerCase().indexOf(id) >= 0) {
match = false;
} else {
match = true;
}
});
return match;
});
Please see a demo here. Hope it helps.
The simple answer is to invert the filter. i.e. change the filter to return false where it currently returns true and vice versa.
You can also do this with search, by inverting the regex you look for.
I am using slick grid to show JSON data.
On external button click i want highlight specific row based on column values.
Such as highlight row which have cost=75 and venue_id =87 and Impression=268
Got solution :
dataView.getItemMetadata = function (row) {
var item = dataView.getItem(row);
if (item["" + columnName+ ""] == colValue)
{
return { cssClasses: 'highlight' };
}
return null;
}
grid = new Slick.Grid("#myGrid", dataView, myColList, options);
The other suggested option seems to be have heavy load on my system, as my system have thousand of records and a particular row have to highlighted and suggested solution kind of refreshes the whole table. For some reasons it is not working for me.
I got around this by using Slickgrid's flashCell. Even no need of getItemMetadata()
var rowId=dataView.getRowById(idvalue);//id of the row to be highlighted, as slickgrid enforced an id field
grid.scrollRowToTop(rowId);//makes the row visible
grid.getColumns().forEach(function(col){//get all the columns
grid.flashCell(rowId, grid.getColumnIndex(col.id));//flash it
})
Hope this helps to coming to this page for the answer.
What I have is a treegrid populated with values from ajax. Every 30 seconds the store is refreshed and new data is displayed.
I need to change the styling (color or background-color) of a treegrid cell when it's value differs from the old one. The requirement is to make the comparison and styling from javascript.
Any ideas on how this could be done ?
You could use dijit.Tree's getRowStyle method to modify the style dynamically. It will be called whenever a row needs to be rendered.
Something like this might get you started:
(function(){ // closure for private variables
var previousValues = {};
var myTree = ... // lookup dijit.Tree via dijit.byId, or create
myTree.getRowStyle = function(item){
var style = {};
var itemId = myTree.store.getIdentity(item);
var newValue = myTree.store.getValue(item, "MY_ITEM_VALUE");
if(newValue !== null &&
previousValues[itemId] !== null &&
previousValues[itemId] !== newValue) {
style.backgroundColor = "#0000FF";
previousValues[itemId] = newValue;
}
return style;
};
})();
There may be better ways to keep track of the previous values, but since your store is getting changed, I really can't think of one.
I have a page of checkboxes, in some cases more than 100. I'm currently doing this:
$('form[name=myForm] input[name=myCheckbox]').change(function(){
var numChkd = $('input[name=myCheckbox]:checked').size();
console.log(numChkd);
};
But as you could imagine this can get wicked slow. Is there a better way to bind an event to multiple elements? This works, but I want to know if there is a better way?
You can bind an event to the parent container that will wrap all of the checkboxes and then check if the object that caused an event is a checkbox. This way you only bind one event handler. In jQuery you can use $.live event for this.
Don't recount every time a checkbox changes. Just use a global variable, like this:
var CheckboxesTicked = 0;
$(document).ready(function() {
CheckboxesTicked = $(":checkbox:checked").length;
$(":checkbox").change(function() {
if ($(this).is(":checked")) {
CheckboxesTicked += 1
} else {
CheckboxesTicked -= 1
}
});
});
Btw, the documentation states that you'd better use .length instead of .size() performance wise.
You could create a container element (like a Div with no styling) and attach the event handler to the container. That way, when the change() event happens on one of the checkboxes and percolates up the DOM, you'll catch it at the container level. That's one way to make this faster.
You should use .delegate(). One binding on a parent element can replace all the individual bindings on the child elements. It's perfect for this situation (and also solves the problem of attaching behavior to dynamically-added elements, should the need arise).
$('form[name=myForm]').delegate('input[name=myCheckbox]','change', function(){
var numChkd = $(this).siblings(':checked').length; // assuming siblings
console.log(numChkd);
});
This is how I would approach it:
$('form[name=myForm]').each(function() {
var $form = $(this),
$boxes = $form.find('input[name=myCheckbox]');
$form.delegate('input[name=myCheckbox]', 'change', function() {
var numChkd = $boxes.filter(':checked').length;
console.log(numChkd);
});
});
This takes advantage of caching the $boxes selection. It will look for all the boxes when it sets up the event. It uses .delegate() to attach an event to the form which will get fired anytime an child input[name=myCheckbox] creates a change event. In this event handler, you can easily filter the already obtained list of checkboxes by which ones are :checked and get the length of the matched elements. (The documentation for .size() basically states there is no reason to ever use it... It just returns this.length anyway...)
See this fiddle for a working demo
demo: http://jsfiddle.net/kKUdm/
$(':checkbox').change(function(){
if($(this).is(':checked')){
var name = $(this).attr('name');
var value = $(this).val();
console.log(name + ':' + value);
}
});
Var $chks = $(":checkbox");
Var ChkCount =0;
Var chktimer =0;
Function updateChkCount(){
ChkCount = $chks.filter(":checked").length;
$chks.end();
// do something witb ChkCount
}
$chks.bind("check change", function(){
clearInterval(chktimer);
chktimer = setInterval("updateChkCount()",250);
});