How to Render 2nd datagrid based on click event of row on 1st datagrid in Twig

This topic contains 5 replies, has 2 voices, and was last updated by shreyas 7 years, 8 months ago.

Starting from March 1, 2020 the forum has been switched to the read-only mode. Please head to StackOverflow for support.

Creator
Topic

August 3, 2016 at 12:56 am #30432

shreyas

Participant

Hi Team,

I have a requirement wherein i need to display a second datagrid(leadfilterby-account) wherein it display lead details for a specific account number that would be obtained from 1st datagrid (accounts-grid2) row click in same twig with no page reload.
Here for each Account row by its account Id field i am able to get the Account Id. So once a Row is clicked i am able to get its id & calling a controller with AccountId which would be given as parameter to a Query which gives me response . The response i am obtaining is correct & i am able to get back in Twig. But i need The Response to be as a Lead Datagrid(leadfilterby-account) which could get displayed & needs changed Lead Data each time a row is clicked from above Datagrid(accounts-grid2) without any reload of page.

Please find the below Datagrid code for accounts-grid2 & leadfilterby-account given below:

 accounts-grid2:
        extended_entity_name: %orocrm_account.account.entity.class%
        inline_editing:
            enable: true
        acl_resource: orocrm_account_view
        source:
            type: orm
            query:
                select:
                    - a.id
                    - a.name
                    - a.firstName as FirstName
                    - a.lastName as LastName
                    - accStatus.label as AccountStatus
                    - a.id as accId
                from:
                    - { table: %orocrm_account.account.entity.class%, alias: a }
                join:
                    left:
                        - { join: a.defaultContact, alias: defaultContact }
                        - { join: defaultContact.emails, alias: defaultContactEmail, conditionType: 'WITH', condition: 'defaultContactEmail.primary = true' }
                        - { join: defaultContact.phones, alias: defaultContactPhone, conditionType: 'WITH', condition: 'defaultContactPhone.primary = true' }
                        - { join: a.owner, alias: accountOwner }
                        - { join: a.accountStatus, alias: accStatus }
        properties:
            id: ~
            owner: ~
        columns:
            accId:
                label: Account Id
                #frontend_type: html
                renderable:    false
            FirstName:
                label:          orocrm.account.firstName.label
            LastName:
                label:          orocrm.account.lastName.label
            AccountStatus:
                label:          orocrm.account.accountStatus.label
        sorters:
            columns:
                
                FirstName:
                    data_name: FirstName
                LastName:
                    data_name: LastName
                AccountStatus:
                    data_name: AccountStatus
        filters:
            columns:
                
                FirstName:
                    type:      string
                    data_name: a.firstName
                LastName:
                    type:      string
                    data_name: a.lastName
        mass_actions:
            merge:
                type: merge
                entity_name: %orocrm_account.account.entity.class%
                data_identifier: a.id
        options:
            entityHint: account
            export: true
            entity_pagination: true
            
    leadfilterby-account:
            acl_resource: orocrm_sales_lead_view
            source:
                type: orm
                query:
                    select:
                        - l.id
                        - l.name
                        - l.firstName
                        - l.lastName
                        - acc.id as accid
                    from:
                        - { table: %orocrm_sales.lead.entity.class%, alias: l }
                    join:
                        left:
                            - { join: l.owner, alias: own }
                            - { join: own.owner, alias: bunit }
                            - { join: l.account, alias: acc } 
                    where:
                        and:
                            - acc.id = :accountid
                bind_parameters:
                - accountid
            columns:
                lastName:
                    label:          orocrm.sales.lead.last_name.label
                firstName:
                    label:          orocrm.sales.lead.first_name.label
                accid:
                    label:          'account id'
            properties:
                id: ~
                owner: ~

accounts-grid2:

extended_entity_name: %orocrm_account.account.entity.class%

inline_editing:

enable: true

acl_resource: orocrm_account_view

source:

type: orm

query:

select:

- a.id

- a.name

- a.firstName as FirstName

- a.lastName as LastName

- accStatus.label as AccountStatus

- a.id as accId

from:

- { table: %orocrm_account.account.entity.class%, alias: a }

join:

left:

- { join: a.defaultContact, alias: defaultContact }

- { join: defaultContact.emails, alias: defaultContactEmail, conditionType: 'WITH', condition: 'defaultContactEmail.primary = true' }

- { join: defaultContact.phones, alias: defaultContactPhone, conditionType: 'WITH', condition: 'defaultContactPhone.primary = true' }

- { join: a.owner, alias: accountOwner }

- { join: a.accountStatus, alias: accStatus }

properties:

id: ~

owner: ~

columns:

accId:

label: Account Id

#frontend_type: html

renderable: false

FirstName:

label: orocrm.account.firstName.label

LastName:

label: orocrm.account.lastName.label

AccountStatus:

label: orocrm.account.accountStatus.label

sorters:

columns:

FirstName:

data_name: FirstName

LastName:

data_name: LastName

AccountStatus:

data_name: AccountStatus

filters:

columns:

FirstName:

type: string

data_name: a.firstName

LastName:

type: string

data_name: a.lastName

mass_actions:

merge:

type: merge

entity_name: %orocrm_account.account.entity.class%

data_identifier: a.id

options:

entityHint: account

export: true

entity_pagination: true

leadfilterby-account:

acl_resource: orocrm_sales_lead_view

source:

type: orm

query:

select:

- l.id

- l.name

- l.firstName

- l.lastName

- acc.id as accid

from:

- { table: %orocrm_sales.lead.entity.class%, alias: l }

join:

left:

- { join: l.owner, alias: own }

- { join: own.owner, alias: bunit }

- { join: l.account, alias: acc }

where:

and:

- acc.id = :accountid

bind_parameters:

- accountid

columns:

lastName:

label: orocrm.sales.lead.last_name.label

firstName:

label: orocrm.sales.lead.first_name.label

accid:

label: 'account id'

properties:

id: ~

owner: ~

Here in Account grid(accounts-grid2) i am using an hidden field(accId) to get account Id to be used in Click Event to get Id through Jquery.

Please find code for Controller (Loc: ProjDir\src\Custom\Bundle\OroBundle\Controller\CustomRoleController.php) function given below to render these datagrids:

/**
     * @Route("/acctypes", name="customroles_accchecknow")
     * 
     */
    public function acccheckAction()
    {
        return $this->render('CustomOroBundle:CustomRole:accountgrid.html.twig');
    }
    /**
     * @Route("/leadcheck", name="leadcheck_foracccheck")
     * 
     */
    public function leadbasedonacccheckAction()
    {
        $accid = 24;
        return $this->render('CustomOroBundle:CustomRole:leadgrid.html.twig',array('accountid' => $accid));
    }
    /**
     * @Route("/leadcheckusingajax", name="leadcheck_foracccheckajx")
     * 
     */
    public function leadbasedonacccheckajxAction()
    {
        $accid = $_POST['accid'];
        $em = $this->getDoctrine()->getEntityManager();
        $connection = $em->getConnection();
        $qry = $connection->prepare("SELECT first_name,last_name,account_id FROM orocrm_sales_lead where account_id = $accid ");
        $qry->execute();
        $resdata = $qry->fetchAll();
        
        return new Response(json_encode($resdata));
        //return $this->render('CustomOroBundle:CustomRole:leadgrid.html.twig',array('accountid' => $accid));
    }

/**

* @Route("/acctypes", name="customroles_accchecknow")

public function acccheckAction()

{

return $this->render('CustomOroBundle:CustomRole:accountgrid.html.twig');

}

/**

* @Route("/leadcheck", name="leadcheck_foracccheck")

public function leadbasedonacccheckAction()

{

$accid = 24;

return $this->render('CustomOroBundle:CustomRole:leadgrid.html.twig',array('accountid' => $accid));

}

/**

* @Route("/leadcheckusingajax", name="leadcheck_foracccheckajx")

public function leadbasedonacccheckajxAction()

{

$accid = $_POST['accid'];

$em = $this->getDoctrine()->getEntityManager();

$connection = $em->getConnection();

$qry = $connection->prepare("SELECT first_name,last_name,account_id FROM orocrm_sales_lead where account_id = $accid ");

$qry->execute();

$resdata = $qry->fetchAll();

return new Response(json_encode($resdata));

//return $this->render('CustomOroBundle:CustomRole:leadgrid.html.twig',array('accountid' => $accid));

}

please find the twig files below for Account grid & Lead Grid:

ProjDir\src\Custom\Bundle\OroBundle\Resources\views\CustomRole\accountgrid.html.twig

{% extends 'OroUIBundle:actions:index.html.twig' %}
{% import 'OroDataGridBundle::macros.html.twig' as dataGrid %}
{% set pageTitle = 'Account Details' %}
{% block head_script %}
    {{ parent() }}
    {% block javascripts %}
        <script type="text/javascript">
             require(['jquery'], function ($) {
                 $(document).ready(function(){

                    function getFun(){
                        if($( ".tstJqry table tbody tr" )){
                         $('.tstJqry table tbody tr').click(function(e){
                            //e.stopImmediatePropagation();
                          var getaccId = $(this).closest('tr').find('.grid-body-cell-accId').html();
                                             
                                            //alert('accId');
                                            //alert(getaccId);
                                            $.ajax({
                                                url: "{{ path('leadcheck_foracccheckajx') }}",
                                                type: 'POST',
                                                data: {accid: getaccId},
                                                success: function (response) {
                                                    console.log(response);
                                                    //alert(response);
                                                    $('.datagrid2').html(response);
                                                }
                                            });
                                            return false;
                                        });
                                    } else {
                                        window.setTimeout(getFun, 1000);
                                    }
                                    ;
                                }
                                ;
                    window.setTimeout(getFun,1000);
                  
                    });
             });
        </script>
        {% endblock %}
        {% endblock %}
{% block content %}
    <div>
        <h2>&nbsp;&nbsp;{{ 'Test Account'|trans }}</h2>
    </div>
    <div class='tstJqry  datagrid1 acc_grid'>
    {{ dataGrid.renderGrid('accounts-grid2') }}
    </div>
    <div class="datagrid2 lead_grid">
    </div>
{% endblock content %}

{% extends 'OroUIBundle:actions:index.html.twig' %}

{% import 'OroDataGridBundle::macros.html.twig' as dataGrid %}

{% set pageTitle = 'Account Details' %}

{% block head_script %}

{% block javascripts %}

require(['jquery'], function ($) {

$(document).ready(function(){

function getFun(){

if($( ".tstJqry table tbody tr" )){

$('.tstJqry table tbody tr').click(function(e){

//e.stopImmediatePropagation();

var getaccId = $(this).closest('tr').find('.grid-body-cell-accId').html();

//alert('accId');

//alert(getaccId);

$.ajax({

url: "{{ path('leadcheck_foracccheckajx') }}",

type: 'POST',

data: {accid: getaccId},

success: function (response) {

console.log(response);

//alert(response);

$('.datagrid2').html(response);

}

});

return false;

});

} else {

window.setTimeout(getFun, 1000);

}

;

}

;

window.setTimeout(getFun,1000);

});

</script>

{% endblock %}

{% block content %}

<div>

<h2>  {{ 'Test Account'|trans }}</h2>

</div>

</div>

</div>

{% endblock content %}

Here in the above twig file i need to show the leadgrid.html.twig’s Datagrid i.e(leadfilterby-account) with a dynamic parameter to it as accountId that gets generated each time on Account grid row click. So once clicked only the
Datagrid2(leadfilterby-account) has to be refreshed with the new values corresponding to account clicked without loading the page.This is where i am stuck on how to get.

2)
ProjDir\src\Custom\Bundle\OroBundle\Resources\views\CustomRole\leadgrid.html.twig

{% extends 'OroUIBundle:actions:index.html.twig' %}
{% import 'OroDataGridBundle::macros.html.twig' as dataGrid %}
{% set pageTitle = 'Account Details' %}
{% block head_script %}
    {{ parent() }}
    {% block javascripts %}
        <script type="text/javascript">
         
        </script>
        {% endblock %}
        {% endblock %}
{% block content %}
    <div>
        <h2>&nbsp;&nbsp;{{ 'Test Account'|trans }}</h2>
    </div>
    <div class='tstJqry'>
    {{ dataGrid.renderGrid('leadfilterby-account',{accountid: accountid}) }}
    </div>
{% endblock content %}

{% extends 'OroUIBundle:actions:index.html.twig' %}

{% import 'OroDataGridBundle::macros.html.twig' as dataGrid %}

{% set pageTitle = 'Account Details' %}

{% block head_script %}

{% block javascripts %}

</script>

{% endblock %}

{% block content %}

<div>

<h2>  {{ 'Test Account'|trans }}</h2>

</div>

{{ dataGrid.renderGrid('leadfilterby-account',{accountid: accountid}) }}

</div>

{% endblock content %}

I could use the response currently i am getting to build a table similar to that done in a Datagrid & use css for UI . But the issue is i need it to be a Datagrid itself since it provides most of function like sorting,filtering,deleting,pagination , editing & viewing . So Please need help on how to go above with this.

i looked at some of references given below but could not get from where to start & no clear understanding on what to do. In some places – actions are used & some of them with mediator in js files which i am not aware about at all & dont even know whether these would be used in getting solution for the requirement.

custom-datagrid-action
orocrm-create-custom-grid-action-technique-and-secret
advanced_grid_configuration.md#problem-4

Please find below the Account Grid View(accounts-grid2) where i am able to get JSON response for Lead Values shown in FIrebug which are with Account Id -31:

Please find below another datagrid-(leadfilterby-account) view screenshot that has a hardcoded value for account Id passed from controller(In example AccId is 24) from function leadbasedonacccheckAction() shown in above Controller code:

Kindly need help if any resource or any suggestions on how to go about with to solve this issue .

Thanks & Regards,
Shreyas S

Creator
Topic

Viewing 5 replies - 1 through 5 (of 5 total)

Author
Replies

August 8, 2016 at 5:46 am #30433

Mike Kudelya

Participant

Hi,

I have made similar case between users and contact grid.

Extend data grid bundle:

src/Custom/Bundle/DataGridBundle/CustomDataGridBundle.php

<?php

namespace Custom\Bundle\DataGridBundle;

use Symfony\Component\HttpKernel\Bundle\Bundle;

class CustomDataGridBundle extends Bundle
{
    public function getParent()
    {
        return 'OroDataGridBundle';
    }
}

<?php

namespace Custom\Bundle\DataGridBundle;

use Symfony\Component\HttpKernel\Bundle\Bundle;

class CustomDataGridBundle extends Bundle

{

public function getParent()

{

return 'OroDataGridBundle';

}

Override original widget.html.twig, src/Custom/Bundle/DataGridBundle/Resources/views/Grid/widget/widget.html.twig

{% import 'OroDataGridBundle::macros.html.twig' as dataGrid %}

<div class="widget-content">
    {% block widget_content %}
    <div class="flash-messages">
        <div class="flash-messages-frame">
            <div class="flash-messages-holder"></div>
        </div>
    </div>
    <script type="text/javascript">
        require(['oroui/js/mediator', 'oroui/js/widget-manager'],
                function(mediator, widgetManager) {
                    var gridName = {{ gridName|json_encode|raw }};
                    mediator.bind('datagrid_create_before', function(options) {
                        if (options.name == gridName) {
                            {% if multiselect %}
                            options.multiSelectRowEnabled = true;
                            {% else %}
                            options.rowClickAction = function(data) {
                                return {
                                    run: function() {
                                        widgetManager.getWidgetInstance(
                                                {{ app.request.get('_wid')|json_encode|raw }},
                                                function(widget) {
                                                    widget.trigger('grid-row-select', data);
                                                }
                                        );
                                    }
                                }
                            };
                            {% endif %}
                        }
                    });
                });
    </script>
    {{ dataGrid.renderGrid(gridName, params, {'enableViews': false}|merge(renderParams)) }}
    {% endblock %}
</div>

{% import 'OroDataGridBundle::macros.html.twig' as dataGrid %}

{% block widget_content %}

</div>

require(['oroui/js/mediator', 'oroui/js/widget-manager'],

function(mediator, widgetManager) {

var gridName = {{ gridName|json_encode|raw }};

mediator.bind('datagrid_create_before', function(options) {

if (options.name == gridName) {

{% if multiselect %}

options.multiSelectRowEnabled = true;

{% else %}

options.rowClickAction = function(data) {

return {

run: function() {

widgetManager.getWidgetInstance(

{{ app.request.get('_wid')|json_encode|raw }},

function(widget) {

widget.trigger('grid-row-select', data);

}

);

}

};

{% endif %}

}

});

</script>

{{ dataGrid.renderGrid(gridName, params, {'enableViews': false}|merge(renderParams)) }}

{% endblock %}

</div>

You can extend OroCRMContactBundle and override
src/Custom/Bundle/OroCRMContactBundle/Resources/views/Contact/view.html.twig

Here is important part of view.html.twig

    {% set usersGridContent = oro_widget_render({
        'widgetType': 'block',
        'url': path('oro_datagrid_widget', {gridName: 'users-grid'}),
        'title': 'Users'|trans,
        'alias': 'user-grid-widget'
    }) %}

    {% set dataBlocks = [
        {
            'title': 'General Information'|trans,
            'class': 'active',
            'subblocks': [
                {'data' : [contactInformationWidget] },
                {'data' : [addressBookWidget] },
            ]
        },
        {
            'title': 'Users grid'|trans,
            'class': 'active',
            'subblocks': [
                {'data' : [usersGridContent] },
            ]
        },
        {
            'title': 'Contacts grid'|trans,
            'class': 'active',
            'subblocks': [
                {'data' : [dataGrid.renderGrid('contacts-grid')] },
            ]
        },
    ] %}

    <script type="text/javascript">
        require(['oroui/js/widget-manager', 'oroui/js/mediator'],
                function(widgetManager, mediator) {
                    widgetManager.getWidgetInstanceByAlias('user-grid-widget', function(widget) {
                        widget.on('grid-row-select', function(data) {
                            var id = data.model.id;
                            mediator.trigger('datagrid:setParam:contacts-grid', 'applyOwnerFilter', 1);
                            mediator.trigger('datagrid:setParam:contacts-grid', 'ownerId', id);
                            mediator.trigger('datagrid:doReset:contacts-grid');
                        });
                    });
                });
    </script>

{% set usersGridContent = oro_widget_render({

'widgetType': 'block',

'url': path('oro_datagrid_widget', {gridName: 'users-grid'}),

'title': 'Users'|trans,

'alias': 'user-grid-widget'

}) %}

{% set dataBlocks = [

{

'title': 'General Information'|trans,

'class': 'active',

'subblocks': [

{'data' : [contactInformationWidget] },

{'data' : [addressBookWidget] },

]

{

'title': 'Users grid'|trans,

'class': 'active',

'subblocks': [

{'data' : [usersGridContent] },

]

{

'title': 'Contacts grid'|trans,

'class': 'active',

'subblocks': [

{'data' : [dataGrid.renderGrid('contacts-grid')] },

]

] %}

require(['oroui/js/widget-manager', 'oroui/js/mediator'],

function(widgetManager, mediator) {

widgetManager.getWidgetInstanceByAlias('user-grid-widget', function(widget) {

widget.on('grid-row-select', function(data) {

var id = data.model.id;

mediator.trigger('datagrid:setParam:contacts-grid', 'applyOwnerFilter', 1);

mediator.trigger('datagrid:setParam:contacts-grid', 'ownerId', id);

mediator.trigger('datagrid:doReset:contacts-grid');

});

</script>

Now user-grid-widget is listening row clicks, after which it set two parameters. Necessary to add the listener which get this parameters and build datagrid

parameters:
    custom_oro.listener.datagrid.contact.class: Custom\Bundle\OroBundle\EventListener\ContactGridListener

services:

    custom_oro.listener.datagrid.contact:
        class: %custom_oro.listener.datagrid.contact.class%
        tags:
            - { name: kernel.event_listener, event: oro_datagrid.datagrid.build.pre.contacts-grid, method: onBuildBefore }

parameters:

custom_oro.listener.datagrid.contact.class: Custom\Bundle\OroBundle\EventListener\ContactGridListener

services:

custom_oro.listener.datagrid.contact:

class: %custom_oro.listener.datagrid.contact.class%

tags:

- { name: kernel.event_listener, event: oro_datagrid.datagrid.build.pre.contacts-grid, method: onBuildBefore }

ContactGridListener.php

<?php

namespace Custom\Bundle\OroBundle\EventListener;

use Oro\Bundle\DataGridBundle\Datagrid\Common\DatagridConfiguration;
use Oro\Bundle\DataGridBundle\Datagrid\ParameterBag;
use Oro\Bundle\DataGridBundle\Event\PreBuild;

class ContactGridListener
{
    const APPLY_OWNER_TRIGGER = 'applyOwnerFilter';
    const OWNER_ID = 'ownerId';
    const ID_FIELD = 'o.id';
    const WHERE_PATH = '[source][query][where][and]';

    /**
     * @param PreBuild $event
     */
    public function onBuildBefore(PreBuild $event)
    {
        $this->applyFilters($event->getConfig(), $event->getParameters());
    }

    /**
     * @param DatagridConfiguration $config
     * @param ParameterBag $parameters
     */
    protected function applyFilters(DatagridConfiguration $config, ParameterBag $parameters)
    {
        $additionalParameters = $parameters->get(ParameterBag::ADDITIONAL_PARAMETERS, []);
        if (!is_array($additionalParameters)) {
            return;
        }

        $additionalParameters = new ParameterBag($additionalParameters);
        $isApplyOwnerId = $additionalParameters->get(self::APPLY_OWNER_TRIGGER, false);

        if (!$isApplyOwnerId) {
            return;
        }

        $ownerId = $additionalParameters->get(self::OWNER_ID, 0);
        $config->offsetAddToArrayByPath(self::WHERE_PATH, [sprintf('%s = %d', self::ID_FIELD, $ownerId)]);
    }
}

<?php

namespace Custom\Bundle\OroBundle\EventListener;

use Oro\Bundle\DataGridBundle\Datagrid\Common\DatagridConfiguration;

use Oro\Bundle\DataGridBundle\Datagrid\ParameterBag;

use Oro\Bundle\DataGridBundle\Event\PreBuild;

class ContactGridListener

{

const APPLY_OWNER_TRIGGER = 'applyOwnerFilter';

const OWNER_ID = 'ownerId';

const ID_FIELD = 'o.id';

const WHERE_PATH = '[source][query][where][and]';

/**

* @param PreBuild $event

public function onBuildBefore(PreBuild $event)

{

$this->applyFilters($event->getConfig(), $event->getParameters());

}

/**

* @param DatagridConfiguration $config

* @param ParameterBag $parameters

protected function applyFilters(DatagridConfiguration $config, ParameterBag $parameters)

{

$additionalParameters = $parameters->get(ParameterBag::ADDITIONAL_PARAMETERS, []);

if (!is_array($additionalParameters)) {

return;

}

$additionalParameters = new ParameterBag($additionalParameters);

$isApplyOwnerId = $additionalParameters->get(self::APPLY_OWNER_TRIGGER, false);

if (!$isApplyOwnerId) {

return;

}

$ownerId = $additionalParameters->get(self::OWNER_ID, 0);

$config->offsetAddToArrayByPath(self::WHERE_PATH, [sprintf('%s = %d', self::ID_FIELD, $ownerId)]);

}

August 11, 2016 at 10:13 pm #30434

shreyas

Participant

Hi Mike,

Thanks a lot for providing me with the solution.I will get back if any issues.

Thanks & Regards,
Shreyas S

August 22, 2016 at 3:39 am #30435

shreyas

Participant

Hi Mike,

It worked. Thanks a lot for the solution.

Here i am facing bit issue in routing.yml (In Oro\Bundle\DataGridBundle\Resources\config\oro\routing.yml)where in oro_datagrid_bundle‘s resource parameter value has been changed to Complete path of project folder.If it is kept unchanged to default path i.e @OroDataGridBundle/Controller It throws an exception in browser.

Please find the below steps followed as per your solution.Let me know if i missed anything:

Extended Datagrid bundle into a new bundle (CustomSrcDataGridBundle) under location : Proj_Dir\src\Custom\Bundle\SrcDataGridBundle\CustomSrcDataGridBundle.php same as the one you have done for CustomDataGridBundle.php & also the widget view page same as widget.html.twig shown by you to file under loc:Proj_Dir\src\Custom\Bundle\SrcDataGridBundle\Resources\views\Grid\widget\widget.html.twig.

As per our requirement Lead Records(Datagrid 1) would be shown for particular Account in Account view page & now when a lead is clicked the respective service history (Datagrid 2) specific to that lead has to shown up in Account’s View Page .Please find code snippets given below:
In CustomAccountBundle View Page under loc:Proj_Dir\src\Custom\Bundle\AccountBundle\Resources\views\Account\view.html.twig

{% extends 'OroUIBundle:actions:view.html.twig' %}
{% import 'OroDataGridBundle::macros.html.twig' as dataGrid %}

{% oro_title_set({params : {"%account.name%": entity.name|default('N/A')} }) %}

{% set gridNameService = 'service-history-grid3' %}
{% set gridNameLead = 'account-lead-grid-internal' %}

{% set leadGridContent = oro_widget_render({
        'widgetType': 'block',
        'url': path('oro_datagrid_widget', {gridName: 'account-lead-grid-internal',params: {accountId:entity.id}}),
        'title': 'Leads'|trans,
        'alias': 'lead-grid-widget'
    }) %}

{% block navButtons %}
    {% if resource_granted('EDIT', entity) %}
        {{ UI.editButton({
            'path': path('orocrm_account_update', {'id': entity.id}),
            'entity_label': 'orocrm.account.entity_label'|trans
        }) }}
    {% endif %}
    {% if resource_granted('DELETE', entity) %}
        {{ UI.deleteButton({
            'dataUrl': path('oro_api_delete_account', {'id': entity.id}),
            'dataRedirect': path('orocrm_account_index'),
            'aCss': 'no-hash remove-button',
            'dataId': entity.id,
            'id': 'btn-remove-account',
            'entity_label': 'orocrm.account.entity_label'|trans
        }) }}
    {% endif %}
{% endblock navButtons %}

{% block pageHeader %}
    {% set breadcrumbs = {
        'entity': entity,
        'indexPath': path('orocrm_account_index'),
        'indexLabel': 'orocrm.account.entity_plural_label'|trans,
        'entityTitle': entity.firstName ~ ' ' ~ entity.lastName|default('N/A')
    } %}
    {{ parent() }}
{% endblock pageHeader %}

{% block content_data %}
    {% set accountInformationWidget %}
        {{ oro_widget_render({
            'widgetType': 'block',
            'title': 'orocrm.account.widgets.account_information'|trans,
            'url': path('orocrm_account_widget_info', {id: entity.id})
        }) }}
    {% endset %}

    {% set generalSectionBlocks = [{'data' : [accountInformationWidget]}]%}
    {% set dataBlocks = [
        {
            'title': 'orocrm.account.sections.general'|trans,
            'class': 'active',
            'subblocks': generalSectionBlocks
        }
    ] %}
    
    
    

    {% set dataBlocks = dataBlocks|merge([{
        'title' : 'orocrm.account.sections.leadhistory'|trans,
        'subblocks':
        [
            {
                'title' : null,
                'useSpan': false,
                'data' : [
                    leadGridContent
                ]
            }
        ]
    }]) %}
  <div id="gridnameService">
    {% set dataBlocks = dataBlocks|merge([{
        'title' : 'orocrm.account.sections.servicehistory'|trans,
        'subblocks':
        [
            {
                'title' : null,
                'useSpan': false,
                'data' : [
                    dataGrid.renderGrid(gridNameService)
                ]
            }
        ]
    }]) %}
  </div>
    {% set id = 'accountView' %}
    {% set data = {'dataBlocks': dataBlocks} %}

    {{ parent() }}
    
    <script type="text/javascript">
           
        require(['oroui/js/widget-manager', 'oroui/js/mediator'],
                function(widgetManager, mediator) {
                   $('[id*="grid-service-history-grid3"]').hide();
                    widgetManager.getWidgetInstanceByAlias('lead-grid-widget', function(widget) {
                        widget.on('grid-row-select', function(data) {
                            var id = data.model.id;
                           $('[id*="grid-service-history-grid3"]').show(); 
                            mediator.trigger('datagrid:setParam:service-history-grid3', 'applyLeadFilter', 1);
                            mediator.trigger('datagrid:setParam:service-history-grid3', 'leadid', id);
                            mediator.trigger('datagrid:doReset:service-history-grid3');
                        });
                    });
                });
    </script>
    
{% endblock content_data %}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

{% extends 'OroUIBundle:actions:view.html.twig' %}

{% import 'OroDataGridBundle::macros.html.twig' as dataGrid %}

{% oro_title_set({params : {"%account.name%": entity.name|default('N/A')} }) %}

{% set gridNameService = 'service-history-grid3' %}

{% set gridNameLead = 'account-lead-grid-internal' %}

{% set leadGridContent = oro_widget_render({

'widgetType': 'block',

'url': path('oro_datagrid_widget', {gridName: 'account-lead-grid-internal',params: {accountId:entity.id}}),

'title': 'Leads'|trans,

'alias': 'lead-grid-widget'

}) %}

{% block navButtons %}

{% if resource_granted('EDIT', entity) %}

{{ UI.editButton({

'path': path('orocrm_account_update', {'id': entity.id}),

'entity_label': 'orocrm.account.entity_label'|trans

}) }}

{% endif %}

{% if resource_granted('DELETE', entity) %}

{{ UI.deleteButton({

'dataUrl': path('oro_api_delete_account', {'id': entity.id}),

'dataRedirect': path('orocrm_account_index'),

'aCss': 'no-hash remove-button',

'dataId': entity.id,

'id': 'btn-remove-account',

'entity_label': 'orocrm.account.entity_label'|trans

}) }}

{% endif %}

{% endblock navButtons %}

{% block pageHeader %}

{% set breadcrumbs = {

'entity': entity,

'indexPath': path('orocrm_account_index'),

'indexLabel': 'orocrm.account.entity_plural_label'|trans,

'entityTitle': entity.firstName ~ ' ' ~ entity.lastName|default('N/A')

} %}

{% endblock pageHeader %}

{% block content_data %}

{% set accountInformationWidget %}

{{ oro_widget_render({

'widgetType': 'block',

'title': 'orocrm.account.widgets.account_information'|trans,

'url': path('orocrm_account_widget_info', {id: entity.id})

}) }}

{% endset %}

{% set generalSectionBlocks = [{'data' : [accountInformationWidget]}]%}

{% set dataBlocks = [

{

'title': 'orocrm.account.sections.general'|trans,

'class': 'active',

'subblocks': generalSectionBlocks

}

] %}

{% set dataBlocks = dataBlocks|merge([{

'title' : 'orocrm.account.sections.leadhistory'|trans,

'subblocks':

[

{

'title' : null,

'useSpan': false,

'data' : [

leadGridContent

]

}

]

}]) %}

{% set dataBlocks = dataBlocks|merge([{

'title' : 'orocrm.account.sections.servicehistory'|trans,

'subblocks':

[

{

'title' : null,

'useSpan': false,

'data' : [

dataGrid.renderGrid(gridNameService)

]

}

]

}]) %}

</div>

{% set id = 'accountView' %}

{% set data = {'dataBlocks': dataBlocks} %}

require(['oroui/js/widget-manager', 'oroui/js/mediator'],

function(widgetManager, mediator) {

$('[id*="grid-service-history-grid3"]').hide();

widgetManager.getWidgetInstanceByAlias('lead-grid-widget', function(widget) {

widget.on('grid-row-select', function(data) {

var id = data.model.id;

$('[id*="grid-service-history-grid3"]').show();

mediator.trigger('datagrid:setParam:service-history-grid3', 'applyLeadFilter', 1);

mediator.trigger('datagrid:setParam:service-history-grid3', 'leadid', id);

mediator.trigger('datagrid:doReset:service-history-grid3');

});

</script>

{% endblock content_data %}

Here in above code account-lead-grid-internal Datagrid (Datagrid 1) contains list of all leads for the Account viewed.
Now on click of any Lead displayed through account-lead-grid-internal the event listener displays service history records from service-history-grid3 (Datagrid 2) Datagrid.
Event Listener for Lead is written in Loc: Proj_Dir\src\Custom\Bundle\OroBundle\EventListener\LeadGridListener.php

<?php

namespace Custom\Bundle\OroBundle\EventListener;

use Oro\Bundle\DataGridBundle\Datagrid\Common\DatagridConfiguration;
use Oro\Bundle\DataGridBundle\Datagrid\ParameterBag;
use Oro\Bundle\DataGridBundle\Event\PreBuild;

class LeadGridListener
{
    const APPLY_LEAD_TRIGGER = 'applyLeadFilter';
    const LEAD_ID = 'leadid';
    const ID_FIELD = 'relatedLead.id';
    const WHERE_PATH = '[source][query][where][and]';

    /**
     * @param PreBuild $event
     */
    public function onBuildBefore(PreBuild $event)
    {

        $this->applyFilters($event->getConfig(), $event->getParameters());
    }

    /**
     * @param DatagridConfiguration $config
     * @param ParameterBag $parameters
     */
    protected function applyFilters(DatagridConfiguration $config, ParameterBag $parameters)
    {
        $additionalParameters = $parameters->get(ParameterBag::ADDITIONAL_PARAMETERS, []);
        if (!is_array($additionalParameters)) {
            return;
        }

        $additionalParameters = new ParameterBag($additionalParameters);
        $isApplyOwnerId = $additionalParameters->get(self::APPLY_LEAD_TRIGGER, false);

        if (!$isApplyOwnerId) {
            return;
        }

        $leadId = $additionalParameters->get(self::LEAD_ID, 0);
        //echo $accountId; exit;
        $config->offsetAddToArrayByPath(self::WHERE_PATH, [sprintf('%s = %d', self::ID_FIELD, $leadId)]);
    }
}

<?php

namespace Custom\Bundle\OroBundle\EventListener;

use Oro\Bundle\DataGridBundle\Datagrid\Common\DatagridConfiguration;

use Oro\Bundle\DataGridBundle\Datagrid\ParameterBag;

use Oro\Bundle\DataGridBundle\Event\PreBuild;

class LeadGridListener

{

const APPLY_LEAD_TRIGGER = 'applyLeadFilter';

const LEAD_ID = 'leadid';

const ID_FIELD = 'relatedLead.id';

const WHERE_PATH = '[source][query][where][and]';

/**

* @param PreBuild $event

public function onBuildBefore(PreBuild $event)

{

$this->applyFilters($event->getConfig(), $event->getParameters());

}

/**

* @param DatagridConfiguration $config

* @param ParameterBag $parameters

protected function applyFilters(DatagridConfiguration $config, ParameterBag $parameters)

{

$additionalParameters = $parameters->get(ParameterBag::ADDITIONAL_PARAMETERS, []);

if (!is_array($additionalParameters)) {

return;

}

$additionalParameters = new ParameterBag($additionalParameters);

$isApplyOwnerId = $additionalParameters->get(self::APPLY_LEAD_TRIGGER, false);

if (!$isApplyOwnerId) {

return;

}

$leadId = $additionalParameters->get(self::LEAD_ID, 0);

//echo $accountId; exit;

$config->offsetAddToArrayByPath(self::WHERE_PATH, [sprintf('%s = %d', self::ID_FIELD, $leadId)]);

}

Here leadid is sent to service-history-grid3 Datagrid to display results only to that lead.

Please find the services.yml file given below Loc in: Proj_Dir\src\Custom\Bundle\SrcDataGridBundle\Resources\config\services.yml

parameters:
    custom_oro.listener.datagrid.lead.class: Custom\Bundle\OroBundle\EventListener\LeadGridListener

services:
    custom_oro.listener.datagrid.lead:
        class: %custom_oro.listener.datagrid.lead.class%
        tags:
            - { name: kernel.event_listener, event: oro_datagrid.datagrid.build.pre.service-history-grid3, method: onBuildBefore }

parameters:

custom_oro.listener.datagrid.lead.class: Custom\Bundle\OroBundle\EventListener\LeadGridListener

services:

custom_oro.listener.datagrid.lead:

class: %custom_oro.listener.datagrid.lead.class%

tags:

- { name: kernel.event_listener, event: oro_datagrid.datagrid.build.pre.service-history-grid3, method: onBuildBefore }

Please find code snippet for service-history-grid3 given below:

service-history-grid3:
        acl_resource: dealer_servicehistory_view
        source:
            type: orm
            query:
                select:
                    - serviceHistory.id
                    - status.label as statusLabel
                    - stype.label as serviceTypeLabel
                    - ssource.label as serviceSourceLabel
                    - relatedLead.name as relatedLeadName
                from:
                    - { table: DealerServiceHistoryBundle:ServiceHistory, alias: serviceHistory }
                join:
                    left:
                        - { join: serviceHistory.owner, alias: owner }
                        - { join: serviceHistory.status, alias: status }
                        - { join: serviceHistory.serviceType, alias: stype }
                        - { join: serviceHistory.serviceSource, alias: ssource }
                        - { join: serviceHistory.servicePaymentType, alias: sptype }
                        - { join: serviceHistory.relatedLead, alias: relatedLead }
                
        columns:
            statusLabel:
                label: dealer.servicehistory.grid.status.label
            serviceTypeLabel:
                label: dealer.servicehistory.grid.servicetype.label
            serviceSourceLabel:
                label: dealer.servicehistory.grid.servicesource.label
            relatedLeadName:
                label: 'dealer.servicehistory.grid.relatedLead.label'
        properties:
            id: ~

service-history-grid3:

acl_resource: dealer_servicehistory_view

source:

type: orm

query:

select:

- serviceHistory.id

- status.label as statusLabel

- stype.label as serviceTypeLabel

- ssource.label as serviceSourceLabel

- relatedLead.name as relatedLeadName

from:

- { table: DealerServiceHistoryBundle:ServiceHistory, alias: serviceHistory }

join:

left:

- { join: serviceHistory.owner, alias: owner }

- { join: serviceHistory.status, alias: status }

- { join: serviceHistory.serviceType, alias: stype }

- { join: serviceHistory.serviceSource, alias: ssource }

- { join: serviceHistory.servicePaymentType, alias: sptype }

- { join: serviceHistory.relatedLead, alias: relatedLead }

columns:

statusLabel:

label: dealer.servicehistory.grid.status.label

serviceTypeLabel:

label: dealer.servicehistory.grid.servicetype.label

serviceSourceLabel:

label: dealer.servicehistory.grid.servicesource.label

relatedLeadName:

label: 'dealer.servicehistory.grid.relatedLead.label'

properties:

id: ~

With all these above steps if i try loading Application . i get exception in browser as follows:

An exception has been thrown during the rendering of a template ("Unable to generate a URL for the named route "oro_datagrid_index" as such route does not exist.") in OroEmailBundle:Dashboard:recentEmailsGrid.html.twig at line 3

1	An exception has been thrown during the rendering of a template ("Unable to generate a URL for the named route "oro_datagrid_index" as such route does not exist.") in OroEmailBundle:Dashboard:recentEmailsGrid.html.twig at line 3

Please find error screenshot below:

Now when i tried changing Routing.yml present in Location:Proj_Dir\vendor\oro\platform\src\Oro\Bundle\DataGridBundle\Resources\config\oro\routing.yml to given below code, It works:

oro_datagrid_bundle:
    resource: "/websites/Proj_Dir/crm-application/vendor/oro/platform/src/Oro/Bundle/DataGridBundle/Controller"
    #resource: "@OroDataGridBundle/Controller"
    type:     annotation
    prefix:   /datagrid

oro_datagrid_api:
    resource: "@OroDataGridBundle/Resources/config/oro/routing_api.yml"
    type: rest
    prefix: api/rest/{version}
    requirements:
        version: latest|v1
        _format: json
    defaults:
        version: latest
        _format: json

oro_datagrid_bundle:

resource: "/websites/Proj_Dir/crm-application/vendor/oro/platform/src/Oro/Bundle/DataGridBundle/Controller"

#resource: "@OroDataGridBundle/Controller"

type: annotation

prefix: /datagrid

oro_datagrid_api:

resource: "@OroDataGridBundle/Resources/config/oro/routing_api.yml"

type: rest

prefix: api/rest/{version}

requirements:

version: latest|v1

_format: json

defaults:

version: latest

_format: json

Now here Issue faced is that In the code above we have hardcoded the project Directory to : ‘/websites/Proj_Dir/crm-application/vendor/oro/platform/src/Oro/Bundle/DataGridBundle/Controller’ which is not a Good practise as the project directory changes often & each time to remember & change this is difficult process.

So with the Resource value set to Hardcoded Project Directory Path , the code is working absolutely fine.

I also tried extending the Datagrid Bundle to a Custom Bundle & Overriding the routing.yml but it also gave same exception.

Please need help if any suggestions on how to solve this issue.

Thanks & Regards,
Shreyas S

August 23, 2016 at 10:13 am #30436

Mike Kudelya

Participant

I think the reason why you got this error is that symfony can’t find oro_datagrid_index route because you have overridden the GridController.php and forgot extend it from base controller.

For example i have created custom bundle with parent OroDataGridBundle and have created Custom\Bundle\DataGridBundle\Controller\GridController.php

class GridController extends Controller
{
.....
}

class GridController extends Controller

{

.....

}

delete function getAction and got the same error.

August 24, 2016 at 1:05 am #30437

shreyas

Participant

Hi Mike,

You were Right.The Datagrid Bundle was not extended properly as GridController was missed in Custom Bundle.
Now it is working absolutely fine.Thanks so much.

Thanks & Regards,
Shreyas S

Author
Replies

Viewing 5 replies - 1 through 5 (of 5 total)

The forum ‘OroCRM’ is closed to new topics and replies.

OroCRM Forums