{"id":138123,"date":"2018-08-13T05:03:10","date_gmt":"2018-08-13T05:03:10","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=138123"},"modified":"2018-08-13T05:47:41","modified_gmt":"2018-08-13T05:47:41","slug":"how-to-create-custom-datagrid-using-akeneo","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/how-to-create-custom-datagrid-using-akeneo\/","title":{"rendered":"How to Create Custom DataGrid using Akeneo"},"content":{"rendered":"<p>In Akeneo, If you want to display a list of item in a grid system with CRUD functionalities. You can use Akeneo Datagrid. the benefits of Akeneo grid component are filtering, sorting, pagination, and search item. Using Akeneo you can define the form to edit or display an item easily.\u00a0 Let&#8217;s start with an example with multi credentials\u00a0for a connector.<\/p>\n<p>First, you need to create an entity for data grid\u00a0items. As Akeneo relies heavily on standard tools like Doctrine,<\/p>\n<p>&nbsp;<\/p>\n<pre class=\"brush:php\"># \/src\/Webkul\/CustomBundle\/Entity\/CredentialsConfig.php\r\n\r\n&lt;?php\r\n\r\nnamespace Webkul\\CustomBundle\\Entity;\r\n\r\n\/**\r\n * CredentialsConfig\r\n *\/\r\nclass CredentialsConfig\r\n{\r\n    \/**\r\n     * @var integer\r\n     *\/\r\n    private $id;\r\n\r\n    \/**\r\n     * @var string\r\n     *\/\r\n    private $url;\r\n\r\n    \/**\r\n     * @var string\r\n     *\/\r\n    private $apiUser;\r\n\r\n    \/**\r\n     * @var string\r\n     *\/\r\n    private $apiKey;\r\n\r\n    \/**\r\n     * @var boolean\r\n     *\/\r\n    private $active = 0;\r\n\r\n\r\n    \/**\r\n     * Get id\r\n     *\r\n     * @return integer\r\n     *\/\r\n    public function getId()\r\n    {\r\n        return $this-&gt;id;\r\n    }\r\n\r\n    \/**\r\n     * Set url\r\n     *\r\n     * @param string $url\r\n     *\r\n     * @return CredentialsConfig\r\n     *\/\r\n    public function setUrl($url)\r\n    {\r\n        $this-&gt;url = $url;\r\n\r\n        return $this;\r\n    }\r\n\r\n    \/**\r\n     * Get url\r\n     *\r\n     * @return string\r\n     *\/\r\n    public function getUrl()\r\n    {\r\n        return $this-&gt;url;\r\n    }\r\n\r\n    \/**\r\n     * Set apiUser\r\n     *\r\n     * @param string $apiUser\r\n     *\r\n     * @return CredentialsConfig\r\n     *\/\r\n    public function setApiUser($apiUser)\r\n    {\r\n        $this-&gt;apiUser = $apiUser;\r\n\r\n        return $this;\r\n    }\r\n\r\n    \/**\r\n     * Get apiUser\r\n     *\r\n     * @return string\r\n     *\/\r\n    public function getApiUser()\r\n    {\r\n        return $this-&gt;apiUser;\r\n    }\r\n\r\n    \/**\r\n     * Set apiKey\r\n     *\r\n     * @param string $apiKey\r\n     *\r\n     * @return CredentialsConfig\r\n     *\/\r\n    public function setApiKey($apiKey)\r\n    {\r\n        $this-&gt;apiKey = $apiKey;\r\n\r\n        return $this;\r\n    }\r\n\r\n    \/**\r\n     * Get apiKey\r\n     *\r\n     * @return string\r\n     *\/\r\n    public function getApiKey()\r\n    {\r\n        return $this-&gt;apiKey;\r\n    }\r\n\r\n    \/**\r\n     * Set active\r\n     *\r\n     * @param boolean $active\r\n     *\r\n     * @return CredentialsConfig\r\n     *\/\r\n    public function setActive($active)\r\n    {\r\n        $this-&gt;active = $active;\r\n\r\n        return $this;\r\n    }\r\n\r\n    \/**\r\n     * Get active\r\n     *\r\n     * @return boolean\r\n     *\/\r\n    public function getActive()\r\n    {\r\n        return $this-&gt;active;\r\n    }\r\n\r\n    \/**\r\n     * Change the active value vice-versa\r\n     *\/\r\n    public function activation() \r\n    {\r\n        $this-&gt;active = !$this-&gt;active;\r\n\r\n        return $this;\r\n    }\r\n    \/**\r\n     * @var string\r\n     *\/\r\n    private $resources;\r\n\r\n\r\n    \/**\r\n     * Set resources\r\n     *\r\n     * @param string $resources\r\n     *\r\n     * @return CredentialsConfig\r\n     *\/\r\n    public function setResources($resources)\r\n    {\r\n        $this-&gt;resources = $resources;\r\n\r\n        return $this;\r\n    }\r\n\r\n    \/**\r\n     * Get resources\r\n     *\r\n     * @return string\r\n     *\/\r\n    public function getResources()\r\n    {\r\n        return $this-&gt;resources;\r\n    }\r\n}\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p>Now create a Datagrid.<\/p>\n<pre class=\"brush:xml\">#src\/Webkul\/CustomBundle\/Resources\/config\/datagrid\r\ndatagrid:\r\n    webkul-custom-credentials-mapping-grid:\r\n        extended_entity_name: Webkul\\CustomBundle\\Entity\\CredentialsConfig\r\n        options:\r\n            entityHint: CredentialsConfig\r\n            manageFilters: false\r\n        source:\r\n            acl_resource: webkul_custom_connector_configuration\r\n            type: custom_datasource_credentials\r\n            entity: 'Webkul\\CustomBundle\\Entity\\CredentialsConfig'\r\n            query:\r\n                select:\r\n                    - wem.id\r\n                    - wem.url\r\n                    - wem.apiUser\r\n                    - wem.apiKey\r\n                    - wem.active\r\n                from:\r\n                    - { table: 'Webkul\\CustomBundle\\Entity\\CredentialsConfig', alias: wem }\r\n        columns:\r\n            url:\r\n                label: webkul_custom.credentials.grid.export_mappings.columns.url\r\n                frontend_type: label\r\n            apiUser:\r\n                label: webkul_custom.credentials.grid.export_mappings.columns.apiUser\r\n            active:\r\n                label: Activated\r\n                type: twig\r\n                template: PimDataGridBundle:Property:activated.html.twig\r\n                frontend_type: html\r\n\r\n        properties:\r\n            id: ~\r\n            edit_link:\r\n                type: url\r\n                route: webkul_custom_credentials_edit\r\n                params:\r\n                    - id\r\n            toggle_link:\r\n                type: url\r\n                route: webkul_custom_credentials_change_status\r\n                params:\r\n                    - id\r\n            delete_link:\r\n                type: url\r\n                route: webkul_custom_credentials_delete\r\n                params:\r\n                    - id\r\n        sorters:\r\n            columns:\r\n                url:\r\n                    data_name: wem.url\r\n                apiUser:\r\n                    data_name: wem.apiUser\r\n                active:\r\n                    data_name: wem.active\r\n            default:\r\n                url: '%oro_datagrid.extension.orm_sorter.class%::DIRECTION_ASC'\r\n\r\n        filters:\r\n            columns:\r\n                url:\r\n                    type: search\r\n                    data_name: wem.url\r\n                    \r\n                active:\r\n                    type:      boolean\r\n                    label:     Activated\r\n                    data_name: wem.active\r\n\r\n        actions:\r\n            toggle:\r\n                launcherOptions:\r\n                    className: AknIconButton AknIconButton--small AknIconButton--switch\r\n                type:         navigate\r\n                label:        Change status\r\n                link:         toggle_link\r\n                acl_resource: webkul_custom_connector_configuration\r\n            edit:\r\n                launcherOptions:\r\n                    className: AknIconButton AknIconButton--small AknIconButton--edit\r\n                type:      navigate\r\n                label:     Edit\r\n                link:      edit_link\r\n                acl_resource: webkul_custom_connector_configuration\r\n                rowAction: true\r\n            delete:\r\n                launcherOptions:\r\n                    className: AknIconButton AknIconButton--small AknIconButton--trash\r\n                type:          delete\r\n                label:         Delete\r\n                link:          delete_link\r\n                acl_resource:  webkul_custom_connector_configuration<\/pre>\n<p>&nbsp;<\/p>\n<p>you need to define the data source\u00a0service for datagrid.<\/p>\n<pre class=\"brush:xml\">#src\/Webkul\/customBundle\/Resources\/config\r\n\r\nservices:    \r\n    webkul_custom_datagrid.datasource.credentails:\r\n        class: Webkul\\customBundle\\Datasource\\CredentailsDatasource\r\n        arguments:\r\n            - '@webkul_custom.repository.credentials'\r\n            - '@pim_datagrid.datasource.result_record.hydrator.default'\r\n        tags:\r\n            - { name: oro_datagrid.datasource, type: custom_datasource_credentials }<\/pre>\n<p>Define the Datasource class which is used in data source service.<\/p>\n<pre class=\"brush:php\">&lt;?php\r\n\r\nnamespace Webkul\\CustomBundle\\Datasource;\r\n\r\nuse Pim\\Bundle\\DataGridBundle\\Datasource\\Datasource;\r\nuse Webkul\\CustomBundle\\Repository\\CustomCredentailsRepository;\r\nuse Pim\\Bundle\\DataGridBundle\\Datasource\\ResultRecord\\HydratorInterface;\r\n\r\n\r\nclass CredentailsDatasource extends Datasource\r\n{\r\n    \/** @var CustomCredentailsRepository *\/\r\n    protected $repository;\r\n\r\n    \/** @var CustomObjectIdHydrator *\/\r\n    protected $hydrator;\r\n\r\n    \/** @var array *\/\r\n    protected $parameters = [];\r\n\r\n    \/**\r\n     * @param CustomCredentailsRepository $om\r\n     * @param HydratorInterface          $hydrator\r\n     *\/\r\n    public function __construct(CustomCredentailsRepository $repository, HydratorInterface $hydrator)\r\n    {\r\n        $this-&gt;repository = $repository;\r\n        $this-&gt;hydrator = $hydrator;\r\n    }\r\n\r\n    \/**\r\n     * @param string $method the query builder creation method\r\n     * @param array  $config the query builder creation config\r\n     *\r\n     * @return Datasource\r\n     *\/\r\n    protected function initializeQueryBuilder($method, array $config = [])\r\n    {\r\n        $this-&gt;qb = $this-&gt;repository-&gt;$method('wem');\r\n        \r\n        return $this;\r\n    }\r\n\r\n    \/**\r\n     * {@inheritdoc}\r\n     *\/\r\n    public function getResults()\r\n    {\r\n        return $this-&gt;hydrator-&gt;hydrate($this-&gt;qb);\r\n    }\r\n}\r\n<\/pre>\n<p>Define the Access control list ( acl.yml )<\/p>\n<pre class=\"brush:xml\">#src\/Webkul\/CustomBundle\/Resource\/config\/acl.yml\r\n\r\nwebkul_custom_connector_configuration:\r\n    type: action\r\n    label: Custom Connector\r\n    group_name: ~\r\n\r\n\r\n<\/pre>\n<p>Define the following routes as used in datagrid\u00a0for actions edit, change status, delete.<\/p>\n<ul>\n<li>webkul_custom_credentials_edit<\/li>\n<li>webkul_custom_credentials_change_status<\/li>\n<li>webkul_custom_credentials_delete<\/li>\n<\/ul>\n<div>\n<pre class=\"brush:xml\">#src\/Webkul\/customBundle\/Resources\/config\/routing.yml\r\n\r\nwebkul_custom_credentials_edit:\r\n    path: \/custom-configuration\/rest\/edit\/{id}\r\n    requirements:\r\n        id: \\d+\r\n\r\nwebkul_custom_credentials_change_status:\r\n    path: \/custom-configuration\/rest\/toggle\/{id}\r\n    defaults: { _controller: customBundle:Rest\\Configuration:toggle }\r\n    requirements:\r\n        id: \\d+\r\n\r\nwebkul_custom_credentials_delete:\r\n  path: \/custom-configuration\/rest\/credentials\/{id}\r\n  defaults: { _controller: customBundle:Rest\\Configuration:deleteCredentail }\r\n  requirements:\r\n  id: \\d+\r\n  methods: [DELETE]\r\n\r\n\r\nDefine the methods for changestatus, and delete<\/pre>\n<pre class=\"brush:php\"># Webkul\\CustomBundle\\Controller\\Rest\\ConfigurationController\r\n\r\n \/**\r\n     * Remove url\r\n     *\r\n     * @AclAncestor(\"webkul_custom_connector_configuration\")\r\n     *\r\n     * @return JsonResponse\r\n     *\/\r\n    public function deleteCredentailAction($id)\r\n    {\r\n        $mapping = $this-&gt;get('webkul_custom.repository.credentials')-&gt;find($id);\r\n        if(!$mapping) {\r\n            throw new NotFoundHttpException(\r\n                    sprintf('Instance with id \"%s\" not found', $id)\r\n                );\r\n        }\r\n        $em = $this-&gt;getDoctrine()-&gt;getManager();\r\n        $em-&gt;remove($mapping);\r\n        $em-&gt;flush();\r\n\r\n        return new Response(null, Response::HTTP_NO_CONTENT);\r\n    }\r\n\r\n\r\n\r\n    \/**\r\n     * Activate\/Deactivate a credential instance\r\n     *\r\n     * @param CredentialsConfig $configValue\r\n     *\r\n     * @AclAncestor(\"webkul_custom_connector_configuration\")\r\n     *\r\n     * @return JsonResponse\r\n     *\/\r\n    public function toggleAction(CredentialsConfig $configValue)\r\n    {\r\n        try{\r\n            $em = $this-&gt;getDoctrine()-&gt;getManager();\r\n\r\n            \/\/change current active value\r\n            $configValue-&gt;activation();\r\n            $em-&gt;persist($configValue);\r\n            $em-&gt;flush();\r\n            \r\n        } catch(Exception $e) {\r\n            return new JsonResponse(['route' =&gt; 'webkul_custom_connector_configuration']);\r\n        }\r\n        \r\n        return new JsonResponse(['route' =&gt; 'webkul_custom_connector_configuration']);\r\n    }<\/pre>\n<div>\n<div>Model form to create credential Instance<\/div>\n<div>\n<pre class=\"brush:xml\">extensions:\r\n    # Attribute Mapping Model\r\n    webkul-custom-connector-create-instance-modal:\r\n        module: custom\/form\/configuration\/create\/modal\r\n        config:\r\n            labels:\r\n                title: webkul_custom_connector.create_popin.title\r\n                subTitle: webkul_custom_connector.item.credential\r\n            picture: illustrations\/Groups.svg\r\n            successMessage: pim_enrich.entity.group_type.message.created\r\n            editRoute: webkul_custom_credentials_edit\r\n            postUrl: webkul_custom_credentials_create\r\n            routerKey: id\r\n\r\n    webkul-custom-connector-create-instance-modal-host:\r\n        module: custom\/form\/configuration\/create\/form\r\n        parent: webkul-custom-connector-create-instance-modal\r\n        targetZone: fields\r\n        position: 10\r\n        config:\r\n            labels:\r\n                title: webkul_custom_connector.create_popin.title\r\n                subTitle: webkul_custom_connector.item.export_mapping\r\n            identifier: host\r\n            label: webkul_custom_connector.hostName<\/pre>\n<\/div>\n<div><\/div>\n<div>Create the js module and registered in requirejs.yml<\/div>\n<div>\n<pre class=\"brush:xml\">#src\/Webkul\/customBundle\/Resources\/config\/requirejs.yml\r\nconfig:\r\n    paths:\r\n        custom\/form\/configuration\/create\/modal: custom\/js\/form\/configuration\/create\/modal\r\n        custom\/form\/configuration\/create\/form: custom\/js\/form\/configuration\/create\/form\r\n\r\n    config:\r\n        pim\/controller-registry:\r\n            controllers:\r\n                webkul_custom_credentials_change_status:\r\n                    module: pim\/controller\/redirect\r\n                webkul_custom_credentials_edit:\r\n                    module: custom\/form\/configuration\/credentials\/edit<\/pre>\n<\/div>\n<div><\/div>\n<p>Create instance js module.<\/p>\n<\/div>\n<div>\n<pre class=\"brush:js\">\/\/ src\/Webkul\/customBundle\/Resources\/public\/js\/form\/configuration\/create\/modal.js\r\n\r\n'use strict';\r\n\r\ndefine(\r\n    [\r\n        'jquery',\r\n        'underscore',\r\n        'oro\/translator',\r\n        'routing',\r\n        'pim\/form\/common\/creation\/modal',\r\n        'oro\/loading-mask',\r\n        'pim\/router',\r\n    ],\r\n    function (\r\n        $,\r\n        _,\r\n        __,\r\n        Routing,\r\n        BaseModal,\r\n        LoadingMask,\r\n        router,\r\n    ) {\r\n        return BaseModal.extend({\r\n            validationErrors: {},\r\n            \r\n            \/**\r\n             * {@inheritdoc}\r\n             *\/\r\n            save() {\r\n                this.validationErrors = {};\r\n\r\n                const loadingMask = new LoadingMask();\r\n                this.$el.empty().append(loadingMask.render().$el.show());\r\n\r\n                let data = this.getFormData();\r\n\r\n                return $.ajax({\r\n                    url: Routing.generate(this.config.postUrl),\r\n                    type: 'POST',\r\n                    data: JSON.stringify(data)\r\n                }).fail(function (response) {\r\n                    this.validationErrors = response.responseJSON;\r\n                    this.render();\r\n                }.bind(this))\r\n                .always(() =&gt; loadingMask.remove());\r\n            }\r\n        });\r\n    }\r\n);\r\n<\/pre>\n<\/div>\n<div>Create the form for the above module.<\/div>\n<div>\n<pre class=\"brush:js\">\/\/ src\/Webkul\/customBundle\/Resources\/public\/js\/form\/configuration\/create\r\ndefine([\r\n    'jquery',\r\n    'underscore',\r\n    'custom\/form\/configuration\/create\/modal',\r\n    'pim\/user-context',\r\n    'oro\/translator',\r\n    'pim\/fetcher-registry',\r\n    'pim\/initselect2',\r\n    'custom\/template\/configuration\/tab\/credential',\r\n    'routing',\r\n    'oro\/messenger',\r\n    'oro\/loading-mask'\r\n], function(\r\n    $,\r\n    _,\r\n    BaseModal,\r\n    UserContext,\r\n    __,\r\n    FetcherRegistry,\r\n    initSelect2,\r\n    template,\r\n    Routing,\r\n    messenger,\r\n    LoadingMask\r\n    ) {\r\n\r\n    return BaseModal.extend({\r\n        loadingMask: null,\r\n            updateFailureMessage: __('error to fetch token'),\r\n            updateSuccessMessage: __('pim_enrich.entity.info.update_successful'),\r\n            label: __('pim_enrich.entity.save.label'),\r\n            isGroup: true,\r\n            label: __('custom.credential.tab'),\r\n            template: _.template(template),\r\n            code: 'custom_connector_credential',\r\n            controls: [{\r\n                'label' : 'custom.form.properties.host_name.title',\r\n                'name': 'hostName',\r\n                'type': 'text'\r\n            }, {\r\n                'label' : 'custom.form.properties.apiUser.title',\r\n                'name': 'apiUser',\r\n                'type': 'text'\r\n            }, {\r\n                'label' : 'custom.form.properties.apiKey.title',\r\n                'name': 'apiKey',\r\n                'type': 'password'\r\n            }],\r\n\r\n            errors: [],\r\n            events: {\r\n                'change .AknFormContainer-Credential input': 'updateModel',\r\n            },\r\n           \r\n             \/**\r\n             * {@inheritdoc}\r\n             *\/\r\n            render: function () {\r\n                $('#container .AknButtonList[data-drop-zone=\"buttons\"] div:nth-of-type(1)').hide();\r\n                \r\n                self = this;\r\n                var controls;\r\n                var controls2;\r\n                \r\n                this.$el.html(this.template({\r\n                    controls: self.controls,\r\n                    controls2: self.controls2,\r\n                    model: self.getFormData(),\r\n                    errors: this.parent.validationErrors\r\n                }));\r\n                this.delegateEvents();\r\n            },\r\n            \/**\r\n             * Update model after value change\r\n             *\r\n             * @param {Event} event\r\n             *\/\r\n            updateModel: function (event) {\r\n                var data = this.getFormData();\r\n                switch(event.target.id) {\r\n                    case 'pim_enrich_entity_form_hostName':\r\n                        data['hostName'] = event.target.value\r\n                        break;\r\n                    case 'pim_enrich_entity_form_apiUser':\r\n                        data['apiUser'] = event.target.value\r\n                        break;\r\n                    case 'pim_enrich_entity_form_apiKey':\r\n                        data['apiKey'] = event.target.value\r\n                }\r\n                \r\n                this.setData(data);\r\n            },\r\n            \r\n            stringify: function(formData) {\r\n                if('undefined' != typeof(formData['mapping']) &amp;&amp; formData['mapping'] instanceof Array) {\r\n                    formData['mapping'] = $.extend({}, formData['mapping']);\r\n                }\r\n\r\n                return JSON.stringify(formData);                \r\n            },\r\n\r\n            \/**\r\n             * {@inheritdoc}\r\n             *\/\r\n            getSaveUrl: function () {\r\n                var route = Routing.generate('webkul_custom_connector_configuration_post');\r\n                return route;\r\n            },\r\n            \/**\r\n             * Sets errors\r\n             *\r\n             * @param {Object} errors\r\n             *\/\r\n            setValidationErrors: function (errors) {\r\n                this.parent.validationErrors = errors.response;\r\n                this.render();\r\n            },\r\n\r\n            \/**\r\n             * Resets errors\r\n             *\/\r\n            resetValidationErrors: function () {\r\n                this.parent.validationErrors = {};\r\n                this.render();\r\n            },\r\n\r\n                        \/**\r\n             * Show the loading mask\r\n             *\/\r\n            showLoadingMask: function () {\r\n                this.loadingMask = new LoadingMask();\r\n                this.loadingMask.render().$el.appendTo(this.getRoot().$el).show();\r\n            },\r\n\r\n            \/**\r\n             * Hide the loading mask\r\n             *\/\r\n            hideLoadingMask: function () {\r\n                this.loadingMask.hide().$el.remove();\r\n            },\r\n         \r\n    });\r\n});\r\n<\/pre>\n<\/div>\n<\/div>\n<div><\/div>\n<div><em>Now grid is ready to render.<\/em><\/div>\n<div><em>Additionally,\u00a0you can add mass edit, delete options for items in the <\/em>datagrid<em>.<\/em><\/div>\n<div>.<\/div>\n<div><\/div>\n<div><strong>Referances:<\/strong><\/div>\n<div><em><a href=\"https:\/\/docs.akeneo.com\/1.3\/cookbook\/custom_entity\/creating_a_custom_entity.html\">https:\/\/docs.akeneo.com\/1.3\/cookbook\/custom_entity\/creating_a_custom_entity.html<\/a><\/em><\/div>\n<div><em>\u00a0\u00a0<\/em><\/div>\n<div><em><a href=\"https:\/\/docs.akeneo.com\/1.6\/cookbook\/ui_customization\/create_a_reference_data_crud.html\">https:\/\/docs.akeneo.com\/1.6\/cookbook\/ui_customization\/create_a_reference_data_crud.html<\/a><\/em><\/div>\n<div><\/div>\n<div>\u00a0.<\/div>\n<div>Thanks<\/div>\n<div><\/div>\n<div>\n<div><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>In Akeneo, If you want to display a list of item in a grid system with CRUD functionalities. You can use Akeneo Datagrid. the benefits of Akeneo grid component are filtering, sorting, pagination, and search item. Using Akeneo you can define the form to edit or display an item easily.\u00a0 Let&#8217;s start with an example <a href=\"https:\/\/webkul.com\/blog\/how-to-create-custom-datagrid-using-akeneo\/\">[&#8230;]<\/a><\/p>\n","protected":false},"author":189,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5709],"tags":[3649,6000,7274,7275],"class_list":["post-138123","post","type-post","status-publish","format-standard","hentry","category-akeneo","tag-akeneo","tag-akeneo-connector","tag-datagrid","tag-multicredential"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Create Custom DataGrid using Akeneo - Webkul Blog<\/title>\n<meta name=\"description\" content=\"In Akeneo, If you want to display a list of item in a grid system with CRUD functionalities. You can use Akeneo Datagrid. the benefits of Akeneo grid component are filtering, sorting, pagination, and search item. Using Akeneo you can define the form to edit or display an item easily.\u00a0 Let&#039;s start with an example with multi credentials\u00a0for a connector.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/how-to-create-custom-datagrid-using-akeneo\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create Custom DataGrid using Akeneo - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"In Akeneo, If you want to display a list of item in a grid system with CRUD functionalities. You can use Akeneo Datagrid. the benefits of Akeneo grid component are filtering, sorting, pagination, and search item. Using Akeneo you can define the form to edit or display an item easily.\u00a0 Let&#039;s start with an example with multi credentials\u00a0for a connector.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/how-to-create-custom-datagrid-using-akeneo\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2018-08-13T05:03:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-08-13T05:47:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-og.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Navneet Kumar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Navneet Kumar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-custom-datagrid-using-akeneo\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-custom-datagrid-using-akeneo\/\"},\"author\":{\"name\":\"Navneet Kumar\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/fba361b1101985561e7a6e0685079a8c\"},\"headline\":\"How to Create Custom DataGrid using Akeneo\",\"datePublished\":\"2018-08-13T05:03:10+00:00\",\"dateModified\":\"2018-08-13T05:47:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-custom-datagrid-using-akeneo\/\"},\"wordCount\":222,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"keywords\":[\"Akeneo\",\"Akeneo Connector\",\"DataGrid\",\"MultiCredential\"],\"articleSection\":[\"Akeneo\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/how-to-create-custom-datagrid-using-akeneo\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-custom-datagrid-using-akeneo\/\",\"url\":\"https:\/\/webkul.com\/blog\/how-to-create-custom-datagrid-using-akeneo\/\",\"name\":\"How to Create Custom DataGrid using Akeneo - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"datePublished\":\"2018-08-13T05:03:10+00:00\",\"dateModified\":\"2018-08-13T05:47:41+00:00\",\"description\":\"In Akeneo, If you want to display a list of item in a grid system with CRUD functionalities. You can use Akeneo Datagrid. the benefits of Akeneo grid component are filtering, sorting, pagination, and search item. Using Akeneo you can define the form to edit or display an item easily.\u00a0 Let's start with an example with multi credentials\u00a0for a connector.\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-custom-datagrid-using-akeneo\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/how-to-create-custom-datagrid-using-akeneo\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-custom-datagrid-using-akeneo\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Create Custom DataGrid using Akeneo\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/fba361b1101985561e7a6e0685079a8c\",\"name\":\"Navneet Kumar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d0ebf451d594c29d21e3f35988748bf30377c55a864d36dfe98891688ac796d6?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d0ebf451d594c29d21e3f35988748bf30377c55a864d36dfe98891688ac796d6?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Navneet Kumar\"},\"url\":\"https:\/\/webkul.com\/blog\/author\/navneetkumar-symfony813\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Create Custom DataGrid using Akeneo - Webkul Blog","description":"In Akeneo, If you want to display a list of item in a grid system with CRUD functionalities. You can use Akeneo Datagrid. the benefits of Akeneo grid component are filtering, sorting, pagination, and search item. Using Akeneo you can define the form to edit or display an item easily.\u00a0 Let's start with an example with multi credentials\u00a0for a connector.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/how-to-create-custom-datagrid-using-akeneo\/","og_locale":"en_US","og_type":"article","og_title":"How to Create Custom DataGrid using Akeneo - Webkul Blog","og_description":"In Akeneo, If you want to display a list of item in a grid system with CRUD functionalities. You can use Akeneo Datagrid. the benefits of Akeneo grid component are filtering, sorting, pagination, and search item. Using Akeneo you can define the form to edit or display an item easily.\u00a0 Let's start with an example with multi credentials\u00a0for a connector.","og_url":"https:\/\/webkul.com\/blog\/how-to-create-custom-datagrid-using-akeneo\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2018-08-13T05:03:10+00:00","article_modified_time":"2018-08-13T05:47:41+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-og.png","type":"image\/png"}],"author":"Navneet Kumar","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Navneet Kumar","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/how-to-create-custom-datagrid-using-akeneo\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/how-to-create-custom-datagrid-using-akeneo\/"},"author":{"name":"Navneet Kumar","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/fba361b1101985561e7a6e0685079a8c"},"headline":"How to Create Custom DataGrid using Akeneo","datePublished":"2018-08-13T05:03:10+00:00","dateModified":"2018-08-13T05:47:41+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/how-to-create-custom-datagrid-using-akeneo\/"},"wordCount":222,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"keywords":["Akeneo","Akeneo Connector","DataGrid","MultiCredential"],"articleSection":["Akeneo"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/how-to-create-custom-datagrid-using-akeneo\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/how-to-create-custom-datagrid-using-akeneo\/","url":"https:\/\/webkul.com\/blog\/how-to-create-custom-datagrid-using-akeneo\/","name":"How to Create Custom DataGrid using Akeneo - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"datePublished":"2018-08-13T05:03:10+00:00","dateModified":"2018-08-13T05:47:41+00:00","description":"In Akeneo, If you want to display a list of item in a grid system with CRUD functionalities. You can use Akeneo Datagrid. the benefits of Akeneo grid component are filtering, sorting, pagination, and search item. Using Akeneo you can define the form to edit or display an item easily.\u00a0 Let's start with an example with multi credentials\u00a0for a connector.","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/how-to-create-custom-datagrid-using-akeneo\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/how-to-create-custom-datagrid-using-akeneo\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/how-to-create-custom-datagrid-using-akeneo\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Create Custom DataGrid using Akeneo"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/fba361b1101985561e7a6e0685079a8c","name":"Navneet Kumar","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d0ebf451d594c29d21e3f35988748bf30377c55a864d36dfe98891688ac796d6?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d0ebf451d594c29d21e3f35988748bf30377c55a864d36dfe98891688ac796d6?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Navneet Kumar"},"url":"https:\/\/webkul.com\/blog\/author\/navneetkumar-symfony813\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/138123","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/189"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=138123"}],"version-history":[{"count":11,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/138123\/revisions"}],"predecessor-version":[{"id":138169,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/138123\/revisions\/138169"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=138123"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=138123"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=138123"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}