How to make my simple Datagrid to have default frontend style?

My current datagrid shows like this:

I want it to show like this:

my datagrids.yml

YAML

datagrids: razoyo-productbybrand-grid: # extends: frontend-product-search-grid options: frontend: true entityHint: oro.product.entity_plural_label entity_pagination: true requireJSModules: - oroproduct/js/app/datagrid/frontend-product-display-options-builder - oroproduct/js/app/datagrid/frontend-product-filters-events-dispatcher-builder extended_entity_name: '%oro_product.entity.product.class%' source: type: orm query: select: - product.id # - product.sku # - product.brand as - product.denormalizedDefaultName as productName # - product.pagetemplate_id # - product.category_id from: - { table: '%oro_product.entity.product.class%', alias: product } where: and: - product.brand = :brandId bind_parameters: # Get the "brandId" parameter from the datagrid # and set its value to the "brandId" parameter in the datasource query brandId: brandId columns: productName: label: oro.product.names.label properties: id: ~ view_link: type: url route: oro_product_frontend_product_view params: [ id ] newArrival: ~ unit: ~

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

datagrids:     razoyo-productbybrand-grid:         # extends: frontend-product-search-grid         options:             frontend: true             entityHint: oro.product.entity_plural_label             entity_pagination: true             requireJSModules:                 - oroproduct/js/app/datagrid/frontend-product-display-options-builder                 - oroproduct/js/app/datagrid/frontend-product-filters-events-dispatcher-builder         extended_entity_name: '%oro_product.entity.product.class%'             source:             type: orm             query:                 select:                     - product.id                    # - product.sku                    # - product.brand as                     - product.denormalizedDefaultName as productName                    # - product.pagetemplate_id                    # - product.category_id                 from:                     - { table: '%oro_product.entity.product.class%', alias: product }                 where:                     and:                     - product.brand = :brandId             bind_parameters:                 # Get the "brandId" parameter from the datagrid                 # and set its value to the "brandId" parameter in the datasource query                 brandId: brandId                       columns:             productName:                 label: oro.product.names.label         properties:             id: ~             view_link:                 type:  url                 route: oro_product_frontend_product_view                 params: [ id ]             newArrival: ~             unit: ~

my productsbybrand.yml

YAML

layout: actions: - '@setBlockTheme': themes: 'productsbybrand.html.twig' - '@add': id: product_by_brand_block parentId: page_content blockType: block

1 2 3 4 5 6 7 8

layout:     actions:         - '@setBlockTheme':             themes: 'productsbybrand.html.twig'         - '@add':             id: product_by_brand_block             parentId: page_content             blockType: block

my productsbybrand.html.twig

diff

{% block _product_by_brand_block_widget %} {% import 'OroDataGridBundle::macros.html.twig' as dataGrid %} {% include 'OroDataGridBundle:js:toolbar.html.twig' %} <div class="js-frontend-datagrid-grid-views-tpl"></div> {% block content %} {# Accessing route id from request and passing that in as brandId #} {{ dataGrid.renderGrid('razoyo-productbybrand-grid', {brandId: app.request.get('id')}) }} {% endblock %} {% endblock %}

1 2 3 4 5 6 7 8 9 10 11 12

{% block _product_by_brand_block_widget %}     {% import 'OroDataGridBundle::macros.html.twig' as dataGrid %}     {% include 'OroDataGridBundle:js:toolbar.html.twig' %}       <div  class="js-frontend-datagrid-grid-views-tpl"></div>       {% block content %}          {# Accessing route id from request and passing that in as brandId #}              {{ dataGrid.renderGrid('razoyo-productbybrand-grid', {brandId: app.request.get('id')}) }}     {% endblock %}   {% endblock %}

• This topic was modified 4 years, 11 months ago by  Shahriar.

Topic

[Valerii YustyniukParticipant]

Hi, Shahriar

Try to add to you own datagrid productsbybrand.yml imports section with oro_product_grid.
It might looks like something like that:

YAML

layout: imports: - oro_product_grid actions: - '@setBlockTheme': themes: 'productsbybrand.html.twig' - '@add': id: product_by_brand_block parentId: page_content blockType: block

1 2 3 4 5 6 7 8 9 10

layout:     imports:         - oro_product_grid     actions:         - '@setBlockTheme':             themes: 'productsbybrand.html.twig'         - '@add':             id: product_by_brand_block             parentId: page_content             blockType: block

As an example you could see on layout update of previously purchased products.

[Author]

Replies