Develop Reference

Extjs 6 - grid search

I try to apply this example with another way. When I try it on console.log it seems run without error but when I do it on function(){}, it turns error all grid method is undefined such:
Uncaught TypeError: Cannot call method 'getView' of undefine.
The function:
onTextFieldChange = function () {
var grid = Ext.getCmp('grid'),
value = Ext.getCmp('gridfield'),
view = grid.getView(),
columns = grid.getColumns();
view.refresh();
grid.searchValue = value.getValue();
grid.matches = [];
grid.currentIndex = null;
if (grid.searchValue !== null) {
grid.store.each(function (record, index) {
var node = view.getNode(record),
count = 0;
if (node) {
Ext.Array.forEach(columns, function (column) {
var cell = Ext.fly(node).down(column.getCellInnerSelector(), true),
matches,
cellHTML,
seen;
if (cell) {
matches = cell.innerHTML.match(grid.tagsRe);
cellHTML = cell.innerHTML.replace(grid.tagsRe, grid.tagsProtect);
cellHTML = cellHTML.replace(grid.searchRegExp, function (m) {
++count;
if (!seen) {
grid.matches.push({
record: record,
column: column
});
seen = true;
}
return '<span class="' + grid.matchCls + '" style="font-weight: bold;background-color: yellow;">' + m + '</span>';
}, grid);
Ext.each(matches, function (match) {
cellHTML = cellHTML.replace(grid.tagsProtect, match);
});
// update cell html
cell.innerHTML = cellHTML;
}
});
}
});
}
};
The event:
xtype: 'textfield',
name: 'searchField',
id: 'txtfield',
hideLabel: true,
width: 200,
change: onTextFieldChange()
Any suggestions?

I answer my own question if there is none, this is onTextFieldChange() method
onTextFieldChange = function () {
var me = Ext.getCmp('grid'),
count = 0;
me.view.refresh();
me.searchValue = getSearchValue();
me.indexes = [];
me.currentIndex = null;
if (me.searchValue !== null) {
me.searchRegExp = new RegExp(me.searchValue, 'g' + (me.caseSensitive ? '' : 'i'));
me.store.each(function (record, idx) {
var td = Ext.fly(me.view.getNode(idx)).down('td'),
cell, matches, cellHTML;
while (td) {
cell = td.down('.x-grid-cell-inner');
matches = cell.dom.innerHTML.match(me.tagsRe);
cellHTML = cell.dom.innerHTML.replace(me.tagsRe, me.tagsProtect);
// populate indexes array, set currentIndex, and replace wrap matched string in a span
cellHTML = cellHTML.replace(me.searchRegExp, function (m) {
count += 1;
if (Ext.Array.indexOf(me.indexes, idx) === -1) {
me.indexes.push(idx);
}
if (me.currentIndex === null) {
me.currentIndex = idx;
}
return '<span class="' + me.matchCls + '">' + m + '</span>';
});
// restore protected tags
Ext.each(matches, function (match) {
cellHTML = cellHTML.replace(me.tagsProtect, match);
});
// update cell html
cell.dom.innerHTML = cellHTML;
td = td.next();
if (me.currentIndex !== null) {
me.getSelectionModel().select(me.currentIndex);
}
}
}, me);
}
// no results found
if (me.currentIndex === null) {
me.getSelectionModel().deselectAll();
}
};

How to make empty rows not visible in dojo Datagrid

I have 2 header rows in my grid.The problem is, that because of this, there is another row in my Grid, unter my row with data. Here's my grid after rendering:
grid = new dojox.grid.DataGrid({
id : OwnId,
store : gridStore,
onStyleRow : function (row) {
if (row.index === 14) {
var color = "color:red;";
row.customStyles += color;
}
},
structure : structure,
onHeaderCellClick: function(e) {
if (!dojo.hasClass(e.cell.id, "staticHeader")) {
e.grid.setSortIndex(e.cell.index);
e.grid.onHeaderClick(e);
}
},
onHeaderCellMouseOver: function(e) {
if (!dojo.hasClass(e.cell.id, "staticHeader")) {
dojo.addClass(e.cellNode, this.cellOverClass);
}
}
});
So how can I eliminate/hide this empty rows ? Any Suggestions?
I'm creating structure like this:
var _gridStyle = 'text-align: center;';
var _dateColumn = true;
var _gridStructure = [];
console.log(params);
if (params.connectorNames !== "undefined") {
// setting grid structure
_gridStructure.push([]);
for (var i = 0; i < params.connectorNames.length; i++) {
_gridStructure[0].push({
name : "test",
headerClasses : "staticHeader"
});
}
_gridStructure.push([]);
for (var i = 0; i < metricNames.length; i++) {
// if data column is required
if (_dateColumn === true && i === 0) {
_gridStructure[1].push({
field : "Datum",
name : "Datum",
width : "5%",
styles : _gridStyle
});
_dateColumn = false;
i--;
} else {
_gridStructure[1].push({
field : metricNames[i],
name : metricNames[i].replace("ANZAHL_", ""),
styles : _gridStyle,
});
}
}
}

okay I added
onStyleRow: function(e) {
dojo.style(e.node.children[0].children[0].rows[0],'display','none');
}
to my grid... and the empty cells are gone. Change index of rows[0] to "1" if the first datacolumn is filled with data.

Populate selected values using select2 multiple select

I have a select2 to select multiple options from a dropdown, i also have it selecting multiple options. Is there anyway of populating the input field with values that are selected on page load by changing its value in some way, so when the page is loaded there are options already selected.
part of my code as follows:
$('#fruitSelect').select2({
multiple: true,
placeholder: "Select fruits...",
data: FRUIT_GROUPS,
query: function (options) {
var selectedIds = options.element.select2('val');
var data = jQuery.extend(true, {}, FRUIT_GROUPS);
var selectableGroups = $.map(data, function (group) {
var areAllChildrenSelected = true,
parentMatchTerm = false,
anyChildMatchTerm = false;
if (group.text.toLowerCase().indexOf(options.term.toLowerCase()) >= 0) {
parentMatchTerm = true;
}
var i = group.children.length
while (i--) {
var child = group.children[i];
if (selectedIds.indexOf(child.id) < 0) {
areAllChildrenSelected = false;
};
if (options.term == '' || (child.text.toLowerCase().indexOf(options.term.toLowerCase()) >= 0)) {
anyChildMatchTerm = true;
}
else if (!parentMatchTerm) {
var index = group.children.indexOf(child);
if (index > -1) {
group.children.splice(index, 1);
};
};
};
return (!areAllChildrenSelected && (parentMatchTerm || anyChildMatchTerm)) ? group : null;
});
options.callback({ results: selectableGroups });
}
}).on('select2-selecting', function (e) {
var $select = $(this);
if (e.val == '') {
e.preventDefault();
$select.select2('data', $select.select2('data').concat(e.choice.children));
$select.select2('close');
}
});
JS Fiddle

How to edit this table filter script to filter by selected columns?

I am using this script:
(function(document) {
'use strict';
var LightTableFilter = (function(Arr) {
var _input;
function _onInputEvent(e) {
_input = e.target;
var tables = document.getElementsByClassName(_input.getAttribute('data-table'));
Arr.forEach.call(tables, function(table) {
Arr.forEach.call(table.tBodies, function(tbody) {
Arr.forEach.call(tbody.rows, _filter);
});
});
}
function _filter(row) {
var text = row.textContent.toLowerCase(), val = _input.value.toLowerCase();
row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';
}
return {
init: function() {
var inputs = document.getElementsByClassName('light-table-filter');
Arr.forEach.call(inputs, function(input) {
input.oninput = _onInputEvent;
});
}
};
})(Array.prototype);
document.addEventListener('readystatechange', function() {
if (document.readyState === 'complete') {
LightTableFilter.init();
}
});
})(document);
and this input:
<input type="search" class="light-table-filter" data-table="order-table">
When I type something in the filter input, it filters a table so I see only entries I have in there matching the text. Like this: http://codepen.io/chriscoyier/pen/tIuBL
How can I edit this script so it does not filter by the whole table, but instead only by some selected columns? Like maybe the first three columns is what I need to filter through.

I would add data attribute to configure what columns are searchable. For example HTML could be like this:
<input type="search" class="light-table-filter"
data-table="order-table"
data-table-columns="0,2" placeholder="Filter">
In the above config indexes 0 and 2 tell that "Name" and "Phone" columns are filterable.
Then in JS part you can do something like this (only modified functions):
function _onInputEvent(e) {
_input = e.target;
var tables = document.getElementsByClassName(_input.getAttribute('data-table'));
var columns = (_input.getAttribute('data-table-columns') || '').split(',');
Arr.forEach.call(tables, function (table) {
Arr.forEach.call(table.tBodies, function (tbody) {
Arr.forEach.call(tbody.rows, function (row) {
_filter(row, columns);
});
});
});
}
function _filter(row, columns) {
var text, val = _input.value.toLowerCase();
if (columns.length) {
columns.forEach(function (index) {
text += ' ' + row.cells[index].textContent.toLowerCase();
});
} else {
text = row.textContent.toLowerCase();
}
row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';
}
Demo: http://codepen.io/anon/pen/zxVagm

I would suggest you add an array with the column names you want to apply the filter and in the _filter fuction check if the row name or title is in array with the columns to apply the filter.
I don't know JavaScript so much the code would be like below with the rigth field names:
var _input = ...;
var columnsToApplyFilter = ["column 1", "column 2"];
función _filter(...) {
if (columnsToApplyFilter.contains(row.columnTitle) {
// apply filter
}
}

You can rewrite the _onInputEvent and slice the number of rows with Array.slice.
Adding a data attribute that determine what rows to slice seems like a good idea
<input type="search" data-count="[0,3]" class="light-table-filter" data-table="order-table" data-count="[0,3]" placeholder="Filter">
Where, 0 is the start index, in this case the first row, and 3 is the end index, non-inclusive, so [0,3] would only filter on row 1, 2 and 3 (index 0,1 and 2).
And, removing a lot of the strangeness ?
(function (document) {
'use strict';
var LightTableFilter = (function (Arr) {
function _onInputEvent(e) {
var selector = '.' + e.target.getAttribute('data-table') + ' tbody tr';
var count = JSON.parse(e.target.getAttribute('data-count'));
var rows = document.querySelectorAll(selector);
Arr.slice.apply(rows, count).forEach(function (row) {
_filter(row, e.target)
});
}
function _filter(row, _input) {
var text = row.textContent.toLowerCase(),
val = _input.value.toLowerCase();
row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';
}
return {
init: function () {
var inputs = document.querySelectorAll('.light-table-filter');
Arr.forEach.call(inputs, function (input) {
input.addEventListener('input', _onInputEvent, false);
});
}
};
})(Array.prototype);
document.addEventListener('readystatechange', function () {
if (document.readyState === 'complete') {
LightTableFilter.init();
}
});
})(document);

slickgrid collapsing tutorial

I am currently working with example 5: http://mleibman.github.io/SlickGrid/examples/example5-collapsing.html so that I can implement collapsing in my own slickgrid. However I am having trouble doing this and was wondering if there is some tutorial I can look at or if someone has done this and can give me a few pointers. The following is some test code that I have been working with to get this to work, without a lot of luck
<script>
var grid;
var data = [];
//this does the indenting, and adds the expanding and collapsing bit - has to go before creating colums for the grid
var TaskNameFormatter = function (row, cell, value, columnDef, dataContext) {
value = value.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">");
var spacer = "<span style='display:inline-block;height:1px;width:" + (15 * dataContext["indent"]) + "px'></span>";
var idx = dataView.getIdxById(dataContext.id);
if (data[idx + 1] && data[idx + 1].indent > data[idx].indent) {
if (dataContext._collapsed) {
return spacer + " <span class='toggle expand'></span> " + value;
} else {
return spacer + " <span class='toggle collapse'></span> " + value;
}
} else {
return spacer + " <span class='toggle'></span> " + value;
}
};
var columns = [
{id: "title", name: "title", field: "title", width: 150, formatter: TaskNameFormatter},
{id: "duration", name: "Duration", field: "duration"},
{id: "start", name: "Start", field: "start"},
{id: "finish", name: "Finish", field: "finish"}
];
var options = {
enableColumnReorder: false
};
var searchString = "";
function myFilter(item) {
if (searchString != "" && item["title"].indexOf(searchString) == -1) {
return false;
}
if (item.parent != null) {
var parent = data[item.parent];
while (parent) {
if (parent._collapsed || (searchString != "" && parent["title"].indexOf(searchString) == -1)) {
return false;
}
parent = data[parent.parent];
}
}
return true;
}
$(function () {
var indent = 0;
var parents = [];
for (var i = 0; i < 3; i++) {
var d = (data[i] = {});
var parent;
d["id"] = "id_" + i;
if (i===0){
d["title"] = "1st Schedule";
}else if(i===1){
d["title"] = "1st Schedule Late";
}else {
d["title"] = "1st Schedule Early Leave";
}
if (i===0){
parent =null;
}
if (i===1){
parent = parents[parents.length - 1];
indent++;
}
if (i===2){
indent++;
parents.push(1);
}
if (parents.length > 0) {
parent = parents[parents.length - 1];
} else {
parent = null;
}
d["indent"] = indent;
d["parent"] = parent;
d["duration"] = "5 days";
d["start"] = "01/01/2013";
d["finish"] = "01/01/2013";
}
/* **************Adding DataView for testing ******************/
dataView = new Slick.Data.DataView();
dataView.setItems(data);
dataView.setFilter(myFilter); //filter is needed to collapse
/* ************** DataView code end ************************* */
grid = new Slick.Grid("#myGrid", dataView, columns, options);
//this toggles the collapse and expand buttons
grid.onClick.subscribe(function (e, args) {
if ($(e.target).hasClass("toggle")) {
var item = dataView.getItem(args.row);
if (item) {
if (!item._collapsed) {
item._collapsed = true;
} else {
item._collapsed = false;
}
dataView.updateItem(item.id, item);
}
e.stopImmediatePropagation();
}
});
//this is needed for collapsing to avoid some bugs of similar names
dataView.onRowsChanged.subscribe(function (e, args) {
grid.invalidateRows(args.rows);
grid.render();
});
})
</script>

I strongly suggest you to look into the grouping example instead, it's also with collapsing but is made for grouping, which is 90% of what people want and since couple months can also do multi-column grouping. You can see here the SlickGrid Example Grouping then click on these buttons (1)50k rows (2)group by duration then effort-driven (3)collapse all groups...then open first group and you'll see :)
As for your code sample, I replaced the example with your code and it works just as the example is...so?