If I apply groupField property in the grid and store, extjs will automatically sort records by groupField.
For example: http://dev.sencha.com/deploy/ext-4.0.0/examples/grid/group-summary-grid.html, it used 'project' as groupField.
My Question is How can I add an extra row, which does not belong to any group, into a grid with groupField. (Like this: http://i59.tinypic.com/30s973l.jpg)
By default group is made for each value from groupField, also for empty groupField (but it appears first). If it is enough for you then you don't have to do anything.
Fiddle: http://jsfiddle.net/tme462tj/
When you want to have behavior like on attached image, then some work has to be done.
To put empty value at the end, you can create convert function for model field (eg: convert: function(v) { return v ? v : defaultDepartment; }). If you want to hide header and summary for this empty group, you can attach event listener to viewready event and hide them using styles:
viewready: function() {
var els = this.getEl().query('.x-grid-group-hd');
els = Ext.Array.filter(els, function(e) { return e.textContent.trim() == defaultDepartment; });
if (els.length !== 1) {
return;
}
var header = Ext.fly(els[0]);
header.setStyle('display', 'none');
var summary = header.up('.x-group-hd-container').down('.x-grid-row-summary');
if (summary) {
summary.setStyle('display', 'none');
}
}
Fiddle: http://jsfiddle.net/hdyokgnx/1/
As per my comment on the accepted solution, this revision makes the grouping header hide permanently for the duration of that grid view.
This solves my problem of needing a grouping grid but with one group that does not have a group header row.
store.load
({
params :
{
arg1 : 1
,arg2 : '2'
}
,callback : function( records, operation, success )
{
var els = me.theGrid.getEl().query('.x-grid-group-hd');
els = Ext.Array.filter( els, function(e)
{
return e.textContent.trim().includes( "*** A SUBSTRING IN GROUPING FIELD ***" );
});
if (els.length !== 1)
{
return;
}
var header = Ext.fly(els[0]);
header.setStyle('display', 'none');
var summary = header.up('.x-group-hd-container').down('.x-grid-row-summary');
if (summary)
{
summary.setStyle('display', 'none');
}
}
});
Related
I create a grid and a toolbar with Two Menu of menuCheckItem. When i check the menuCheckItem the grid filters even with multiple values and multiple columns.
This working fine, as I have created grid 1st and then the toolbar
this.up('') // Used Instead of Ext.getCmp()
Working FIDDLE - https://fiddle.sencha.com/#view/editor&fiddle/2lop
Now I am trying to create same toolbar along with Menu separately on top 1st and then create grid at below. But while doing this, nly Multiple values is working.
I am trying to filter grid with multiple values as well as multiple columns.
Few things i tried -
// Only Filters One Value at a time with each Columns
store.queryBy(function(record,id){
return (record.get('name') == someValue && record.get('phone') == otherValue);
});
and
// Filters Many Columns with Single Value
filter.add(
property : name, phone
value : "somevalue"
operator : "OR"
);
Is there any way to implement Toolbar 1st and then grid ? And Filter grid with many values and columns simultaneously ?
In this FIDDLE i remade a function(checkchange), which is universal , can be put separately and you'll be able to attach it to every menucheckitem you create. The only thing is that if you add new menucheckitem filter you should name the menucheckitem id with the name of the columnDataIndex-Menu and add this columnDataIndex in menuFilters and thats all.
checkchange: function (checkbox, checked, eOpts) {
var menuFilters = ['name', 'phone'];
var getChecked = function (m) {
var checkedItems = [];
m.items.items.forEach(function (c) {
if (c.checked) {
checkedItems.push(c.text);
}
});
return checkedItems;
};
//
var menus = new Map();
menuFilters.forEach(function (e) {
menus.set(e, Ext.getCmp(e + '-Menu'));
});
//
var fieldValues = [];
menuFilters.forEach(function (e) {
fieldValues.push([e, getChecked(menus.get(e))]);
});
//
var store = checkbox.up('grid').store;
store.clearFilter();
//
if (fieldValues.length > 0) {
store.filterBy(function (record) {
var fV = this.fieldValues;
for (var i = 0; i < fV.length; i++) {
if (fV[i][1].length > 0) {
if (fV[i][1].indexOf(record.get(fV[i][0])) === -1) {
return false;
}
}
}
return true;
}, {
fieldValues: fieldValues
});
}
}
I'm using 'ui.bootstrap.contextMenu' to build a context menu. When I right click a field, I need to pass in a unique ID, to the controller, and return a list of choices based on the ID. Each list could be different. If I use hardcoded list, it works fine, but I can't seem to generate the list dynamically. What am I missing? Example Code:
`<div>
<textarea ng-model="ctrl.status" context-menu="ctrl.menuOptions (ctrl.id)"></div>
</div>
vm.menuOptions = function(id) = {
var listArray = $scope.list; // array of possible list items based on ID
angular.forEach(listArray, function(value, key) {
if (id === value.id) {
return [
[value.id, function ($itemScope) {
return value.textName;
}],
]
}
}
}`
I'm assuming you're referring to this implementation: https://github.com/Templarian/ui.bootstrap.contextMenu
The function to generate the context menu is passed three things:
$cmScope - the scope of the context menu
event - the event object that triggered the opening of the context menu
modelValue - the value of the ng-model attached to the current object
So, in your example, you can use:
vm.menuOptions = function($cmScope, event, modelValue) = {
var listArray = $scope.list; // array of possible list items based on ID
// ^ Assuming that the $scope here is the scope of the container, not the contextmenu
angular.forEach(listArray, function(value, key) {
if (modelValue === value.id) {
return [
[value.id, function ($itemScope) {
return value.textName;
}],
]
}
}
}
Link to the filter:
code: http://jsfiddle.net/ar3PY/92/
Question:
I can filter and I will get result "empty"
But how to disable checkboxes that will anyway appear empty when filtering.
!!Notice that each category shall no filter with itself, only with other categories.
For example:
If I check "VOLVO" and "SILVER" I get "empty".
What I looking for:
If I check "VOLVO", then "SILVER" will be disabled.
Image that show how it should work:
Basically you just needed to access your class attributes to make it work. I forked your fiddle, here's the modified version:
$("#filters :checkbox").click(function() {
var subj = this;
resetBoxes();
$(".filterme").show();
if(this.checked){
var all = $(".filterme");
var tgts = all.filter(getFilter("brand")).filter(getFilter("class")).filter(getFilter("color"));
var brandtgt = tgts[0].className.split(' ')[1];
$("#filters :checkbox").each(function(idx){
var inval = $(this).attr("value");
var brandclasses = tgts[0].className.split(' ');
var found = $.inArray(inval, brandclasses);
if(found<0){
disable($(this));
}
});
all.not(tgts).hide();
tgts.show();
if (tgts.length == 0) {
$('.empty').show();
} else {
$('.empty').hide();
}
}
});
I've included helper functions (resetBoxes, enable, disable) found in the working fiddle below.
http://jsfiddle.net/ppzwmvs9/6/
How to show content of checked filter that only has exacly same attribute for each category?
see also image for explanation:
.
JSFIDDLE HERE:
http://jsfiddle.net/ar3PY/104
.
var getFilter = function (category) {
var filter = $("#filters ." + category + ":checked").map(function () {
return '[data-filter*="' + this.value + '"]';
}).get().join(",");
filter = (filter.length > 0) ? filter : "*";
return filter;
}
We are using ngGrid. I wanted to know if there is a way to create multi column filter like in Excel?
Have been searching on the net but most that I could find was having a single text box filter for filtering all the columns (only one at a time though).
Any help will be appreciated.
Thanks!
Maybe try the filterBar plugin.
var filterBarPlugin = {
init: function(scope, grid) {
filterBarPlugin.scope = scope;
filterBarPlugin.grid = grid;
$scope.$watch(function() {
var searchQuery = "";
angular.forEach(filterBarPlugin.scope.columns, function(col) {
if (col.visible && col.filterText) {
var filterText = col.filterText +'; ';
searchQuery += col.displayName + ": " + filterText;
}
});
return searchQuery;
}, function(searchQuery) {
filterBarPlugin.scope.$parent.filterText = searchQuery;
filterBarPlugin.grid.searchProvider.evalFilter();
});
},
scope: undefined,
grid: undefined,
};
Here is a Plunker to show it in action.
This plugin wasn't written by me, and I don't remember where I found it. I just used it in this Question. (see the comment)
I need keep the default feature of reordering columns and add
possibility drop the column in a second grid, building in the last a list
with the columns of first grid.
I hope has been clear.
I solved the issue extending DropZone. This implementation receive as constructor param the target grid, and this, be in the rbar (docked control) of source grid. The key is set ddGroup to "header-dd-zone-" plus id from source grid. I hope this is useful.
Ext.define('Crud.FilterDropZone', {
extend: 'Ext.dd.DropZone'
, constructor: function() {}
, init: function (grid) {
var me = this;
if (grid.rendered) {
me.grid = grid;
me.ddGroup = 'header-dd-zone-' + grid.up('grid').id;
grid.getView().on({
render: function(v) {
me.view = v;
Crud.FilterDropZone.superclass.constructor.call(me, me.view.el);
},
single: true
});
} else {
grid.on('render', me.init, me, {single: true});
}
}
, getTargetFromEvent: function (e) {
return {};
}
, onNodeDrop: function (nodeData, source, e, data) {
var header = data.header
, store = Ext.getCmp(e.target.id).getStore();
//store.add(new store.RecordType({ property: header.text, value: '', reference: header.dataIndex}));
store.add([[header.text, '', header.dataIndex]]);
}
});