I am trying to figure out from couple of days how to display label for filters on category page. As mentioned in document I have added attribute inside config.products.defaultFilters[] and the filter have started showing there.
I have color and brand filters. For color filters I have mapped color id to color name in config.products.colorMappings so it is displaying correctly there. But for brand I can do the same but it is a static solution so every time admin adds new brand I will need to add its mapping and build the storefront again.
I have tried to check their forum but nothing useful. I checked Vue Storefront vuex catalog and category-next stores for hint but cannot find anything related there.
The label for option under brand_filter should be readable but it is showing that brand attribute option's id
Ok, after spending couple of days finding solution to this problem, I finally got a hint from this answer.
I am using theme vsf-capybara, and according to its guide, to setup I generated a local.json from generate-local-config.js and I merged configuration manually from that local.json to config/local.json file. Prior to this there was no filter named brand or color added already to the main config file.
The config property responsible for the filter labels to be incorrect was entities.attribute.loadByAttributeMetadata and it was set to true I changed it to false because core/module/catalog/CatalogModule has one action attribute/list needs to be dispatched for application use. So if entities.attribute.loadByAttributeMetadata in config/local.json is set to true, this action will not be dispatched. Here is the excerpt from CatalogModule:
if (!config.entities.attribute.loadByAttributeMetadata) {
await store.dispatch('attribute/list', { // loading attributes for application use
filterValues: uniq([...config.products.defaultFilters, ...config.entities.productListWithChildren.includeFields])
})
}
Related
I've got a dijit/Tree connected to a dijit/Tree/ObjectStoreModel which is in turn connected to a dojo/store/Memory wrapped in dojo/store/Observable - essentially as per the example on the dijit/tree documentation.
It's working mostly fine: I preload the store with some objects and can add other objects in using store.add(item). The data is hierarchical and that also is working by setting the parent property on each item added to the store.
However, I want to be able to specify how within a parent sub items should be ordered. e.g. if I've got an item with id "parent_1" and I add two items (say, "item_A", "item_B") both with parent set to "parent_1" then I'll end up with:
parent_1
item_A
item_B
However, I want item_B to be placed above item_A.
store.add supports a second parameter: an object of properties, one of which is 'before'. My understanding is that when you set 'before' to another object in the store, it should be placed before it. so, when I add item_B I use:
var item_A = store.get("item_A");
var item_B = { id: "item_B", parent: "parent_1", ... };
store.add(item_B, { before: item_A });
However, it's not working. item_B is always simply appended at the end. Does anyone know how to make this work? Thanks!
Looking at the source, it doesn't look as if dojo/store/Memory supports the before PutDirective.
If you want this feature, I suspect you will have to submit a Dojo feature request, or patch/augment dojo/store/Memory to provide the function you require.
Update #1: after the fix I commented about, now my app starts but the grid is not rendered except for its bounding box and filter button and popup. Yet, I get no error from the console, and as far as I can arrive with the debugger, I can see that data got from the server are OK. If I use Batarang, I can see the scope corresponding to my model, correctly filled with items. I updated the downloadable repro solution accordingly. Could anyone explain why ng-grid is not updating here?
I'm starting to play with ng-grid and TypeScript and I'm finding issues as soon as my test app starts up. See the bottom of this post for a link to a full test solution. Surely I have made tons of errors even in these few files, but I'd like to have something to start with and learn more step by step.
The MVC app has two client-side applications:
app.js for the default view (Home/Index). No typescript here, and the whole code is self-contained in this single file. The code is derived from the paging example in the ng-grid documentation and tries to stay as simplest as possible.
MyApp.js for the more realistic sample in another view (Home/Model). This sample uses services, models and controllers and its JS code is compiled from TypeScript. To keep things simple, I'm just storing these components under Scripts/App, in folders for Controllers, Models and Services, and each file contains just a single class or interface. The generated JS files are manually included in the view.
app.js works, except that it has issues with filtering. I posted about these here:
Server-side filtering with ng-grid: binding issue?
MyApp.js has startup issues with ng-grid. As soon as the app starts, a TypeError is thrown in the grid binding:
TypeError: Cannot set property 'gridDim' of undefined
at ngGridDirectives.directive.ngGridDirective.compile.pre (http://localhost:55203/Scripts/ng-grid-2.0.7.js:2708:37)
at nodeLinkFn (http://localhost:55203/Scripts/angular.js:4392:13)
at compositeLinkFn (http://localhost:55203/Scripts/angular.js:4015:15)
at nodeLinkFn (http://localhost:55203/Scripts/angular.js:4400:24)
at compositeLinkFn (http://localhost:55203/Scripts/angular.js:4015:15)
at publicLinkFn (http://localhost:55203/Scripts/angular.js:3920:30)
at resumeBootstrapInternal (http://localhost:55203/Scripts/angular.js:983:27)
at Object.$get.Scope.$eval (http://localhost:55203/Scripts/angular.js:8057:28)
at Object.$get.Scope.$apply (http://localhost:55203/Scripts/angular.js:8137:23)
at resumeBootstrapInternal (http://localhost:55203/Scripts/angular.js:981:15) <div ng-grid="gridOptions" style="height: 400px" class="ng-scope"> angular.js:5754
The only similar issue I found by googling is https://github.com/angular-ui/ng-grid/issues/60, but it does not seem to be related to my case as there the grid options were setup too late.
The server side just has an API RESTful controller returning server-paged, sorted and filtered items.
You can find the full repro solution here (just save, unzip and open; all the dependencies come from NuGet); see the readme.txt file for more information:
http://sdrv.ms/167gv0F
Just start the app and click MODEL in the upper right corner to run the TypeScript app throwing the error. The whole app is composed of 1 controller, 1 service and 1 model.
For starters like me, it would be nice to have a simple working example like this one. Could anyone help?
This error means gridOptions has not yet been defined by the time that Angular attempts to parse ng-grid="yourArray", where yourArray is the same array supplied to gridOptions. I had the same problem after refactoring a previously working ng-grid.
So gridOptions must be defined before the element which has ng-grid="yourArray" attribute applied to it (rather than within that element's own controller).
I resolved this by defining gridOptions in an outer element somewhere (on global/app scope, for instance).
P.S. Maybe there is a better way, but this has worked for me.
Where you are adding data to your grid?
If you are writing $scope.myGrid={data:"someObj"}; in a success call then it won't work.
See the below reason:(which is listed in https://github.com/angular-ui/ng-grid/issues/60)
You can't define the grid options in the success call. You need to define
them on the scope in your controller and then set the data or column
definitions, etc... from the success call.
What you have to do?, First is to see how this made your project and revizar if your queries or data access, the beams through a service, if so this I must add the file that manages routes app, the client side.
remain so.
'use strict';
angular.module('iseApp', [
'ngCookies',
'ngResource',
'ngSanitize',
'ngRoute',
**'ngGrid',**
'campaignServices',
'dialinglistServices',
'itemServices'
])
.config(function ($routeProvider, $locationProvider, $httpProvider) {
$routeProvider
As you are adding your ng-grid in a directive, you have to make sure the grid options are loaded before it tries to parse your html.
You could set a boolean in your link function :
scope.isDirectiveLoaded=true;
And then, in your template, use a ng-if :
<div ng-if="isDirectiveLoaded">
<div ng-grid="myGrid"/>
</div>
I got to the same issue, empty grid was rendered.
The way I got to it in the end was to setup my this.gridOptions in the constructor of the controller, within the component. In the options everything is referenced with $ctrl like this. So the data references $ctrl.gridData. gridData is specified as a property in my component controller. $ctrl is not defined as a property.
This was done in the constructor before the data was loaded. this.gridData was defined after in the constructor and then populated later in another function. The options were defined first, I think this is important from some things I read.
For the event hooks pass null instead of $scope.
this.gridOptions = {
enableGridMenu: true,
minRowsToShow: 25,
rowHeight: 36,
enableRowHashing: true,
data: '$ctrl.gridData',
rowTemplate: this.$rootScope.blockedRowTemplate,
onRegisterApi: ($ctrl) => {
this.gridApi = $ctrl;
this.gridApi.colMovable.on.columnPositionChanged(null, (colDef, originalPosition, newPosition) => {
this.saveState();
});
this.gridApi.colResizable.on.columnSizeChanged(null, (colDef, deltaChange) => {
this.saveState();
});
this.gridApi.core.on.columnVisibilityChanged(null, (column) => {
this.saveState();
});
this.gridApi.core.on.sortChanged(null, (grid, sortColumns) => {
this.saveState();
});
this.gridApi.core.on.filterChanged(null, (grid, sortColumns) => {
this.saveState();
});
}
};
In the row template I was referencing functions defined in my component. Before conversion to a component I referenced functions like this:
ng-click="grid.appScope.jumpToExport(row.entity);"
After conversion to the component I needed to add the $ctrl before the function name like this
ng-click="grid.appScope.$ctrl.jumpToExport(row.entity);"
And this is how the component is referenced in the html
<div ui-grid="$ctrl.gridOptions" ng-if="$ctrl.gridData.length != undefined && $ctrl.gridData.length > 0" class="data-grid" ui-grid-save-state ui-grid-resize-columns ui-grid-move-columns></div>
I've scoured the dojo documentation, stack overflow, as well as thoroughly explored the EnhancedGrid object itself with firebug, and I'm not finding answers.
I have an enhanced grid that I populate with values for the user to sort on and basically create a selection set (using indirectSelection plugin). They then have a button to zoom to the selected items on a map.
The problem is, when sorting columns, it doesn't change the order of the items in the store itself, where I'm keeping an object inside each item that tells me how to zoom on the map, so I have no way to reconcile the grid.selection.selected array indices with the store._arrayOfAllItems indices.
edit: Note that I'm stuck using Dojo 1.6 as it's baked into the API I'm using.
Have a look at Dojo Object Store Tutorial.
You can set an idProperty to a Store, e.g.:
var employeeStore = new dojo.store.Memory({data:employees, idProperty: "name"});
Then you can operate the store with that id property using the get method like this:
// add a new employee
employeeStore.add({name:"George", department:"accounting"});
// remove Bill
employeeStore.remove("Bill");
// retrieve object with the name "Jim"
var jim = employeeStore.get("Jim");
Instead of using store._arrayOfAllItems. That way your grid.selection object will contain your id's values instead of array indexes (provided that your grid's store property is your store). This is the part that I'm guessing will work because I know for sure that the new dojo's dgrid does it that way, which I encourage you to use it BTW.
Hope it helps,
I'm using Dojo dnd version 1.7.2 and it's generally working really well. I'm happy.
My app maintains many arrays of items, and as the user drags and drops items around, I need to ensure that my arrays are updated to reflect the contents the user is seeing.
In order to accomplish this, I think I need to run some code around the time of Source.onDndDrop
If I use dojo.connect to set up a handler on my Source for onDndDrop or onDrop, my code seems to get called too late. That is, the source that's passed to the handler doesn't actually have the item in it any more.
This is a problem because I want to call source.getItem(nodes[0].id) to get at the actual data that's being dragged around so I can find it in my arrays and update those arrays to reflect the change the user is making.
Perhaps I'm going about this wrong; and there's a better way?
Ok, I found a good way to do this. A hint was found in this answer to a different question:
https://stackoverflow.com/a/1635554/573110
My successful sequence of calls is basically:
var source = new dojo.dnd.Source( element, creationParams );
var dropHandler = function(source,nodes,copy){
var o = source.getItem(nodes[0].id); // 0 is cool here because singular:true.
// party on o.data ...
this.oldDrop(source,nodes,copy);
}
source.oldDrop = source.onDrop;
source.onDrop = dropHandler;
This ensures that the new implementation of onDrop (dropHandler) is called right before the previously installed one.
Kind'a shooting a blank i guess, there are a few different implementations of the dndSource. But there are a some things one needs to know about the events / checkfunctions that are called during the mouseover / dnddrop.
One approach would be to setup checkAcceptance(source, nodes) for any target you may have. Then keep a reference of the nodes currently dragged. Gets tricky though, with multiple containers that has dynamic contents.
Setup your Source, whilst overriding the checkAcceptance and use a known, (perhaps global) variable to keep track.
var lastReference = null;
var target = dojo.dnd.Source(node, {
checkAcceptance(source, nodes) : function() {
// this is called when 'nodes' are attempted dropped - on mouseover
lastReference = source.getItem(nodes[0].id)
// returning boolean here will either green-light or deny your drop
// use fallback (default) behavior like so:
return this.inhertied(arguments);
}
});
Best approach might just be like this - you get both target and source plus nodes at hand, however you need to find out which is the right stack to look for the node in. I believe it is published at same time as the event (onDrop) youre allready using:
dojo.subscribe("/dnd/drop", function(source, nodes, copy, target) {
// figure out your source container id and target dropzone id
// do stuff with nodes
var itemId = nodes[0].id
}
Available mechanics/topics through dojo.subscribe and events are listed here
http://dojotoolkit.org/reference-guide/1.7/dojo/dnd.html#manager
I am quite new to extjs..and I installed ext js4 in my server. I get the following error. Not sure what it means:
Ext.grid.ColumnModel is not a constructor
here 's my link:
http://srikanthrajan.com/test/index.html
Now I get Ext.grid.RowSelectionModel is not a constructor
Basically I am trying the following tutorial:
http://www.sencha.com/learn/ext-js-grids-with-php-and-sql
RowModel is default so in your grid configurations try this:
selModel: { mode: 'SIMPLE' },
or
selModel: new Ext.selection.RowModel({singleSelect:false})
although singleSelect is not a config option of RowModel, so try:
selModel: new Ext.selection.RowModel({model:SIMPLE})
From ExtJs docs:
mode : String
Mode of selection. Valid values are:
SINGLE - Only allows selecting one item at a time. Use allowDeselect to allow deselecting >that item. This is the default.
SIMPLE - Allows simple selection of multiple items one-by-one. Each click in grid will >either select or deselect an item.
MULTI - Allows complex selection of multiple items using Ctrl and Shift keys.
EDIT:
I looked at the code in the tutorial you mentioned and noticed that it is for ExtJs 2.x and 3.x versions. Grid changed a lot from version 3 to 4. If you want to follow that tutorial you will need to have ExtJs 4 documentation at hand.
I think the columns for PresidentsColumnModel should be Ext.grid.column.Column, not Ext.grid.ColumnModel