create datagrid frontend oroCommerce - datagrid

Question

I’m creating a datagrid in the frontend but it appears in the layout.
I can see the error
bundle/Resources/views/layouts/default/mayorista_resume_accout_frontend_index/layout.yml
layout:
imports:
-
id: datagrid
root: __root
actions:
- '#setBlockTheme':
themes: 'layout.html.twig'
- '#remove':
id: bloque_resumen
- '#setOption':
id: __datagrid
optionName: grid_name
optionValue: frontend-requests-grid
- '#add':
id: manufacturer_datagrid
blockType: block
parentId: page_content
prepend: false
- '#addTree':
items:
resume_view_page:
blockType: container
resume_container:
blockType: container
resume_body:
blockType: container
resume_body_column_left:
blockType: container
options:
additional_block_prefixes: ['resume_body_column']
resume_body_column_right:
blockType: container
options:
additional_block_prefixes: ['resume_body_column']
resume_after_line_items_grid:
blockType: container
resume_body_container:
blockType: container
options:
additional_block_prefixes: ['resume_body_block_container']
tree:
page_content:
resume_view_page:
resume_container:
resume_body:
resume_body_container:
resume_body_column_left:
bundle/Resources/config/oro/datagrids.yml
datagrids:
app-resumes-grid:
options:
frontend: true
source:
type: orm
query:
select:
- resume.id
- resume.name
- resume.lastname
from:
- { table: MayoristanetResumeAccountBundle:Resume, alias: resume }
columns:
id:
label: ID
frontend_type: integer
name:
label: Name
frontend_type: string
lastname:
label: Lastname
frontend_type: string
sorters:
columns:
id:
data_name: resume.id
name:
data_name: resume.name
lastname:
data_name: resume.lastname
default:
name: DESC
filters:
columns:
id:
type: number
data_name: resume.id
name:
type: string
data_name: resume.name
lastname:
type: string
data_name: resume.lastname
bundle/Resources/views/layouts/default/mayorista_resume_account_frontend_index/layout.html.twig
{% block _manufacturer_datagrid_widget %}
{% import 'OroDataGridBundle::macros.html.twig' as dataGrid %}
{% block content %}
{{ dataGrid.renderGrid('app-resumes-grid') }}
{% endblock %}
{% endblock %}

Answer 1

it does not show any error generates the code and then disappears.
the only thing he says is
Uncaught TypeError: Cannot read property 'datagrid' of undefined
the code generate is this
{"el":"#grid-app-resumes-grid-275870322","gridName":"app-resumes-grid","builders":["orofilter\/js\/datafilter-builder","orosync\/js\/content\/grid-builder","orodatagrid\/js\/totals-builder"],"metadata":{"requireJSModules":["orofilter\/js\/datafilter-builder","orosync\/js\/content\/grid-builder","orodatagrid\/js\/totals-builder"],"options":{"gridName":"app-resumes-grid","frontend":true,"show_grid":true,"additional_fields":[],"toolbarOptions":{"placement":{"bottom":true,"top":true},"hide":false,"addResetAction":true,"addRefreshAction":true,"addColumnManager":true,"turnOffToolbarRecordsNumber":0,"pageSize":{"hide":false,"default_per_page":25,"items":[10,25,50,100]},"pagination":{"hide":false,"onePage":false},"addSorting":false,"disableNotSelectedOption":false},"urlParams":{"originalRoute":"mayorista_resume_account_frontend_index"},"route":"oro_frontend_datagrid_index","contentTags":["Mayoristanet_ResumeAccountBundle_Entity_Resume_type_collection"],"multipleSorting":false,"url":"\/neworo\/web\/app_dev.php\/datagrid\/app-resumes-grid?app-resumes-grid%5BoriginalRoute%5D=mayorista_resume_account_frontend_index"},"lazy":true,"massActions":[],"rowActions":{"update":{"type":"button-widget","label":"Edit","rowAction":false,"link":"#","icon":"pencil-square-o","order":510,"name":"update","frontend_type":"button-widget","launcherOptions":{"onClickReturnValue":true,"runAction":true,"className":"no-hash","widget":[],"messages":[]}},"delete":{"type":"button-widget","label":"Delete","rowAction":false,"link":"#","icon":"trash-o","order":520,"name":"delete","frontend_type":"button-widget","launcherOptions":{"onClickReturnValue":true,"runAction":true,"className":"no-hash","widget":[],"messages":[]}}},"initialState":{"gridView":"__all__","filters":[],"columns":{"id":{"order":0,"renderable":true},"name":{"order":1,"renderable":true},"lastname":{"order":2,"renderable":true},"phone":{"order":3,"renderable":true},"age":{"order":4,"renderable":true}},"currentPage":1,"pageSize":25,"totals":null,"sorters":{"id":"DESC"}},"state":{"gridView":"__all__","filters":[],"columns":{"id":{"order":0,"renderable":true},"name":{"order":1,"renderable":true},"lastname":{"order":2,"renderable":true},"phone":{"order":3,"renderable":true},"age":{"order":4,"renderable":true}},"currentPage":1,"pageSize":25,"totals":null,"sorters":{"id":"DESC"}},"gridViews":{"views":[{"name":"__all__","label":"__all__","icon":"fa-table","appearanceType":"grid","appearanceData":[],"type":"system","filters":[],"sorters":[],"columns":[],"editable":false,"deletable":false,"is_default":false,"shared_by":null}],"gridName":"app-resumes-grid","permissions":{"VIEW":true,"CREATE":true,"EDIT":true,"DELETE":true,"SHARE":true,"EDIT_SHARED":true}},"filters":[{"name":"id","label":"ID","choices":[{"attr":[],"label":"equals","value":"3","data":3},{"attr":[],"label":"not equals","value":"4","data":4},{"attr":[],"label":"equals or greater than","value":"1","data":1},{"attr":[],"label":"greater than","value":"2","data":2},{"attr":[],"label":"equals or less than","value":"5","data":5},{"attr":[],"label":"less than","value":"6","data":6},{"attr":[],"label":"is any of","value":"9","data":9},{"attr":[],"label":"is not any of","value":"10","data":10},{"attr":[],"label":"is empty","value":"filter_empty_option","data":"filter_empty_option"},{"attr":[],"label":"is not empty","value":"filter_not_empty_option","data":"filter_not_empty_option"}],"type":"number","enabled":true,"visible":true,"translatable":true,"force_like":false,"case_insensitive":true,"min_length":0,"max_length":9223372036854775807,"lazy":false,"formatterOptions":{"decimals":0,"grouping":false,"orderSeparator":"","decimalSeparator":","},"arraySeparator":",","arrayOperators":[9,10],"dataType":"data_integer","cacheId":null},{"name":"name","label":"Name","choices":[{"attr":[],"label":"contains","value":"1","data":1},{"attr":[],"label":"does not contain","value":"2","data":2},{"attr":[],"label":"is equal to","value":"3","data":3},{"attr":[],"label":"starts with","value":"4","data":4},{"attr":[],"label":"ends with","value":"5","data":5},{"attr":[],"label":"is any of","value":"6","data":6},{"attr":[],"label":"is not any of","value":"7","data":7},{"attr":[],"label":"is empty","value":"filter_empty_option","data":"filter_empty_option"},{"attr":[],"label":"is not empty","value":"filter_not_empty_option","data":"filter_not_empty_option"}],"type":"string","enabled":true,"visible":true,"translatable":true,"force_like":false,"case_insensitive":true,"min_length":0,"max_length":9223372036854775807,"lazy":false,"cacheId":null},{"name":"lastname","label":"Lastname","choices":[{"attr":[],"label":"contains","value":"1","data":1},{"attr":[],"label":"does not contain","value":"2","data":2},{"attr":[],"label":"is equal to","value":"3","data":3},{"attr":[],"label":"starts with","value":"4","data":4},{"attr":[],"label":"ends with","value":"5","data":5},{"attr":[],"label":"is any of","value":"6","data":6},{"attr":[],"label":"is not any of","value":"7","data":7},{"attr":[],"label":"is empty","value":"filter_empty_option","data":"filter_empty_option"},{"attr":[],"label":"is not empty","value":"filter_not_empty_option","data":"filter_not_empty_option"}],"type":"string","enabled":true,"visible":true,"translatable":true,"force_like":false,"case_insensitive":true,"min_length":0,"max_length":9223372036854775807,"lazy":false,"cacheId":null},{"name":"phone","label":"Phone","choices":[{"attr":[],"label":"equals","value":"3","data":3},{"attr":[],"label":"not equals","value":"4","data":4},{"attr":[],"label":"equals or greater than","value":"1","data":1},{"attr":[],"label":"greater than","value":"2","data":2},{"attr":[],"label":"equals or less than","value":"5","data":5},{"attr":[],"label":"less than","value":"6","data":6},{"attr":[],"label":"is any of","value":"9","data":9},{"attr":[],"label":"is not any of","value":"10","data":10},{"attr":[],"label":"is empty","value":"filter_empty_option","data":"filter_empty_option"},{"attr":[],"label":"is not empty","value":"filter_not_empty_option","data":"filter_not_empty_option"}],"type":"number","enabled":true,"visible":true,"translatable":true,"force_like":false,"case_insensitive":true,"min_length":0,"max_length":9223372036854775807,"lazy":false,"formatterOptions":{"decimals":0,"grouping":false,"orderSeparator":"","decimalSeparator":","},"arraySeparator":",","arrayOperators":[9,10],"dataType":"data_integer","cacheId":null},{"name":"age","label":"Age","choices":[{"attr":[],"label":"equals","value":"3","data":3},{"attr":[],"label":"not equals","value":"4","data":4},{"attr":[],"label":"equals or greater than","value":"1","data":1},{"attr":[],"label":"greater than","value":"2","data":2},{"attr":[],"label":"equals or less than","value":"5","data":5},{"attr":[],"label":"less than","value":"6","data":6},{"attr":[],"label":"is any of","value":"9","data":9},{"attr":[],"label":"is not any of","value":"10","data":10},{"attr":[],"label":"is empty","value":"filter_empty_option","data":"filter_empty_option"},{"attr":[],"label":"is not empty","value":"filter_not_empty_option","data":"filter_not_empty_option"}],"type":"number","enabled":true,"visible":true,"translatable":true,"force_like":false,"case_insensitive":true,"min_length":0,"max_length":9223372036854775807,"lazy":false,"formatterOptions":{"decimals":0,"grouping":false,"orderSeparator":"","decimalSeparator":","},"arraySeparator":",","arrayOperators":[9,10],"dataType":"data_integer","cacheId":null}],"columns":[{"label":"ID","style":"integer","type":"integer","translatable":true,"editable":false,"shortenableLabel":true,"name":"id","order":0,"renderable":true,"sortable":true},{"label":"Name","type":"string","translatable":true,"editable":false,"shortenableLabel":true,"name":"name","order":1,"renderable":true,"sortable":true},{"label":"Lastname","type":"string","translatable":true,"editable":false,"shortenableLabel":true,"name":"lastname","order":2,"renderable":true,"sortable":true},{"label":"Phone","style":"integer","type":"integer","translatable":true,"editable":false,"shortenableLabel":true,"name":"phone","order":3,"renderable":true,"sortable":true},{"label":"Age","style":"integer","type":"integer","translatable":true,"editable":false,"shortenableLabel":true,"name":"age","order":4,"renderable":true,"sortable":true}],"gridParams":[],"enableFloatingHeaderPlugin":false},"data":{"data":[{"id":2,"name":"Martin","lastname":"Asd","phone":6597979,"age":29,"action_configuration":{"update":false,"delete":false}},{"id":1,"name":"Marcos","lastname":"Prosperi","phone":1169560852,"age":30,"action_configuration":{"update":false,"delete":false}}],"options":{"hideToolbar":false,"totalRecords":2,"totals":[]}},"enableFilters":true,"enableToggleFilters":true,"filterContainerSelector":null,"filtersStateElement":null,"enableViews":true,"showViewsInNavbar":false,"showViewsInCustomElement":false,"inputName":"app-resumes-grid","themeOptions":[],"toolbarOptions":[],"gridViewsOptions":[],"gridBuildersOptions":[]}
dont show datagrid

Answer 2

I could solve it using this
{% block _manufacturer_datagrid_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 %}
{{ dataGrid.renderGrid('app-resumes-grid') }}
{% endblock %}
{% endblock %}